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> Link to comment https://forums.phpfreaks.com/topic/208913-css-boxes-has-extra-margin-which-needs-removing/ 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> Link to comment https://forums.phpfreaks.com/topic/208913-css-boxes-has-extra-margin-which-needs-removing/#findComment-1091239 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; } Link to comment https://forums.phpfreaks.com/topic/208913-css-boxes-has-extra-margin-which-needs-removing/#findComment-1091243 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> Link to comment https://forums.phpfreaks.com/topic/208913-css-boxes-has-extra-margin-which-needs-removing/#findComment-1091258 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> Link to comment https://forums.phpfreaks.com/topic/208913-css-boxes-has-extra-margin-which-needs-removing/#findComment-1091277 Share on other sites More sharing options...
haku Posted July 26, 2010 Share Posted July 26, 2010 HTML rule 1: Always include a doctype. Link to comment https://forums.phpfreaks.com/topic/208913-css-boxes-has-extra-margin-which-needs-removing/#findComment-1091327 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> :-) Link to comment https://forums.phpfreaks.com/topic/208913-css-boxes-has-extra-margin-which-needs-removing/#findComment-1091336 Share on other sites More sharing options...
haku Posted July 27, 2010 Share Posted July 27, 2010 Does that mean it fixed the problem? Link to comment https://forums.phpfreaks.com/topic/208913-css-boxes-has-extra-margin-which-needs-removing/#findComment-1091508 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.