CODEWITHSUNDEEP
htmlwidth
Flo
Flo

Reputation: 1445

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.

Upvotes: 118

Views: 180555

Answers (10)

suathd
suathd

Reputation: 51

this usage may solve your problem.

width: calc(100% - 100px);


<!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 {
      float: left;
      width: calc(100% - 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>

Upvotes: 5

merkuro
merkuro

Reputation: 6177

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>

Upvotes: 143

alanaktion
alanaktion

Reputation: 1326

The most cross-compatible way I've found of doing this is not very obvious. You need to remove the float from the second column, and apply overflow:hidden to it. Although this would seem to be hiding any content that goes outside of the div, it actually forces the div to stay within its parent.

Using your code, this is an example of how it could be done:

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

Hope this is useful to anyone having this issue, it's what I found works the best for the site I was building, after trying to get it to adjust to other resolutions. Unfortunately, this doesn't to work if you include a right-floated div after the content as well, if anyone knows a good way to get that to work, with good IE compatibility, I'd be very happy to hear it.

New, better option using display: flex;

Now that the Flexbox model is fairly widely implemented, I'd actually recommend using it instead, since it allows much more flexibility with the layout. Here's a simple two-column like the original:

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

And here's a three-column with a flexible-width center column!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>

Upvotes: 103

Sanjib Debnath
Sanjib Debnath

Reputation: 3795

Hi there is an easy way with overflow hidden method on right element.

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }
<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>

Upvotes: 0

Wilt
Wilt

Reputation: 44422

Solution without fixing size on your margin

.content .right{
    overflow: auto; 
    background-color: red;
}

+1 for Merkuro, but if the size of the float changes your fixed margin will fail. If u use above CSS on the right div it will nicely change size with changing size on the left float. It is a bit more flexible like that. Check the fiddle here: http://jsfiddle.net/9ZHBK/144/

Upvotes: 31

Christoph B&#252;hler
Christoph B&#252;hler

Reputation: 2923

The accepted answer might work, but I don't like the idea of overlapping margins. In HTML5, you would do this with display: flex;. It's a clean solution. Just set the width for one element and flex-grow: 1; for the dynamic element. An edited version of merkuros fiddle: https://jsfiddle.net/EAEKc/1499/

Upvotes: 1

kirtan-shah
kirtan-shah

Reputation: 473

This might work: 

    div{
    display:inline-block;
    width:100%;
    float:left;
    }

Upvotes: 0

Snowie
Snowie

Reputation: 41

This is an updated solution for HTML 5 if anyone is interested & not fond of "floating".

Table works great in this case as you can set the fixed width to the table & table-cell. 

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ original source code from @merkuro

Upvotes: 4

kubilayeksioglu
kubilayeksioglu

Reputation: 498

And based on merkuro's solution, if you would like maximize the one on the left, you should use:

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

Has not been tested on IE, so it may look broken on IE.

Upvotes: 3

Sean Aitken
Sean Aitken

Reputation: 1207

Elements that are floated are taken out of the normal flow layout, and block elements, such as DIV's, no longer span the width of their parent. The rules change in this situation. Instead of reinventing the wheel, check out this site for some possible solutions to create the two column layout you are after: http://www.maxdesign.com.au/presentation/page_layouts/

Specifically, the "Liquid Two-Column layout".

Cheers!

Upvotes: 6

Related Questions