CODEWITHSUNDEEP
htmlcssformatting
Matthew Stopa
Matthew Stopa

Reputation: 3865

How do I make a floating div dynamically expand to take up maximum space?

I have 3 floated left objects, the one on the left will change in size all the time. The right on will always be fixed in size. The center one I want to fill up the space between the two outer divs. Right now that's not working though. If I set the width of the center div to 100% it gets way too big.

Not sure how this should be handled.

edit: code sample

<div style="width:1000px">
  <div style="float:left;">1</div>
  <div style="float:left;">Lots of text in here that can be any size....</div>
  <div style="float:left; width:100px;">Date/Time</div>
</div>

The first div is dynamic in size. If the number is 10 it's going to take up more space than the number 1. The second div will be dynamic as well, I want that to take up whatever space isn't take up by the first and third div.

Upvotes: 5

Views: 3168

Answers (3)

slushy
slushy

Reputation: 3357

You probably found this out long ago, but for the next guy, you can do this now with CSS3 flexbox. (W3c's newest specification, Mozilla documentation, css-tricks)

HTML

<div class="flex-container">
    <div>1</div>
    <div class="expandable">Lots of text in here</div>
    <div style="float:left; width:100px;">Date/Time</div>
</div>

CSS

.flex-container {
    display: flex;
    width: 1000px;
    border: 1px solid black;
}   
.expandable {
    flex: 100 100;
    text-align: center;
}

Here is the jsfiddle.

Upvotes: 0

Richard JP Le Guen
Richard JP Le Guen

Reputation: 28753

Try this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>How do I make a floating div dynamically expand to take up maximum space?</title>
    <style type="text/css">
    #left {
        float:left;
        border:1px solid red;
    }
    #right {
        float:right;
        border:1px solid green;
        width:100px;
    }
    #center {
        overflow-x:hidden;
        border:1px solid blue;
    }
    </style>
</head>
<body>

<h1>How do I make a floating div dynamically expand to take up maximum space?</h1>

    <div id="left">
    Un-fixed width left, whose content may change.
    </div>
    <div id="right">
    Fixed WIdth Right column which shouldn't expand.
    </div>
    <div id="center">
    The center content<br />Which should expand as necessary
    </div>

</body>
</html>

Upvotes: 1

melhosseiny
melhosseiny

Reputation: 10144

HTML

<div style="width:1000px">
  <div id="left">1</div>
  <div id="right">Date/Time</div>
  <div id="center">Lots of text in here that can be any size....</div>
</div>

CSS

#left {
    float: left;   
    width: 20%;
}

#center {
    margin-left: 20%;
    margin-right: 100px;
}

#right {
    float: right;
    width: 100px;   
}

See fiddle.

Upvotes: 2

Related Questions