Log in

View Full Version : 4 Column Float Issue



jason3w
04-25-2009, 04:33 AM
Hey,
My Situation:
4 divs. Widths=Fixed. Heights=Not specified. Float=All left

My Problem:
If div 3's height is greater than div 2's, and div 4 is pushed to a new line it will sit with a gap below div 2. (see image for the 1000 words)

http://www.threeworlds.com.au/images/divissue.png

FAQ is div 4. Ideally would nest up under div one.
Anyone Solutions??
Thanks in advance.

X96 Web Design
04-25-2009, 11:22 PM
Make sure that in your code, there's no clear:left tags or anything...

Try setting flash objects to float as well, it may be clearing the fourth sidebar from floating.

Hope that helps..

//X96 WD\\

amutha
04-27-2009, 06:04 AM
i think! you will adjust the size of div 3.

SGBotsford
04-27-2009, 02:04 PM
This seems to me to be what the usual behaviour is: Doesn't an item pushed to the next line usually line up only to the bottom of the lowest edge in the line above?

Would you not be better to structure this page as


<div id=column1>
<div>
Top left box
</div>
<div>
FAQ
</div>
</div>

<div id=column2>
<div>
Specs
</dvi>
<div>
Flash box
</div>
</div>

This way even if the box heights vary from item to item, the boxes occur at predictable places on the page.

This also allows you to use a liquid layout, styling both columns with a percentage. If you style image widths with a percent to, your layout should work on low and high resolution screens.

jason3w
04-28-2009, 01:39 AM
Hey Guys!
Thanks for the tips.
I think it is the default behaviour, as i have seen it before.
The only styling i have is the float:left and the width:XXpx and the margins.

The reason for the order of divs is that is full width they are in the right order. But when on smaller screens i would like them to nest nicely together.

Looks like it might be stiff luck...

Or can i make div 2 the same height as div 3 some how, so that they are in row. Without setting a fixed height? So the maximum height div will set the rest??

jason3w
04-28-2009, 01:41 AM
See site at
http://www.threeworlds.com.au/store/products/Spark-Fire-Staff.html

jason3w
04-28-2009, 01:41 AM
ANy other ideal for the layout are most welcomed too!!
Thanks again
Jason