WestX64
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by WestX64
-
-
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.
Vertical Align
in CSS
Posted
Foxy Mod is correct, you would need to set the line-height to the same value as the height. Here is an example using your code:
#B1 { width: 50px; height: 50px; top: 50px; position: absolute; left: 0px; vertical-align: middle; line-height: 50px;}#B2 { top: 150px; position: absolute; width: 50px; height: 50px; vertical-align: middle; line-height: 50px;}