Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Display Modes Column Layout with Inline-Block

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

css layout problems

Hello!

vertical-align:middle; // not in the middle of the header

1) In my code below, and in the video, the logo and the nav links dont really appear in the middle of the header. My expecation is that they should appear right in the center of the header. What does this rule really mean?

2) I am following the intructions in the videos, but I can't understand why this rule below doesnt work for me. I have even increased min-height in the header to these exaggerated amount of 500px or 1000px but I see no change in the height or my header. Please run the code below and see the css.

.main-header{ padding:20px; display:table; width:100%; min-height:500px;//doesnt work

}

3) If you run the code below and narrrow the viewport, you will see the columns don't stack up, and .main-banner is still in plain view. How can I fix this problem?

4) what style run can I give my .main-nav li so that I can push them down and align them perfectly with the bottom of the .main-logo. Yes, I have tried margin-top:10px ,or margin-bottom:10px; but neither work.

Thanks!!!

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="normalize.css">
<style>
body{
font : normal 1.1em/1.5 sans-serif;
color : #222;
background-color: #edeff0;

}


.main-header { background-color: #384047;}
.main-logo { background-color: #5fcf80;}
.main-nav li { background-color: #3f8abf;}
.primary-content { background-color: #caebf6;}
.secondary-content { background-color: #bfe3d0;}
.main-footer { background-color: #b7c0c7;}

/*.main-wrapper{
width:90%;
margin:auto;

 } */

.main-header{
padding:20px;
display:table;
width:100%;
min-height:250px;//doesnt work


}

.main-logo, .main-nav, .main-nav li{
display:inline-block;
border-radius:5px;
}

*{
box-sizing:border-box;
}

.main-nav{
padding-left:50px;


}



.main-nav li{
margin-right:10px;



}


.main-logo{

width:150px;


}


.main-logo a, .main-nav a{

display:block;
padding: 10px 20px;
text-align:center;
color:white;
text-decoration:none;

}


 .main-logo, .main-nav{
 display:table-cell;
 vertical-align:middle; // not in the middle of the header

 }



 @media(max-width:768px)
 {
 .main-logo,
 .main-nav,
 .main-nav li, .colbe{
 display:block;
 width:initial;
 margin:initial;
 height:initial;


 }
 .main-nav{
 padding-left:initial;

 }

 .main-nav li{
 margin-top:15px;

 }
 .main-banner{
 display:none;

 }


 }

 .colbe{

 display:inline-block;
 padding:20px;
 margin-right:-5px;  
 vertical-align:top;


 }

 .primary-content{

 width:60%;
 }
 .secondary-content{

 width:40%;
 }

 html,
 body,
 .main-wrapper,
 .colbe{
 height:100%;

 } 


 .main-footer{
 text-align:center;
 padding:20px;

 }
 .main-banner{
 background:#ebedee;
 text-align:center;
 padding:35px 15px;


 }




</style>

</head>

<body>
<div class="main-wrapper">
<header class="main-header"> 
<h1 class="main-logo"><a href="#">logo</a></h1>
<ul class="main-nav">
<li> <a href="#">Link 1 </a></li>
<li> <a href="#">Link 2</a></li>
<li> <a href="#">Link 3</a></li>
<li> <a href="#">Link 4</a></li>
</ul>

</header>

<div class="primary-content colbe">
<h2> Primary Content </h2>
<p>deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
iapeepeo euapiai  eau:aja eaoia:ia :eaao: eoia:i :aiiiee
iea:eirea ejira:er eruaeir  eoairair  eruoaeu rea:ora:re
</p>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
iapeepeo euapiai  eau:aja eaoia:ia :eaao: eoia:i :aiiiee
iea:eirea ejira:er eruaeir  eoairair  eruoaeu rea:ora:re
 </p>
</div>

<div class="secondary-content colbe">
<h2> Secondary Content </h2>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a
</p>
<hr>
<p>
deaearyo apaea  epauapei aepaijaiae eia aeairaoeaioa e77
eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a

</p>
</div>
<div class="main-banner">
<h1>This is our main banner </h1>
<p>eapora aopeajeioaupa  aepoapa epaoeap:o pa:ea:ap pa:ap:a </p>
</div>

<footer class="main-footer">
<p>&copy; 2014 Example Layout </p>
</footer>

</div>
</body>
</html>

FYI, I am using inline style just for this post.

thanks!!!

ixrevo
ixrevo
32,051 Points

Hi orange sky!

Nice to hear you again :)

What kind of browser do you use? And what version?

orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hey Alexander! Nice to hear from you too :)

Well, I am using Firefox version 30.0.

Cheers!!!

ixrevo
ixrevo
32,051 Points

It's strange. I've tested your code in Safari and Firefox, but the logo and navigation are perfectly vertically centered as for me. Maybe something wrong with my eyes :)

https://www.dropbox.com/s/12nxrkedjc8b26e/Screenshot%202014-06-27%2016.12.23.png

orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Hey Alexander,

Thanks for the screenshot. I got the same result to but,

1) If I wanted to move the links down, what style should I use?

2) For some reason, I was expecting this style rule: vertical-align:middle; to place the logo, and links right in the center of( I mean halfway ) the header. How would you describe vertical- align:middle

Cheers!!!

ixrevo
ixrevo
32,051 Points

1) You can try changing css about 81 line of your file. Replace:

 .main-logo, .main-nav{
 display:table-cell;
 vertical-align:middle; // not in the middle of the header

 }

with:

.main-logo, .main-nav {
    display: table-cell;
    vertical-align: bottom;
}

2) Do you mean vertical-align: middle; should put elements to the center of the parent element (header) horizontally? Like this https://www.dropbox.com/s/qntya3fsf8yq7sf/Screenshot%202014-06-28%2014.10.01.png

The **vertical-align* CSS property specifies the vertical alignment of an inline or table-cell box.*

Don't confuse it with text-align*.

The **text-align* CSS property describes how inline content like text is aligned in its parent block element. text-align does not control the alignment of block elements itself, only their inline content.*

Read more about this properties: https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align https://developer.mozilla.org/en-US/docs/Web/CSS/text-align

To fully understanding of alignment and layout techniques I recommend you learn more about:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Visual_formatting_model

But be careful, it's all tricky stuff :) Don't fell bad if you don't get it all with first attempt. Just keep learning and practicing.

Also I've noticed you use inline comments inside css:

vertical-align:middle; // not in the middle of the header

It's incorrect because css understands block comments:

body {
    /* Hi, I'm css comment. How are you? I'm fine */
    font-size: 100%;
}

a {
    // Hi, I'm wrong css comment and I breaks this css rule.
    color: red;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Comments https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax