Francesca
Francesca

Reputation: 28128

Responsive grid system - why don't they line up?

I've made a responsive grid system which uses a 3 column layout. So some of the grid boxes are 2 columns wide, most are 1 column wide.

This was working find until I put content into each of the boxes, and now the "Have Your Say" box sits down further than all the others? I've tried playing with the widths of the boxes but no change?

If anyone can help I'd appreciate it!

http://fh80.student.eda.kent.ac.uk/fyp/#

This is how the grids work:

<div id="grid">
   <!- first line is 1, 1, 1 -->
   <div class="item col-1 sports">
      content
   </div>
   <div class="item athletes col-1">
      content
   </div>
   <div class="item venues col-1 last">
      content
   </div>
   <!-- second line is a 2 and a 1 -->
   <div class="item col-2">
      content
   </div>
   <div class="item col-1 parents last">
      content
   </div>
</div>

The css is set for each col-x (whether it's 1 wide, 2 wide or 3 wide). Margin's are applied on the right hand side, with the "last" of any row having no margin.

#grid .item{
    background: rgb(255, 255, 255);
    background: rgba(255, 255, 255, .8);
    display:inline-block;
    min-height:300px;
    margin-right:3%;
    margin-bottom:3%;
    padding:1%;
    position:relative;
}

#grid .item.col-1{width:29%;}
#grid .item.col-2{width:63.4%;}
#grid .item.col-3{width:97.6%;}

#grid .item.last{margin-right:0;}

Upvotes: 0

Views: 248

Answers (1)

BastianW
BastianW

Reputation: 270

Try float: left; on your .item class.

Note: You can also remove the diplay: inline-block;.

Upvotes: 1

Related Questions