CODEWITHSUNDEEP
css
webmasters
webmasters

Reputation: 5841

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

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!

Upvotes: 2

Views: 13186

Answers (4)

thirtydot
thirtydot

Reputation: 228192

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.

Upvotes: 4

kwelch
kwelch

Reputation: 2469

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;
}

Upvotes: 0

jumancy
jumancy

Reputation: 1340

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>

Upvotes: 2

AbstractChaos
AbstractChaos

Reputation: 4211

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

Upvotes: 0

Related Questions