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
orange sky
Front End Web Development Techdegree Student 4,945 Pointscells 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>© 2014 Example Layout </p>
</footer>
</div>
</body>
</html>
4 Answers
Claudia Almeida
9,291 PointsHi 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
3,982 PointsCan 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
orange sky
Front End Web Development Techdegree Student 4,945 PointsIf 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!
orange sky
Front End Web Development Techdegree Student 4,945 PointsHi 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!
Claudia Almeida
9,291 PointsStudy 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