I'm trying to create a two columns layout where there is one column floated left, and there are two DIVs floated right. The sum of the two right DIVs is a height that is less than the height of the left DIV. I think I'm missing some CSS that allows this to happen. As of right now the second right DIV is appearing below the end of the left DIVs because of the height difference.
It's probably easier to view the page itself to see the issue. I need to have the DIV close the end of the right content so that it appears that all of the text is within a box.
http://brimbar.com/no_crawl/RiverHollow/history.html
I can add a negative margin to accomplish this, but I'm assuming I'm going about this all wrong.
Un-float both (or all, if you plan to add more) of your righthand divs, put them inside a wrapper, and then give that wrapper a margin-left value equivalent to the width of your left div.
screenshot: http://easycaptures.com/fs/uploaded/677/0314515048.png
demo: http://jsbin.com/aviyok/1/edit
You should also remove the huge negative margin on your right content div; that breaks very easily.
I have 6 floating divs (align to left) on a page. These divs has 2 different widths (depending the image () ). One div has 295px and the another has 216px. The height is calculated automatically by HTML. The container has 1050px, so in one "line" of the container I can insert 3 divs, and the another 3 on the second "line".
The CSS rule is working, all divs are floating to the left, each div has 20px margin, but the problem is the alignment of them. I want to align these divs proportional. At the moment if some pictures has different heights, on the second "line" are some blank spaces (because the height of the pictures above).
I want something to float these divs on the Y coordinate (proportional).
Look at this pictures:
Make a jsfiddle for people to play with.
But, you will probably want to make a container div for each row. This encapsulates the 3 inner divs, being as high as them and allowing the next container to fit nicely underneath
See my fiddle: http://jsfiddle.net/TJxmT/
Wouldn't a min-height at the floating divs solve the problem?
Try to use jQuery plugin called Masonry to fix that layout... You will be surprised!
EDIT:
You can always clear the 1st item in the row and every third item using css :
li:nth-child(3n+4) { clear:left; }
Have you tried putting a clear: both; on every first div of a new line?
Which CSS rules explain the following sceanrio:
Assuming I have the following HTML CSS snippets
HTML:
<div id="main">
<div id="first">
first div float left
</div>
<div id="second">
second div does not have a float property set
and appears in a new line instead of next to
the first div
</div>
</div>
CSS:
#first
float: left
What I am wondering about is, why the second div floats next to the first div, only when its width is set. If I replace the second div with a paragraph, it also floats next the first div. So why does the second div only position next to the first one when its width is set or its own float property is set to float left?
By the way. I am not trying to achieve any sort of layout here. I am just trying to understand these particular behaviours of the div element and other block elements.
EDIT:
OK. First of all thanks for the answers. The problem I had was based on the fact that I did set the width of the first and the second div to the same value, so that the content of the second could not float around the first one. To sum things up, I guess it is important to know that elements with the float property set are taken put of the page flow and dont take up any space. Secondly one should remember only the content can flow around, not the actual div.
A <div> is a block level element which is 100% wide and has a line break before & after when it's within the normal content flow.
Technically, when you float a <div>, you're taking the element out of the normal flow so it no longer has a line-break before & after and also the other page content flows around it.
So why does the second div only position next to the first one when
its width is set or its own float property is set to float left?
Floated <div>'s will always appear side-by-side only if there's enough room to contain them side-by-side. Otherwise, the next floated <div> will wrap to a new line. This is because floated <div>'s are outside the content flow and defined to behave this way in the spec.
However, you've made some incorrect assumptions in your question about what happens when you set the width of the second (non-floated) <div>.
The second <div>, itself, is always underneath (meaning behind) the floated <div>. Whereas, the "content" of the second <div> always flows around the floated <div>. (see three examples below)
So whether or not you set the width of the second div, its content will still flow around the left floated div as you can see illustrated here in three examples. (For illustration purposes, the first <div> is red with 50% opacity and the second is blue with a thick green border.)
Fiddle with second div wider than first
Fiddle with no set width (100%) on second div
Fiddle with second div narrower than first
As you can see from all three examples above, despite the existence of the floated first <div>...
the second <div> always starts on the left edge of the screen despite the width of the second <div>.
the second <div> always starts on the top edge of the screen because there's no other page flow content above the second <div>.
the actual content of the second <div> flows around (to the right of) the floated first <div> only where there is enough room inside its container to allow it to flow around the floated <div>. Otherwise, it appears as if it's starting a new line where really only its content is continuing to flow around the bottom of the floated <div>.
W3C Spec: 9 Visual formatting model, 9.5 Floats
A float is a box that is shifted to the left or right on the current
line. The most interesting characteristic of a float (or "floated" or
"floating" box) is that content may flow along its side (or be
prohibited from doing so by the 'clear' property). Content flows down
the right side of a left-floated box and down the left side of a
right-floated box. The following is an introduction to float
positioning and content flow; the exact rules governing float behavior
are given in the description of the 'float' property.
A floated box is shifted to the left or right until its outer edge
touches the containing block edge or the outer edge of another float.
If there is a line box, the outer top of the floated box is aligned
with the top of the current line box.
If there is not enough horizontal room for the float, it is shifted
downward until either it fits or there are no more floats present.
Since a float is not in the flow, non-positioned block boxes created
before and after the float box flow vertically as if the float did not
exist. However, the current and subsequent line boxes created next to
the float are shortened as necessary to make room for the margin box
of the float.
And here are a whole bunch of examples...
W3C Spec: 9 Visual formatting model, 9.8 Comparison of normal flow, floats, and absolute positioning
What makes you believe the div's are floated next to each other? In reality they are not. It's only that their content shows up next to each other but that's not because DIV #second is to the left of the floated DIV. It doesn't matter if you set the width or not.
What in fact is happening is that the floated DIV #first is floated to the left. Because it's floated, it's taken out of the normal flow. This means that DIV #second is actually on the same place as where DIV #first is appearing. The content of DIV #second though is inline content and inline content always flows around floated elements. Even floated elements that are outside of the container. So DIV #second is underneath DIV #first but the content of DIV #second is floating around DIV #first.
To illustrate that, I've create this CSS:
#first { float: left; background-color: rgba(255,0,0,0.3); }
#second { background-color: rgba(0,255,0,1); }
Play with the alpha value of the RGBA() value (i.e. the last parameter, it can range from 0 to 1) of the background-color of DIV #first and you will see that DIV #second is in fact below DIV #first all the time
Unless you clear your floats, the next block level element will float next to the last float by default.
I'm not sure what you're trying to achieve here, but if you want #first to float, and #second to NOT float, the rule you'd want to add to #first is : clear:both
But, that's pretty silly, you might as well just remove the float properties completely if you want to stack them.
Block elements take 100% of the width of their parent element, so even if your first div is floated, the second div will take the width of his parent, thus falling on a second line. This is why if you specify a smaller width, it stands next to the first floated div.
The reason why it also works if you float the two divs is that floated element behave a bit more like inline-block elements, wich means they will only take the space needed for the content inside of them.
Bottom line is, if you want these two divs to stand next to each other, you should probably just float the two of them.
How to do the following layout without using tables:
left element(100px)|right element (occupies what ever space is remaining, even when there is no content)
Thanks
Edit: link to code: http://pastebin.com/vU33jNxD
Float the left element and give the right element a left margin of 100px.
Remove the 100% width for the #right div. This will make it so there isn't an extra 100px to the right of the screen.
I have two divs, one above the other, i would like the bottom div to ignore the one above it. The bottom div has the top margin property. By ignore i mean i dont want the top div to be counted when it is using top margin (but rather to push against the wrapper which contains both divs.)
Just use absolute positioning for the top div.
If I understand correctly you could change the top div to position:absolute; which will take if out of the flow of the document.