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 Float Layout Floating Columns and Images

cells appear as block in my display:table

Hello!

I cant figure out why in my display table layout, my cells appear as block.

thanks

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="normalize.css">
<style>
.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;}


 body{
font : normal 1.1em/1.5 sans-serif;
color : #222;
background-color: #edeff0;

}
.main-wrapper{
margin:0 auto;
width:90%;



}
.main-header{
padding:20px;
display:table;
width:100%;
min-height:150px;

}
*{

box-sizing:border-box;

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

}

.main-logo, .main-nav li{

border-radius:5px;


}

.main-nav li{

}

.main-logo{
width:120px;



}

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

padding:10px 20px;
text-align:center;

}







</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 col">
<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 col">
<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


</p>
</div>


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

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

4 Answers

Hi Orange Sky (awesome name by the way) I think I found the solution to your question:

.main-nav li{ display: inline-block; }

Let me know if it works ;D

Souleymane Coulibaly
Souleymane Coulibaly
3,982 Points

Can you be more specific looking at your code you've set the .main-header to display:table; and it contains two elements inside it #main logo, #main-nav which both are set to display:table-cell;

For me it look right because display:table-cell; mimicks the td html element as they align horizontally next to each other. see reference here

If you run the code, you will see that each link spans accross the length of the entire main header. I am trying to style the header using display:table and display:table-cell. Like in the video, I would like each link to occupy its normal space or width withing the table-cells. I am not sure what is missing or what I have added to make the links span accross like block elements in the main header. Hope this description is clearer!

Hi Claudia, (I really pulled that name out of nowhere, anyway thanks!).

.main-nav li{ display: inline-block; }

that is so the solution! How did you come up with this answer? Gee, Im finding designing and positioning elements hard to learn. I can't wait for this to become intuitive to me .

Cheers!

Study the difference between "inline" and "block" elements, it helps a lot... everything will come together soon, I am still struggling with layout! Can you please up my answer? It helps us earn points :D