Jump to content

Liquid three column layout


kurt.santo

Recommended Posts

How do I get all three columns level? I tested a new layout under http://www.jalp.co.uk/testing/layout/test.htm and as you can see the green box is not inside the yellow "parent" box. The two other boxes line nicely to top. How would I achieve same for third box?Kurt
I have not used CSS as much as some here, but I think if you have a mix of float:left and float:right stacked up like that, once you float an element right, you have to keep floating the others right. Someone may correct that, but I found that if you change the middle one to float:right, and use right-margin instead, it works:
#subNav{width:20%; background-color:#0033FF; float:left}#heading{width:10%; background-color:#FF6666; float:right; margin-right:40%}#content{width:10%; background-color:#00FF66; float:right}

but with the float:right, it seems to start counting from the right, so you seem to have to reverse the order of the divs! Like this:

<div id="main"><div id="subNav">1</div><div id="content">3</div><div id="heading">2</div></div>

otherwise they are rendered in reverse order! Not the full story perhaps, but may provide a workaround, and someone else may shed more light.

Link to comment
Share on other sites

reposition the right floated div to follow the left floated div in your source code and it should be fine.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>layout test</title><style type="text/css">#main{padding:0;margin:0; background-color:#FFFF00; width:100%; height:30px;}#subNav{width:20%; background-color:#0033FF; float:left;}#heading{width:10%; background-color:#FF6666; margin-left:25%}#content{width:10%; background-color:#00FF66; margin-left:40%; float:right;}</style></head><body><div id="main"><div id="subNav">jlaskdjf</div><div id="content">hasdf</div><div id="heading">ajkdlfja</div></div></body></html>

The middle should then 'fill-in' the centre space.

Link to comment
Share on other sites

reposition the right floated div to follow the left floated div in your source code and it should be fine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>layout test</title><style type="text/css">#main{padding:0;margin:0; background-color:#FFFF00; width:100%; height:30px;}#subNav{width:20%; background-color:#0033FF; float:left;}#heading{width:10%; background-color:#FF6666; margin-left:25%}#content{width:10%; background-color:#00FF66; margin-left:40%; float:right;}</style></head><body><div id="main"><div id="subNav">jlaskdjf</div><div id="content">hasdf</div><div id="heading">ajkdlfja</div></div></body></html>

The middle should then 'fill-in' the centre space.

Thanks, both of you. Tested both and working fine... I am just surprised that a change of the HTML as such can make it work???Kurt
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...