CODEWITHSUNDEEP
css
lolalola
lolalola

Reputation: 3823

one div with 100% width and two fixed divs in one line

I need three divs in one line.

One is size 200px, second 300px and last div should be what's left.

Why is my last div in a new row?

<div style="float: left; width: 200px; background: #223355">a</div>
<div style="float: left; width: 300px; background: #223344">b</div>
<div style="float: left; width: 100%; background: #334455">c</div>

Upvotes: 6

Views: 4207

Answers (4)

Donut
Donut

Reputation: 112825

Because by specifying width: 100%, you've told the third div to fill the entire width of the page, not just what's left over. By adding a couple of wrapper divs, you can get something like this:

<div style="float: left; width: 100%">
   <div style="margin-left: 500px; background: #334455">c</div>
</div>

<div style="float: left; width: 500px; margin-left: -100%">
   <div style="width: 300px; float: left; background: #223355">a</div>
   <div style="width: 200px; float: right; background: #223344">b</div>
</div>

Which should render the way you want it to.

Upvotes: 1

Andre Backlund
Andre Backlund

Reputation: 6943

Shouldn't you just have to remove the float:left; on the last div for it to work?

Upvotes: 1

clairesuzy
clairesuzy

Reputation: 27634

AS others have said 100% is 100% of page width.. but I disagree with user who says it can't be done with 'plain' CSS

<div style="float: left; width: 200px; background: #223355">a</div>
<div style="float: left; width: 300px; background: #223344">b</div>
<div style="overflow: hidden; background: #334455">c</div>

Upvotes: 3

Marc B
Marc B

Reputation: 360732

Because you've set it to 100% width. A relative width, such as your percentage, applies to the width of the PARENT element. So if your container for those 3 divs was 600px, then you'd end up with your third div taking 100% of 600px, not the "leftover" space that the other two elements have used up.

What you want cannot be accomplished with plain CSS. You'd need to calculate the remaining space via Javascript and set the third div's width that way, or make it fixed-width as well.

Upvotes: 0

Related Questions