css “ display: inline-block for 3 column”

Question

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

Second image using padding

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; } pp-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; } pp-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>

Answer 1

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

css “ display: inline-block for 3 column”

Question

1 answers

solution1
2 ACCPTED 2016-02-08 08:38:25

css “ display: inline-block for 3 column”

Question

1 answers

solution1 2 ACCPTED 2016-02-08 08:38:25

solution1
2 ACCPTED 2016-02-08 08:38:25