CODEWITHSUNDEEP
htmlcss
Jay Jay Jay
Jay Jay Jay

Reputation: 2000

How to get second floated div to occupy all remaining width

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div style="float:left;border:5px solid red">
aadsas
</div>
<div style="float:left;border:5px solid green">
zzzzzzzzzzzz<br/>
asdasdasdas
</div>
<div style="clear:both;border:5px solid blue">asasdasdas</div>
  </body>

</html>

I am trying to get the second div(zzzzzzzzzzzz) that is floated left to occupy all the remaining width after the first left floated div. And achieve this without specifying a pixel width for the second or first div

http://plnkr.co/edit/McbnZTPDaTEmcPM4bEsJ?p=preview

Upvotes: 1

Views: 80

Answers (4)

tao
tao

Reputation: 90287

You have multiple options. In the solutions below I will not account for the border width, I'm assuming it's there just to mark the divs.

  1. Remove float from green, insert red in green, and give it padding-bottom and margin-bottom of 100%, respectively -100% while you hide the excess (overflow: hidden on green). Please note that, even though green has oveflow:hidden, it will actually grow to show red in full height, because red is floating.

<div style="border:5px solid green; position: relative; overflow: hidden;">
  <div style="float:left;border:5px solid red;padding-bottom: 100%; margin-bottom:-100%;">
    aadsas
  </div>
  zzzzzzzzzzzz
  <br/>asdasdasdas
</div>
<div style="clear:both;border:5px solid blue">asasdasdas</div>

  1. If red has a fixed with, remove float from green, and give it margin-left equal to red's width. Problem solved. Don't forget to remove float from green.

<div style="float:left;border:5px solid red;width: 100px;">
  aadsas
</div>
<div style="margin-left: 105px; border:5px solid green;">
  zzzzzzzzzzzz
  <br/>asdasdasdas
</div>
<div style="clear:both;border:5px solid blue">asasdasdas</div>

  1. This is actually "correct" and is the future of layouting. Unfortunatelly, as of now it doesn't have 100% browser support. But it's already very close. I say use it. And it's here to stay. It's "the flexbox model": Remove float from both, wrap them in a display: flex; flex-wrap: wrap; and give them flex-grow of 0 to red and 1 to green. (don't grow and grow).

<div style="display: flex; flex-wrap: wrap;">
  <div style="border:5px solid red;flex-grow: 0;">
    aadsas
  </div>
  <div style="border:5px solid green; flex-grow: 1;">
    zzzzzzzzzzzz
    <br/>asdasdasdas
  </div>
</div>

<div style="clear:both;border:5px solid blue">asasdasdas</div>

There is a fourth method, using display: table and display: table-cell; It's called the CSS table layout method and is also known as the anti-hero of layouting.

You're basically building an old time table from divs with the freedom to display them as stacks on certain narrow layouts, where the old-time-table had responsiveness shortcomings. The CSS table still does the job and is still widely supported for layouting, though some versions of Chrome have been reported not to autmagically make all cells same height. The only problem with the CSS table is that it's semantically wrong when used for layouting.

Word is out that Google are heading towards a distant future where code shall be meaningful. What does that mean? Well, for example, it could mean that browsers might get to a point where, if you tell them "this is a table" (which is what you do when you declare display: table), they will automatically give you pagination options, sorting by columns, display totals, maybe convert curencies and other crazy things you might want to do with real data in a real table. So you, as a coder, might be tempted to use layout elements for layout and table elements for... well, tabular data, right?

Upvotes: 1

Williams Abiola
Williams Abiola

Reputation: 1

<!DOCTYPE html>
<html>

  <head>

    <style type="text/css">
       div.box {
         position:relative;
         float:left;
         height:100px;
       }
       #boxOne {
         border:5px solid red;
         width:29.5%;
       }
       #boxTwo {
         border:5px solid green;
         width:69%;
       }
       #boxThree {
         border:5px solid blue;
         width:99.5%;
       }
    </style>
  </head>

  <body>
    <div class="box" id="boxOne">
      aadsas
    </div>
    <div class="box" id="boxTwo">
      zzzzzzzzzzzz <br />
      asdasdasdas
    </div>
    <div class="box" id="boxThree">
      asasdasdas
    </div>
  </body>

</html>

Upvotes: 0

Akxe
Akxe

Reputation: 11595

This solution use flex. It will make all divs inside same height and distibute width as needed.

body{
  margin:0;
  padding: 0;
}

.flex.parent{
  display: flex;
  flex-wrap: wrap;
}

div{
  min-height: 30px;
  flex: 0 1 auto;
  margin: .5em;
}

.flex.parent>.fill{
  flex: 1 1 auto;
}

.flex.parent>.full{
  width: 100%;
  flex: 1 0 auto;
}
<div class="flex parent">
  <div style="background:red">zzzz</div>
  <div style="background:blue" class="fill">aa</div>
  <div style="background:green" class="full"></div>
</div>

Upvotes: 2

Gilberto S&#225;nchez
Gilberto S&#225;nchez

Reputation: 627

You can display it in a table:

<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="script.js"></script>
    </head>

    <body>
        <div style="display:table; width:100%;">
            <div style="display: table-cell; float: left; border:5px solid red">
                aadsas
            </div>

            <div style="display: table-cell; width: 100%; border:5px solid green">
                zzzzzzzzzzzz<br/>
                asdasdasdas
            </div>
        </div>
        <div style="clear:both;border:5px solid blue">asasdasdas</div>
    </body>
</html>

If you remove your "float: left", you will get a better result.

Upvotes: 0

Related Questions