Question

I tried making my own grid system for 3 equally sized divs, with the goal to keep them in the same row at 1024px screen/device width and maybe even at lower width’s. For some reason however at 1024 pixels the divs go out of sync but are fine at higher widths despite not taking up 1024px’s in total themselves, I am using bootstrap with my code too (code below) –

html

<div clss="row-fluid">
<div id="box" class="span12">

  <div class="grid">

    <div class="b b1">

      <div class="module">
        <h2>
        IMPORTANT TITLE GOES HERE
        </h2> 
      </div>  

    </div>  

    <div class="b b2">

        <div class="module">
        <h2>
        IMPORTANT TITLE GOES HERE
        </h2> 
      </div>

    </div>  

    <div class="b b3">

       <div class="module">
        <h2>
        IMPORTANT TITLE GOES HERE
        </h2> 
      </div>

    </div>  

  </div>    

</div>
</div>

CSS –

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



#box{
  max-width: 1024px;
  min-width: 250px;
  margin: 30px auto;
  background: #111;
}

.grid {
  overflow: hidden;
}
.grid .b{
  float: left;
}

.grid .b1 {
  max-width: 341px;
  min-width: 250px;
  height: 200px;
  background: blue;
}
.grid .b2 {
  max-width: 341px;
  min-width: 250px;
  height: 200px;
  background: red;
}
.grid .b3 {
  max-width: 341px;
  min-width: 250px;
  height: 200px;
  background: green;
}

.module {
  padding-top: 20%;
}

So where am I going wrong and how can I fix it?

Answer 1

Basically what you needed to do was to use the css properties ‘float’ and ‘clear’.

Check out this JSFiddle here.

for this example i just targeted all the div’s as shown below, but obviously you would alter this to target the individual ones you need to not all the div’s on the page.

div {
    float:left;
    clear:left;
}

Hope this helps!