Expand div to max width when float:left is set
I have something like that:
<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>
both floats are neccesary. I want the content div to fill the whole screen minus those 100px for the menu. If i dont use float the div expands exactly as it should. But how do i set this when float is set? If i use sth like
style=width:100%
then the content div gets the size of the parent, which is either the body or another div which i also tried, and so of course it does not fit right of the menu and is then shown below.
Answer
Hope I've understood you correctly, take a look at this: http://jsfiddle.net/EAEKc/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Content with Menu</title>
<style>
.content .left {
float: left;
width: 100px;
background-color: green;
}
.content .right {
margin-left: 100px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="left">
<p>Hi, Flo!</p>
</div>
<div class="right">
<p>is</p>
<p>this</p>
<p>what</p>
<p>you are looking for?</p>
</div>
</div>
</body>
</html>