CODEWITHSUNDEEP
css
Em Sta
Em Sta

Reputation: 1696

Display 3 div next to each other

I have three divs with an complete length of 150% but i dont get them to float in one line: Here is my html:

<div class="clearfix">
<div class="left" id="w1">TEST</div>
<div class="left" id="w2">TEST</div>
<div class="left" id="w3">TEST</div>
</div>

And my css:

html,body { height:100%;width:auto;}

.left {
float: left;

}
  #w1 {width:20%;
 background-color:#009;
  }
#w2{width:100%;
  background-color:#9F3;
 }
#w3{ width:30%;
background-color:#30C;}

Here is the full code on fiddle: http://jsfiddle.net/sZwXN/1/ Besides his it would be nice if each panel has an height o 100%!

Upvotes: 1

Views: 11930

Answers (8)

Ankit Jain
Ankit Jain

Reputation: 1286

If you want 3 div in a row then you will use float:left with all div, but you can not take 150% width in a total of div width. You can take 100% maximum. So, Adjust your width of all div and take total 100%.

Upvotes: 1

Levans
Levans

Reputation: 14992

You can replace float: left by display: table-cell, and putting the three divs into an other one with display: table and width: 150%, rather than trying to trick with float.

Thus, by updating your code like this, you get what you are looking for : 

<div class="wrapper">
  <div class="left" id="w1">TEST</div>
  <div class="left" id="w2">TEST</div>
  <div class="left" id="w3">TEST</div>
</div>

And the CSS : 

.wrapper
{
  display: table;
  width: 150%;
}

.left {
  display: table-cell;
}

And changing your #iw width to respectively 14%, 66%and 20% to keep the ratio you are looking for.

Have a look : http://jsfiddle.net/sZwXN/7/

Upvotes: 3

Andrea Ligios
Andrea Ligios

Reputation: 50193

The problem is in the semantic, not in the code.

Percentage values always refer to the outer, "father" element with an width defined, or to the viewport, or to the HTML.

If you say a div has width: 100%; , it means it would be as large as the containing element.

It doesn't matter if you say the html/body are 10000px, or 200% wide: the div will have the same width, because, guess what... it is 100% wide.

The question is really mis-asked ... Try reformulating by specifying what you are really trying to achieve.

Otherwise, you would need Chuck Norris. He counted to infinity. Twice. I guess he can count to 150%.

Upvotes: 0

zkwentz
zkwentz

Reputation: 1105

The 3 divs are greater than the width of their parent. You need to adjust them so their widths total is less than or equal to 100%.

Upvotes: 1

Brij
Brij

Reputation: 6122

total width should not exceed 100%. in your case 150% so make ratio same with 100%. like 20% of 150% = 12% approx and so on...

html,body { height:100%;width:auto;}

.left {
float: left;

}
#w1 {width:12%;
background-color:#009;
}
#w2{width:70%;
background-color:#9F3;
}
#w3{ width:18%;
background-color:#30C;}

http://jsfiddle.net/sZwXN/4/

Upvotes: 1

Marcelo Waisman
Marcelo Waisman

Reputation: 596

floated elements break lines when there's no space for them in the width since your second div is 100%, there will never be space for him with other elements that have width in the same horizontal

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32162

Try to this css and html

HTML

<div class="left" id="w1">TEST</div>

<div class="right" id="w3">TEST</div>

<div id="w2">TEST</div>

Css

html,body { height:100%;width:auto;}

    .left {
    float: left;

    }
    .right{float:right;}
    #w1 {width:20%;
    background-color:#009;
    }
    #w2{
    background-color:#9F3;
    }
    #w3{ width:30%;
    background-color:#30C;}

Demo

Upvotes: 0

Sheetal
Sheetal

Reputation: 1366

To have in one line reduce the width of w2

#w2{width:50%;
  background-color:#9F3;
 }

Upvotes: 0

Related Questions