CODEWITHSUNDEEP
csstwitter-bootstrap
soundswaste
soundswaste

Reputation: 3074

How does fluid width work?

I notice in the twitter-bootstrap.css the following : 

.row-fluid .span4 {
  width: 31.914893617021278%;
  *width: 31.861702127659576%;
}

I have 2 questions:

  1. What is *width ?

  2. Is it 31.9% of body width or just the width of .row-fluid/ancestral element ? I assume that its w.r.t the width of row-fluid because my bodyis 1349px, row-fluid is 1147px and span4 is 366px which comes out to be 31.9% of 1147.But then this should work too :

HTML:

<div id="right" class="span4">
    <div id="high">
    </div>
</div>

CSS :

#right #high{position:fixed; width:100%;padding-left:10px;}

If the second case in Q#2 is correct, then the width of #high should be 100% i.e. same as that of #right. But I am getting #right 367px wide and #high 1349px wide in my browser.

Upvotes: 1

Views: 172

Answers (1)

Ian Devlin
Ian Devlin

Reputation: 18880

  1. *width targets IE7 only
  2. Percentage widths are relative to the container that they are in

When you make an item position:absolute, then it is relative to the entire document rather than the container it's in, so in this case the body.

Upvotes: 1

Related Questions