CODEWITHSUNDEEP
htmlcsslayout
Matt Bryce
Matt Bryce

Reputation: 123

CSS: divs are pushed down in the container

I've put together this bit of html and css to display featured items for a homepage, but for some reason the contents of the box seem to make the boxes float to the bottom of the containing div and depending on the amount of text this means the boxes become miss-aligned.

I want the boxes to all remain the same height and all be aligned along the top of the blue div.

CSS:

@import url(http://fonts.googleapis.com/css?family=Bree+Serif);
@import url(http://fonts.googleapis.com/css?family=Open+Sans);

.icon_css { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_css.png) #FFF; background-size: 80px; background-repeat: no-repeat; background-position: center; }
.icon_php { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_php7.png) #FFF; background-size: 75px; background-repeat: no-repeat; background-position: center; }
.icon_jquery { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_jquery.gif) #FFF; background-size: 110px; background-repeat: no-repeat; background-position: center; }
.icon_bootstrap { background: url(http://fauxbyte.esy.es/_codepen_resources/icon_bootstrap.gif) #FFF; background-size: 160px; background-repeat: no-repeat; background-position: center; }

body { margin: 0px; }

h1 {
  text-align: center;
  font-family: 'Bree Serif', 'serif';
  font-size: 50px;
  color: #444;
  font-weight: lighter;
}

.featuredItemWrap {
  background: #E7E7E7;
  width: 250px;
  height: inherit;
  display: inline-block;
  margin-right: 5px; 
  margin-left: 5px; 
  margin-top: 25px;  
  text-align: center;
}

.featuredItemOuterWrap {
  background: #009CEF;
  width: 100%;
  height: auto;
  padding-bottom: 20px;
  text-align: center;

}

.featuredItemInner {
}

.featuredItemDesc {
  background: none;
  padding: 0px 20px 40px 20px;
  color: #444;
  font-family: 'Open Sans', sans-serif;
}

.featuredItemDesc h1 {
  font-family: 'Bree Serif', 'serif';
  font-size: 25px;
}

.featuredItemIcon {
  width: 150px;
  height: 150px;
  margin-left: auto;
  margin-right: auto;
  margin-top: -40px;
  border-radius: 50%;
  border: 10px solid #E7E7E7;
}

CodePen

Upvotes: 0

Views: 41

Answers (2)

Matt Bryce
Matt Bryce

Reputation: 123

Never mind, I solved it myself.

Simply used vertical-align: top; on my .itemDivs.

Upvotes: 0

potashin
potashin

Reputation: 44601

You can use flex layout for .featuredItemOuterWrap container and its' inner items:

.featuredItemOuterWrap{
  display:flex;
  justify-content:center;
}

CodePen

Upvotes: 1

Related Questions