jasonc Posted March 20, 2010 Share Posted March 20, 2010 I have two divs (main_left/main_right) which at the moment i am having to set as both 260px in width but wish to have these divs of equal widths (50% each) when i remove the login box which is to the left of these divs the divs stay the same size of course but wish for them to be bigger and fill the rest of the pages width, so both are 50% each currently i have this.. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> #mainhomepage-container { padding: 0; margin: 0; width: 700px; } #left { float: left; } #right { float: right; } left { text-align: left; } .clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; } #main_left { float: left; margin: 10px; width: 260px; border: 1px solid #555555; } #main_right { float: right; margin: 10px; width: 260px; border: 1px solid #555555; } </style> </head> <body> <div id="mainhomepage-container"> <div id="loginbox"> <form name="loginbox" method="post" action="auth.php"><div class="center">Username<br><input size="20" type="text" name="name"></div> <div class="center">Password<br><input name="password" type="password" size="20"></div> <div class="center"><input type="submit" value="Log In" name="login"><input type="reset" value="Reset" name="reset"></div> <div class="center"><a href="?">forgot password</a></div> </form> </div> <div> <div id="left"> <div id="main_left">left main content left main content left main content left main content left main content</div> <div id="main_right">right main content right main content right main content right main content right main content</div> </div> </div> <div class="clear"></div> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
ober Posted March 20, 2010 Share Posted March 20, 2010 You need to float both left. And put your clearing div after the login box. I'm about 90% sure that will work. The only thing I'm not sure is how to get the widths right. Quote Link to comment Share on other sites More sharing options...
jasonc Posted March 21, 2010 Author Share Posted March 21, 2010 just to show exactly what i have been trying to do i have just created this using 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="1"> <tr> <? $logged_in = "yes"; if($logged_in != "yes") { ?> <td width="150"> <!-- the login box --> login box </td> <? } ?> <td> <table width="100%" border="1"> <tr> <td width="50%">left main box - left main box - left main box - left main box - left main box - left main box - left main box - left main box - left main box - left main box - left main box - left main box</td> <td width="50%">right main box - right main box - right main box - right main box - right main box - right main box - right main box - right main box - right main box - right main box - right main box</td> </tr> </table> </td> </tr> </table> </body> </html> but wish to have this using CSS instead. Quote Link to comment Share on other sites More sharing options...
JustLikeIcarus Posted March 25, 2010 Share Posted March 25, 2010 This will float the boxes stretched the way you want. However you cant just say 50% for width because the boxes have a border of 1px defined so they wont fit. so you need half the width of the containing div minus the left/right border width. I hope I am making sense.... you also should float both div's to the left not one left and one right. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style> #mainhomepage-container { padding: 0; margin: auto; width: 700px; border: 1px solid #555555;} .clear { height: 0; font-size: 1px; margin: 0; padding: 0; line-height: 0; clear: both; } .float { float: left; margin: 0px; padding:0px; border: 1px solid #555555; width:348px; } </style> </head> <body> <div id="mainhomepage-container"> <div> <div id="left"> <div id="main_left" class="float">left main content left main content left main content left main content left main content</div> <div id="main_right" class="float">right main content right main content right main content right main content right main content</div> </div> </div> <div class="clear"></div> </div> </body> </html> 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.