WestX64 Posted February 13, 2015 Share Posted February 13, 2015 Hello everyone! I'm sure this probably seems like a simple issue to the more experienced HTML / CSS coders out there, but please bear with me as I'm just a beginner. Also, I have performed several Google searches on the issues and found a few people with similar questions but the solutions don't seem to work for me for whatever reason. So I have setup a simple bare bones example of what I'm trying to do and I will post the code below. The HTML code: <!doctype html><html> <head> <Title>Div Alignment Test</title> <link rel="stylesheet" type="text/css" href="main2.css"> </head> <body> <div id="wrapper"> <div id="top"> <h1>Header</h1> </div> <div id="left"> <p>Left div set to 20 percent</p> </div> <div id="right"> <p>Right div set to 100 percent</p> </div> </div> </body></html> The CSS code: #wrapper{ max-width: 800px; min-width: 400px; margin-left: auto; margin-right: auto;}#top{ width:100%; height: 100px; background-color: green; line-height: 100px; text-align: center;}#left{ width: 20%; float: left; background-color: red; height: 800px;}#right{ width: 80%; float: left; background-color: blue; height: 800px;} So what I am trying to do is have the #left div have a set width of 150px (for example) and the #right dive take up the rest of the space inside the #wrapper div so that the page will adjust when you make the browser window smaller. The way I have it right now works, but the #left div re-sizes too since its width is defined as a percentage. If I put a set width of say 200px, the #right div will drop down below the #left div. If I set the #left div to a smaller number like 100px, then the #right div sits next to it until you re-size the browser window to a certain point and then it drops below the #left div still... I have tried playing with the float values and also the width values. I also noticed that if I have any kind of border or padding values specified, it will cause the #left div to drop below the #right div. I just cannot figure out how to make the #left dive maintain a set width while the #right div takes up the rest of the space inside of the #wrapper div. Any help would be much appreciated. I have attached an image that shows what this code renders like so far. Link to comment Share on other sites More sharing options...
Ingolme Posted February 13, 2015 Share Posted February 13, 2015 Set the width of the left column to the value you want. Float it left. Set the left margin of the right column to the same value that the width of the left column has, but adding the padding and margins of the left column to that value. Don't specify a width for the right column. Link to comment Share on other sites More sharing options...
tejasamrute Posted February 13, 2015 Share Posted February 13, 2015 #left { background-color: red; height: 800px; width: 20%; max-width: 200px; min-width: 100px; float: left; } #right { background-color: blue; height: 800px; overflow:auto; } Try this... Link to comment Share on other sites More sharing options...
dzhax Posted February 16, 2015 Share Posted February 16, 2015 #wrapper{ position:relative; max-width: 800px; min-width: 400px; margin-left: auto; margin-right: auto;} #top{ positon:absolute; top:0px; left:0px; right:0px; height:100px; background-color: green; line-height: 100px; text-align: center;} #left{ position:absolute; top:100px; left:0px; width: 150px; background-color: red; height: 800px;} #right{ position:absolute; top:100px; left:150px; right:0px; background-color: blue; height: 800px;} This works for me. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 16, 2015 Share Posted February 16, 2015 NEVER EVER USE POSITION ABSOLUTE! A BIGGGGGGG NO NO. You would only use position: absolute; for overlapping, or when you can't achieve the same result when using float, margins, padding, display: inline-block, which would be extremely rare. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now