Cris February 2016

css " display: inline-block for 3 column"

I was wondering everytime I set a width in the first column of my display-inline-block CSS method, the other column will go down for how many pixel but if I use padding instead of width the other column will not go down. Can someone explain me why is this happening? NEWBIE Here

The first picture using width in the first column

enter image description here

Second image using padding

enter image description here

The Code

body {
  font-family: "Arial",Helvetica, sans-serif, serif;
  color: white;
  background: gray;
  margin: 0;
}
div.wrapper {
  border: 3px black dashed;
}

/*===============header===================*/
header.main-header {
  border: 2px pink dashed;
}
h1.main-h1 {
  margin: 10px 0 0 0;
  border: 1px black solid;
  text-align: center;
}
p.p-header {
  font-style: italic;
  margin-top: 0;
  padding-left: 57.5%;
  position: absolute;
  top: 27px; 
  line-height: 12px;
}
/*==============end of header============*/

/*==============navigation bar===========*/
nav.main-nav {
  border: 2px green solid;
  text-align: center;
}
p.p-nav {
  margin: 0;
  right: 1%;
}
/*============end of navigation=========*/

/*============section===================*/
div.column {
  border: 2px blue dashed;
}
section.second-column, section.third-column, section.first-column {
  border: 2px brown solid;
  display: inline-block;
  height: 450px;
}
section.first-column {
  padding-right: 4%;
  margin-left: 1%;
}
section.second-column {
  width: 60%;
         

Answers


Chris February 2016

Set vertical-align: top to your column elements.

section.second-column, section.third-column, section.first-column {
  border: 2px brown solid;
  display: inline-block;
  height: 450px;
  vertical-align: top;
}

You can read more about vertical-align here and here

Post Status

Asked in February 2016
Viewed 3,716 times
Voted 11
Answered 1 times

Search




Leave an answer