Make a div display under another using CSS in a totally fluid layout

Question

I have updated my code and made a fiddle which explains what I am trying to do. I had a similar question before but it did not reflect the fluidity of the template.

I have a totally fluid layout and I need to make a div display under another.

I want to do it with CSS and I'd prefer not to use javascript or jquery.

Here is the fiddle: http://jsfiddle.net/sexywebteacher/7hCNC/20/

I was maybe unclear: I am talking about the section1 and section2 divs in the fiddle

Do you think this can be done?

Thank you!

Answer 1

If both the height of the image and the text are variable, it's not particularly easy with pure CSS.

The height being variable rules out anything based on position: absolute, as in the answers you received to your previous similar question.

One option is to use the technique shown here: http://tanalin.com/en/articles/css-block-order/

It is possible to change vertical order of blocks on HTML page using CSS table presentation using properties of display: table family. Regardles of block order in HTML code, header (table-header-group) of such table is displayed at the top of it, footer (display: table-footer-group)—at the bottom, and table body (table-row-group)—between header and footer.

This works in all modern browsers, and IE8 if you're careful. It does not work in IE6/7.

Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/35/

I have to admit that I've never used this technique on a production website, so please test thoroughly.

A different approach that will work in all browsers that support CSS3 2D transforms is to vertically flip the whole container, and then do the same to the "image" and the "text" elements. In browsers that do not support CSS3 transforms, everything will still work, but the "image" and "text" elements will be in their original order. In other words, it degrades nicely. It's probably possible to make this work in IE6-8 using filter, but that would make the text look horrible, so forget about it.

Here's your code using this technique: http://jsfiddle.net/thirtydot/7hCNC/36/

If none of these CSS methods are good enough, you'll have to use JavaScript.

However, I personally recommend that you just switch the order in the HTML. I doubt Google cares about it. In this case, I really doubt that bending over backwards to keep your HTML in the "optimum order" will have any meaningful SEO impact.

Answer 2

Add to floating div "clearfix" class where in CSS

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

For ex:

<div class="column clearfix">
...
</div>

Answer 3

You could either change the width to be exact width (or add it as min-width) and let them naturally fall under each other or simply clear which will force them under each other

eg

.clear {
  clear:both;
}

your jsfiddle

Answer 4

Here is another example of clear. I like to use this in cases where the element after the clear is not always consistent. It uses the psuedo elements to place a space with the clear attribute.

.clear:after{
content:"."; 
line-height:0; 
height:0; 
display:block; 
clear:both; 
visibility:hidden;
}