CODEWITHSUNDEEP
htmlcss
Lavonen
Lavonen

Reputation: 670

Boxes side by size not aligned properly vertically due to content

I have these responsive boxes side by side with an image and text inside. However, some of the boxes are not aligned properly due to the text. I have tried to change this with no success.

Here is an image of the problem: https://i.sstatic.net/Hdmkj.jpg

Here comes the HTML:

<div id="grid">
  <span class="box">
    <i class="fa fa-file-text fa-3x"></i>
    <div class="service">Super awesome box</div>
  </span>

  ...

</div>

And the CSS:

#grid {
  width: 100%;
}
#grid .box {
  display: inline-block;
  width: 135px;
  height: 135px;
  margin: 11px;        
  background-color: #b7cfdd; 
}
#grid .box .service {
  font-family: "Roboto", sans-serif;
  font-size: 17px;
  color: #555;
}
#grid .box i {
  margin-top: 20px;
  color: #00406e;
}

Here you can see the problem in action: http://jsfiddle.net/et72powz/3/

Is there an easy fix to this problem?

Upvotes: 0

Views: 523

Answers (5)

MHD Alaa Alhaj
MHD Alaa Alhaj

Reputation: 3163

The problem coming from display: inline-block replace it with float: left and it will act as you want check the updated Fiddle.

Upvotes: 1

Viira
Viira

Reputation: 3911

Change the height to min-height and also assign them a position(vertical alignment) by giving vertical-align:top;

#grid .box {
    display: inline-block;
    width: 135px;
    min-height: 140px;
    margin: 11px;        
    background-color: #b7cfdd; 
    vertical-align:top;
}

Also a fiddle : http://jsfiddle.net/et72powz/11/

Upvotes: 0

Oram
Oram

Reputation: 1673

Use flexbox for your grid.

#grid {
    width: 100%;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

http://jsfiddle.net/et72powz/8/

Upvotes: 0

David
David

Reputation: 801

Your HTML is invalid. A division tag, cannot be nested inside of a span. Make the span div and you'll be fine.

Make use of vertical-align to line them all up nicely.

http://jsfiddle.net/et72powz/15/

#grid .box {
  display: inline-block;
  width: 135px;
  height: 135px;
  margin: 11px;        
  background-color: #b7cfdd; 
  vertical-align: top
}

Upvotes: 2

maha
maha

Reputation: 643

i got a solution for you but i don't really know the actual behaviour of why this works.. i just deleted some of your css .. try this css code..

#grid {
width: 100%;

}

#grid .box {
display: inline-block;
width: 135px;
height: 135px;
margin: 11px;        
background-color: #b7cfdd; 
}

#grid .box i {
margin-top: 20px;
color: #00406e;
}

Upvotes: 0

Related Questions