I have problem with CSS on my school project blog. I have two columns, left and right in container with max-width to aim automatic resizing.
However it´s not working correctly.
On some specific width the left column with articles jumps under the right column and it starts resizing only when it come to the edge of text.
My aim is to resize it to preserve the left column next to right.
As you are not able to view my blog without login here I created fiddle for deomnstration and this is the important part of css.
#content{
max-width:65em;
margin:0 auto;}
#left-column{
float:left;
max-width:44em;
}
#right-column{
max-width:19em;
float:right;
margin-left:1em;
}
http://jsfiddle.net/2Nbu2/
Thank you
Try giving them both a css float to the left.
Using fixed pixel size's and adding a clearfix - explained here http://themergency.com/css-clearfix-demystified/
Remove the float on the left-column.
Related
EDIT - As requested here's the Fiddle jsfiddle.net/daghene/eq4tfzLn/
I've already searched a lot on Stackoverflow and Google to find an answer to this but even if there's plenty I don't know why they're not working nor if I'm handling this layout correctly.
Basically I'm using Skeleton responsive framework to make a one-page layout and I have a section where there's a row with this image on the left and text on its right. Below it there's a small twitter paragraph with the latest news.
Basically my problem is: when the first row gets too small and the text starts getting long the image gets way too small and I thought the best solution is to vertically center it, but both it and the div's height are responsive(most solutions requires at least one of the two to be fixed height).
What's your suggestion and far more importantly am I handling this layout well on a logical perspective or is it ok to have paragraphs get THAT long with the image simply sticking to the top?
Note that it displays fine on desktop, tablet and smartphones, there's just that little part where it gets kinda weird...here's the screenshot of how my layout is acting, the third one being the one that I think should be fixed since it's kinda ugly to look at and maybe centering the image would help.
P.s. one thing I forgot, haven't put my code since Skeleton, as most responsive Frameworks, simply requires a .container class with .row and .X columns inside it to give the divs size and centering and I didn't add anything on top of that yet. The only thing I think I'll do is put the sections in a fixed height's div because I plan on making the user scroll them as slides and they'll always need to be 100% viewport height or at least a fixed height like say 600px scaling.
P.s.2 if the only solution is js since we don't know the paragraph's and img's height at all times go ahead and propose a solution, I'm asking if this could be done with CSS since I'm not that good at js yet.
I would give the thanksup row an id - eg vertical and then you can use the following styles to achieve vertical alignment:
#vertical {
display:table;
width:100%;
}
#vertical > .columns {
float:none;
display:table-cell;
vertical-align:middle
}
#media (max-width: 565px) {
#vertical > .columns {
display: block;
}
Updated fiddle
I am building a photo gallery viewer using javascript and css, but i cant center the elements. I have a back arrow photo, the photo itself, and the next arrow. these 3 photos are one next to each other, and I need to center all three of them.
Any help is appreciated, and also, I am kind of new to css/javascript/html, so dont be so hard on me.
Thank you,
Guy Z.
(you can go to guyzyl.org, enter any gallery and click on a photo to see what I mean, and what I am trying to center)
This style should help:
#viewer {
text-align: center;
white-space: nowrap;
}
Also, use a DOCTYPE.
Just looked at your site. Try adding the CSS below to the styles for your Viewer div
margin: auto;
That 'should' center the div on screen. Assuming there is enough space in the browser window.
You need to give
<div id="viewer"></div>
a fixed width and set it's left and right margins to auto.
The CSS looks like this:
#viewer{
width:500px;
margin-left:auto;
margin-right:auto;
}
To prevent the arrows from wrapping around you need to resize your photos to fit within the width of the viewer minus the width of the arrows and any padding, margins, or borders on them.
I'm trying to do jquery pagination, however I'm having a problem keeping the navigator on the bottom, even with clear: both.
The problem is that the navigation div <div class="alt_page_navigation"></div> needs to be right where </ul> ends and cannot be in another div, or else the pagination get's broken.
Another problem is that because the page is dynamic, I don't know the width of the alt_page_navigation beforehand.
Here's a live page example, I've tried everything google spit up, to no avail.
If anyone knows of a simple solution, please let me know :)
Thank you :))
Clear won't work with your inline-block display, but you need that for centering.
Try this solution for creating a clearing div, then put
<div class="clearfix"></div>
between your products and your pager.
Put padding at the bottom equal to the height of your nav, and position like so:
.wrapper { position:relative; padding-bottom:1.5em }
.nav { height:1.5em; position:absolute; bottom:0 }
For example: http://jsfiddle.net/CwrMq/
But there's no reason to use absolute positioning, either; just make it a proper display:block item. For example: http://jsfiddle.net/CwrMq/1/
Your .alt_page_navigation div has display: inline-block set on it. If you delete this line in css - your div will clear the floats. If you want its content to be in the center of the page simply add text-align: center to it and make sure that its content is inline-block (now your a are block-level). You can see the working example here: http://jsfiddle.net/6FNH6/
Here is a solution i tend to use in situations like this.
Your paginator needs to go inside a container that positions it horizontally
See this fiddle - http://jsfiddle.net/94MwF/1/
Basically you are using text-align to horizontally center it, and position absolute to put it at the bottom.
I'm having trouble figuring out how to make the my pictures div show in the right place
here is a fiddle which looks worse the my page bust will give you an idea of what i"m trying to do
here is how it really looks a the of the page and at the `!
as you can see the div "pictures" has space above the pictures inside it and they pictures are pushed out at the bottom making my gradient incorrect.
I can't figure out where the extra space is coming from
additional
there is additional space on the right that grows while you expand the browser window until the next picture can fit then it shrinks. how can I make it so it stays at like 10px until the next picture fits
The problem you're having is that the div.spacer at the top of your pictures DIV is clearing the floated a.home (the sidebar, if I'm not mistaken). A possible solution would be to put overflow:hidden on the pictures DIV.
(Basically, you can control the "scope" of CSS clear by using overflow to create what is called a "block formatting context". If you apply overflow:hidden to the pictures DIV, then clear:both elements inside of that DIV cannot clear floats outside of that DIV.)
You have top: 200px; in the CSS of your pictures div
Hard to tell with the JSFiddle but:
div.pictures {
position:relative;
top:200px;
width:90%;
margin:auto;
background: rgba(255,255,238, 0.25)
}
Looks like that top:200px; rule is adding significant space.
try putting a <br style="clear:both;" /> at the end of the div!
Set top in the div.pictures to 0px;. However, it's difficult to tell if this is the result you want using Fiddle.
Basically i'm trying to get a divider to run to the right edge of the screen (without overflow).
If you look here: http://gomysites.com and scroll down to the twitter section you will see i've set the twitter panel to run off to the left edge of the screen (no matter the size).
Now i want to do exactly the same on the right side. If you notice the grey divider between the blog posts id like this to run to the right edge of the screen (no matter the size) without it adding a horizontal scroller.
I've tried setting the css for the divider exactly opposite as i did for the titter panel:
.widget_gomy_news .divider{
margin:30px -10000px 30px 0;
background:#f3f3f3;
height:30px;
float:right;
width:610px;
padding:0 10000px 0 0;
}
But it adds a horizontal scroller. So i did try adding overflow:hidden; to the body. Which removes the scroller but i can still scroll everything left and right with the mouse.
Anyone got any ideas how i can achieve what i'm after? or will i need to use some js to make this work?
Thanks in advance.
Just remove the -10000px right margin and the 10000px right padding and it works. What do you need that for?
Use overflow-x: hidden on the body element. This will prevent the horizontal scroll but may trip you up in older versions of IE - Tested in IE8 and Chrome.
Edit:
You could also write some jQuery to grab the Window viewport height/width like: $(window).height();, and size your entire page's "container" div accordingly. This will allow you to know what numbers you're working with for setting the negative/position margins in your "divider" hack.
I think i've sorted it. I wrapped all the page content inside a div and added overflow hidden to that (rather than body). This worked in everything except IE7, but i can do a simple work around for IE7. Thanks for all the replies, Jeff sent me down the right path thanks.