CODEWITHSUNDEEP
csstwitter-bootstrap
More Than Five
More Than Five

Reputation: 10419

Twitter bootstrap multiple divs on one row

CSS noob here. I want to divs in the same row. Using some twitter bootstrap CSS I do:

.row-fluid {
   width: 100%;
   *zoom: 1;
}

.span6{
  width: 460px;
}

.row-fluid .span6 {
   width: 48.717948717948715%;
   *width: 48.664757228587014%;
}

div {
  position: relative;
  background: orange;
  height: 5em;
}

and my HTML is...

<div class="row-fluid">
<div class="span6">Foo</div>
<div class="span6">Bar</div>
</div>

the Foo and Bar are not one the one line. Any idea what I am doing wrong?

Here is the JS fiddle: http://jsfiddle.net/cFgTA/

Thanks.

Upvotes: 1

Views: 3496

Answers (2)

Justin
Justin

Reputation: 3397

Are you actually using the twitter bootstrap or are you copying parts of it? You only have a small fraction of the css that actually defines the row-fluid functionality. For example, the first element normally has it's margins changes to account for the extra pixels an element has around it and all the elements that have a span* class assigned to them are supposed to float: left like mentioned by mshsayem.

If you look at this fiddle, which uses a CDN bootstrap and your code commented out, there are no issues. I recommend you use the actual css file provided by twitter unless you are familiar with their stylesheet & css to make changes to it.

Upvotes: 2

mshsayem
mshsayem

Reputation: 18008

I dont know bootstrap; but it seems you missed a float:left on .row-fluid .span6. Check if this is ok: http://jsfiddle.net/cFgTA/1

Upvotes: 1

Related Questions