CODEWITHSUNDEEP
css
MultiDev
MultiDev

Reputation: 10649

CSS- Two left floated 50% width divs do not fit on one line- jsfiddle

I am trying to setup rows of 100% width, and columns of varying width, with 12 total columns per row.

So, for example:

<div class="row">
<div class="span6">
  // this would be 50% width
</div> <!-- /.span6 -->

<div class="span6">
  // this would also be 50% width
</div> <!-- /.span6 -->
</div> <!-- /.row -->

The problem is that I can't get both 50% width columns to fit on one 100% width row... I can't figure it out. There are no margins anywhere.

Help, please? Here is the jsfiddle: http://jsfiddle.net/447nao9g/

Upvotes: 1

Views: 400

Answers (7)

Tristanisginger
Tristanisginger

Reputation: 2683

Check that there isn't a space character between the two elements

Upvotes: 0

Fabian Mertens
Fabian Mertens

Reputation: 1

The best is to declare this in the css:

* {
    -moz-box-sizing: border-box;
}

JS Fiddle Link

Upvotes: 0

Alexander Bell
Alexander Bell

Reputation: 7918

This is because padding takes some space: try

.span6 { width:46%; }

and change the padding like shown below:

.span1-8 {
    box-sizing:border-box;
    min-height: 1px; 
    float: left; 
    padding-left: 1%; 
    padding-right: 1%; 
    position: relative; 
}

It'll work properly. Regards

Upvotes: 0

SVSchmidt
SVSchmidt

Reputation: 6527

The developer tools state:

.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12,      .span1-5, .span1-8 {
    min-height: 1px;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

By adding padding to the element, you expand its width. That means the spans have an actual width of 50% + 20px, which forces the right one to switch to the next line.

You could either remove the padding, substract it via

width:calc(50% - 20px)

or use

box-sizing:border-box;

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Upvotes: 0

TheFrozenOne
TheFrozenOne

Reputation: 1715

The padding extends your divs. Remove them, or set box-sizing: border-box;, the padding should then be included.

Box-Sizing: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

Upvotes: 2

Erik Svedin
Erik Svedin

Reputation: 1286

They do however have padding. Update the span classes with:

box-sizing:border-box;

To add this in the width calculation.

fiddle: http://jsfiddle.net/447nao9g/2/

Edit: this adds the padding as Doodlebunch stated

Upvotes: 2

Moshtaf
Moshtaf

Reputation: 4903

It's because paddings occupy space too so you have two 50% + 20px. Remove this:

padding-left: 10px; 
padding-right: 10px;

Or use this:

box-sizing:border-box;

under span1-8 class.

Check JSFiddle Demo

Upvotes: 2

Related Questions