hoponhiggo Posted July 26, 2011 Share Posted July 26, 2011 Hi I have coded my page so it has a header, and then two 'container' divs side by side. This works fine on a larger screen res, but as soon as the res is lowered, the right div moves underneath the left div. What am i doin wrong Code below body { font-family:Arial, Helvetica, sans-serif; font-size:12px; background-color:#333; } #container { width:350px; float:left; } #tabbox { height:40px } #panel { background-color:#FFF; height:300px; } .tab { background: #dedede; display: block; height: 40px; line-height: 40px; text-align: center; width: 80px; float: right; font-weight: bold; -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 4px; -moz-border-radius: 4px 4px 0px 0px; } a { color: #000; margin: 0; padding: 0; text-decoration: none; } .signup { margin-left:8px; } .select { background-color:#FFF; } #loginbox { height:300px; padding:10px; } #signupbox { height:300px; padding:10px; display:none; } #textcontainer { float:right; width:500px; color:white; margin-left:50px; margin-right:50px; } .h1 { font-size:16px; text-align:center; padding:10px; } .h2 { font-size:12px; text-align:center; padding:10px; } <body> <div id="header"> <div align="center"><img src="Images/Banner1.gif" width="252" height="140" alt="pwnedbokv4!" /> </div> </div> <div style="margin:40px"> <div id="container"> <div id="tabbox"> <a href="#" id="signup" class="tab signup">Signup</a> <a href="#" id="login" class="tab select">Login</a> </div> <div id="panel"> <div id="loginbox"><h1>Login</h1> <form> </form> </div> <div id="signupbox"><h1>Signup</h1> <form> </form> </div> </div> </div> <div id="textcontainer"> <div class="h1"></div> <div class="h2"></div> </div> </div> </body> #container and #textcontainer are the two divs in question Link to comment https://forums.phpfreaks.com/topic/242820-how-can-i-style-this-so-the-div-doesnt-move/ Share on other sites More sharing options...
ZulfadlyAshBurn Posted July 26, 2011 Share Posted July 26, 2011 use percentage instead of pixels. that way it will automatically resize to browser res. Link to comment https://forums.phpfreaks.com/topic/242820-how-can-i-style-this-so-the-div-doesnt-move/#findComment-1247160 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.