kurt.santo Posted November 6, 2007 Share Posted November 6, 2007 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 Link to comment Share on other sites More sharing options...
Reg Edit Posted November 6, 2007 Share Posted November 6, 2007 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?KurtI 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 More sharing options...
jlhaslip Posted November 6, 2007 Share Posted November 6, 2007 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 More sharing options...
kurt.santo Posted November 8, 2007 Author Share Posted November 8, 2007 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.