Fixed width div side by side with maximum width div in CSS
Question
I'm trying to have one div that will be a menu bar of fixed size on the left. Then another div with the rest of the space on the right.
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title></title>
<style>
#header{
height:50px;
background-color:red;
border-radius:10px;
}
.left{
width:100px;
height:500px;
background-color:green;
border-radius:10px;
float:left;
}
.right{
background-color:lightskyblue;
border-radius:10px;
height:500px;
margin-left:100px;
}
#footer {
height:50px;
background-color:violet;
border-radius:10px;
clear:both;
}
</style>
</head>
<body>
<div id="header"></div>
<div class="left"></div>
<div class="right">
<h3>Andrew: The Resumé</h3>
<p>Languages I know:</p>
<ul>
<li>Arabic</li>
<li>Java</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
<div id="footer"></div>
</body>
</html>
This is the closest I could get it, but the boxes are not even. Probably because I used float with one div but not the other. If I use float:left with both the width of the right div doesn't fill the rest of the screen. Help!
2 answers
solution1
1 2013-10-21 00:55:49
You can try using a wrapper element around the elements that you want to be side by side, set to display: table; , and then set those child elements to be display: table-cell;
This way you can get rid of the float and margin-left on those elements, and they will sit neatly beside each other. This also has the benefit of making sure both elements have the same height, so even if you took the height properties off, they would remain constant (in relation to each other)
Check out this demo:
solution2
0 2013-10-21 01:02:49
Try wrapping your left and right div in a container.
<div id="container">
<div class="left"></div>
<div class="right">
<h3>Andrew: The Resumé</h3>
<p>Languages I know:</p>
<ul>
<li>Arabic</li>
<li>Java</li>
<li>HTML</li>
<li>CSS</li>
</ul>
</div>
</div>
and in your css you would use float left and right. The container is used to contain its children from busting out all over the place. You can apply a clearfix on it and/or margin:0 auto depending on your situation. Apply to your now child divs:
.left{
float:left;
}
.right{
float:right;
}
I hope this helps. I tend to have the left and right container both float left for responsive purposes and use dynamic widths (aka percentages) Hope this gets you unstuck!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.