Flo Flo - 2 months ago 7
HTML Question

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> 
Comments