CODEWITHSUNDEEP
htmlcssvertical-alignment
user5621029
user5621029

Reputation:

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%;
  margin-left: 1%;
}
section.third-column {
  width: 20%;
  margin-left: 1%;
}
/*==============footer==================*/
footer.main-footer {
  border: 1px white solid;
  text-align: center;
  clear: both;
}
/*=============end of footer===========*/
<!DOCTYPE HTML>
<html lang="eng">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="_css/typhography.css">
    <title>Typhography</title>
  </head>
  <body>
    <div class="wrapper">
      <header class="main-header">
        <h1 class="main-h1">Typhography</h1>
        <p class="p-header">learning things<br>with showe</p>
      </header>
      <nav class="main-nav">
        <p class="p-nav">This is for Navigation Section</p>
      </nav>
      <div class="column">
        <section class="first-column">This is first column</section>
        <section class="second-column">This is second column</section>
        <section class="third-column">This is third column</section>
      </div>
      <footer class="main-footer">
        <small>this is footer</small>
      </footer>
    </div>
  </body>
</html>

Upvotes: 1

Views: 1996

Answers (1)

Chris
Chris

Reputation: 59501

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

Upvotes: 2

Related Questions