jasonc Posted July 26, 2010 Share Posted July 26, 2010 I wish to have a set of boxes that follow these rules a container that is 100% the toppane is 100% the bottompane is 100% the rightpane is shown 50% in the right side of container the leftpane is shown 50% in left side of container all pane's have a padding of 5px but for some reason the rightpane has a right margin ? <html> <head> <style><!-- #container { margin: 1em auto; background: #fff; } #toppane { float: left; width: 100%; background: #6F9; padding: 5px; } #rightpane { float: right; width: 325px; background: #9FC; padding: 5px; } #leftpane { float: left; width: 325px; background: #6F9; padding: 5px; } #bottompane { float: left; width: 100%; background: #6F9; padding: 5px; } #containerpane { width: 100%; background: #6F9; padding: 5px; } .clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; } --></style> </head> <body> <? // start of container ?> <div id="container"> <? // start of toppane ?> <div id="toppane">toppane</div> <? // end of toppane ?> <div class="clear"></div> <? // start of leftpane ?> <div id="leftpane">leftpane</div> <? // end of leftpane ?> <? // start of right ?> <div id="rightpane">rightpane</div> <? // end of rightpane ?> <div class="clear"></div> <? // start of bottom ?> <div id="bottompane">bottompane</div> <? // end of bottompane ?> </div> <? // end of container ?> </body> </html> Quote Link to comment Share on other sites More sharing options...
jasonc Posted July 26, 2010 Author Share Posted July 26, 2010 just altered the css code and now i only need to know how to remove the margin in the 'rightpane' any ideas? <style><!-- #container { padding: 1em auto; background: #fff; } #toppane { float: left; width: 100%; background: #6F9; padding: 1%; margin: 0 auto; } #rightpane { float: right; width: 48%; background: #9FC; padding: 1%; margin: 0 auto; } #leftpane { float: left; width: 48%; background: #6F9; padding: 1%; margin: 0 auto; } #bottompane { float: left; width: 100%; background: #6F9; padding: 1%; margin: 0 auto; } #containerpane { width: 100%; background: #6F9; padding: 1%; margin: 0 auto; } .clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; } --></style> Quote Link to comment Share on other sites More sharing options...
haku Posted July 26, 2010 Share Posted July 26, 2010 <div id="left"> <div class="content"> //content </div> </div> <div id="right"> <div class="content"> // content </div> </div> #left, #right { float:left; width:50%; } .content { margin:5px; } Quote Link to comment Share on other sites More sharing options...
jasonc Posted July 26, 2010 Author Share Posted July 26, 2010 what i am after is this but using css instead of tables. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body> <table width="100%" border="0" cellpadding="5"> <tr> <td colspan="2"> </td> </tr> <tr> <td width="50%">left pane 50% with 5px padding</td> <td width="50%">right pane 50% with 5px padding</td> </tr> <tr> <td colspan="2"> </td> </tr> </table> </body> </html> Quote Link to comment Share on other sites More sharing options...
jasonc Posted July 26, 2010 Author Share Posted July 26, 2010 i now have this but the page seems to be too big for the browser window, maybe only by 1px or something but it is not the same in IE and FireFox. FireFox shows it correctly but IE has something wrong and has a horizontal scroll bar. <html> <head> <style><!-- #toppane { width:100%; background: #9FC; } #leftpane { float:left; width:50%; background: #9FC; } #rightpane { float:left; width:50%; background: #6F9; } #bottompane { width:100%; background: #9FC; } .content { margin:5px; } --></style> </head> <body> <div id="toppane"> <div class="content"> //content </div> </div> <div id="leftpane"> <div class="content"> //content </div> </div> <div id="rightpane"> <div class="content"> // content </div> </div> <div id="bottompane"> <div class="content"> //content </div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
haku Posted July 26, 2010 Share Posted July 26, 2010 HTML rule 1: Always include a doctype. Quote Link to comment Share on other sites More sharing options...
jasonc Posted July 26, 2010 Author Share Posted July 26, 2010 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style><!-- #toppane { width:100%; background: #9FC; } #leftpane { float:left; width:50%; background: #9FC; } #rightpane { float:left; width:50%; background: #6F9; } #bottompane { width:100%; background: #9FC; } .content { margin:5px; } --></style> </head> <body> <div id="toppane"> <div class="content"> //content </div> </div> <br class="clear"> <div id="leftpane"> <div class="content"> //content </div> </div> <div id="rightpane"> <div class="content"> // content </div> </div> <div id="bottompane"> <div class="content"> //content </div> </div> </body> </html> :-) Quote Link to comment Share on other sites More sharing options...
haku Posted July 27, 2010 Share Posted July 27, 2010 Does that mean it fixed the problem? Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.