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 Positioning Schemes Fixed Positioning

Css header problem

Hello,

If you run this code, you will see the .main-logo and .main-nav are sitting on the top of the columns. I gave .main-header a z-index:100, but it didn't work. How can I get .main-logo and .main-nav to stay inside main-header

<!DOCTYPE html>
<html>
<head>
<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;}
.third-content {background-color:pink}
.main-footer { background-color: #b7c0c7;}

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

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

}
/*main-header
===============================================*/

.main-header{
position:relative;
min-height:100px;
padding:15px;

}
.main-logo, .main-nav{

position:absolute;
}

.main-nav {

left:150px;


}
.main-logo{
border-radius:5px;
}
.main-nav li{
display:inline-block;
margin-top:46px;
border-radius:5px;
}
.main-logo a, .main-nav a{
padding:10px 18px;
float:left;
display:block;
text-decoration:none;
color:white;
border-radius:5px;


}

/*style the columns
==========================================*/
.main-banner{
display:none;

}
.container{
position:relative;


}
.col{
position:absolute;
width:50%;
padding:20px;

}
.feat-img{
width:50%;
margin-right:10px;
float:left;



}
.primary-content {
padding-right:10px;

}
.primary-content{

width:50%;
}
.secondary-content{

right:0;
}

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

}
*{
box-sizing:border-box;

}
</style>
</head>

<body>
<div class="main-wrapper">
    <header class="main-header group">
    <h1 class="main-logo"><a href="#">Logo</a></h1>
        <ul class="main-nav group">
            <li><a href="#">Link1 </a></li>
            <li><a href="#">Link2 </a></li>
            <li><a href="#">Link3 </a></li>
            <li><a href="#">Link4 </a></li>
        </ul>
    </header>
    <div class="main-banner">
        <h1>Main Banner </h1>
        <p> ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
            eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
            idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
        </p>
    </div>

  <div class="container group">
        <div class="primary-content col">
            <h2>Primary Content</h2>

            <img class="feat-img" src="http://lorempixel.com/400/300">  
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:aieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
            </p>
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
                idoaei eiaofi oeaeipa:eoa:e paea:ej eaopeiap eapea:a
            </p>
        </div>
        <div class="secondary-content col">
            <h3>Secondary Content</h3>
            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa
            </p>

            <hr/>

            <p>
                ieaoeia iaehaoie ieaejaio aeiaoei eaoieua ue aeoia
                eiaoei ao ieaoeaie ieaeiaioe  aeoea ieoi eia  eiaoeeioa 
            </p>
        </div>
        <div id="clear"></div>
</div>

    <footer class="main-footer">

        <p>&copy; 2014 Example Layout </p>

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

5 Answers

idan ben yair
idan ben yair
10,288 Points

apply this:

.main-nav {
    margin-top: -30px;
}

it will push your nav back to the header.

may I please see the full solution for .main-logo and main-nav; I gave .main-logo:-30px too, but it is longer aligned to .main-nav, then I tried .main-logo-25px -20px, I still cant get them to align.

Adama Sy
Adama Sy
7,076 Points

if you create a flex.css you can manage your things better. this is what I did to mine. and it works great

Hello Adama, I have yet to learn 'Flex'. thanks for the advice, but at this stage, I am hoping for a solution. Cheers!

Adama Sy
Adama Sy
7,076 Points

orange sky you Know me I need to learn PHP, or Ruby also Xcoce, to reach what I want to do. But at this stage I'm on Javascript coding, so far away from my goal.

There is no rush, you have 1000 of things to learn, finish you css course you will find the answer.

Just be patient. Flex is the best way to put Items into space. Just give yourself time to reach it, but don't rush better you understand what you are doing Mate

Hey Adama, I love Javascript, it is so much more intuitive than cs. t I will definetely not rush things. Cheers!