CODEWITHSUNDEEP
htmlcsscss-floatfloating
ErraticFox
ErraticFox

Reputation: 1543

Floating divs inline with 100%

Is it possible to make to divs float left with the second one having 100% width without getting pushed down? For an example: http://jsfiddle.net/ErraticFox/p73xa9qm/

As you see, since div two is %100, it gets pushed down below div one so it can take 100% of the screen. But is there a way to make div two not get pushed down and take only 100% that it has on the right side of div one? If so, how?

Here's my code:

HTML

<div class="one">
   <div>About Us</div>
   <div>Contact Us</div>
   <div>Advertiser Index</div>
   <div>Articles</div>
</div>
<div class="two">
   This is a test This is a test This is a test
</div>

CSS

.one {
    float: left;
    border-style:solid;
    border-color:red;
}
.two {
    float: left;
    border-style:solid;
    border-color:red;
    width: 100%;
}

Upvotes: 1

Views: 66

Answers (2)

Anindya Basu
Anindya Basu

Reputation: 659

You shouldn't be floating your divs, floating them overrides their ability to automatically fill any remaining space left.

Adding overflow: auto will make sure .two doesnt spill into .one

.one {
    float: left;
    border: 2px solid blue;
}
.two {
    overflow: auto;
    border: 2px solid red;
}

Upvotes: 1

LcSalazar
LcSalazar

Reputation: 16841

The problem is that you are floating both divs. A float removes the element from the normal flow of the page. So removing the float from the second div would solve the inline problem:

.one {
  float: left;
  border-style:solid;
  border-color:red;
}
.two {
  border-style:solid;
  border-color:red;
  width: 100%;
}
<div class="one">
    <div>About Us</div>
    <div>Contact Us</div>
    <div>Advertiser Index</div>
    <div>Articles</div>
</div>
<div class="two">This is a test This is a test This is a test</div>

But, for a better (and easier) horizontal filling, you'd better use some table or flex techniques. Here's an example of the table-cell value for the display property, that makes the divs act like table cells, auto filling the remaining space, but keeping inline:

.one {
    display: table-cell;
    white-space: nowrap;
    border-style:solid;
    border-color:red;
}
.two {
    display: table-cell;
    border-style:solid;
    border-color:red;
    width: 100%;
}
<div class="one">
    <div>About Us</div>
    <div>Contact Us</div>
    <div>Advertiser Index</div>
    <div>Articles</div>
</div>
<div class="two">This is a test This is a test This is a test</div>

Upvotes: 3

Related Questions