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 Quote 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. Quote 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
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.