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 Block vs. Inline Elements

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

problems with .cols

Hello,

This code below is based on the Layout CSS class code. I am working on using display:inline-block to style my columns. I have actually added an extra column in my div main-wrapper.

1) If you run this code, you will see that the header and the footer both extend beyond the wrapper size by the same amount. I would like the main-header, .col, and main-footer to have the same width. Can you please explain why this is happening?

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="">
<style>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/


/*=====================================================*/

.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: 1.1em/1.5 sans-serif;
color:#222;
background-color:beige;


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



}

.main-header{
display:table;
padding: 10px 20px;
width:100%;

min-height:250px;
padding:20px;


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

display:inline-block;

}
.main-nav {
padding-left:20px;


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

}
*{
box-sizing:border-box;

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

}

.main-logo{
width:120px;


}

.main-logo a, .main-nav a{
display:block;
padding: 10px 20px;
color:white;
text-decoration:none;


}

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


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

    }
    .main-nav li{
    margin-top:10px;

    }


 }

 .col{
 display:inline-block;
 padding:20px;
 background-color:yellow;
 margin-right:-9px;
 vertical-align:top;

 }
 .primary-content{
 width:60%;

 }
 .secondary-content {

 width:20%;

 }
 .third-content{
  width:20%;
 }
 html,body,
 .main-wrapper, .col{
 height:100%;

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

 }



</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="#">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="primary-content col">
            <h2>Primary Content</h2>
            <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>
            <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="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 class="third-content col">
            <h3>third 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>
    <footer class="main-footer">
    <p>&copy; 2014 Example Layout </p>

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

5 Answers

Vlatko .
Vlatko .
2,526 Points
Vlatko .
Vlatko .
2,526 Points

Whoa, you have a ton of code and duplicated code, but I'll try to help you out.

1. I would like the main-header, .col, and main-footer to have the same width. Can you please explain why this is happening?

You need to contain your three div columns within some sort of container that will match the width of both your header and footer tags. Right now, your three div columns have their own widths and don't match up to the total width of the header or footer tags. You can achieve this by creating a container for these columns. It would look something like this:

CSS

.column-container {
    background-color: yellow;
}

HTML

<header>logo/nav</header>

<div class="column-container">
    <div class="primary-content col">content 1</div>
    <div class="secondary-content col">content 2</div>
    <div class="third-content col">content 3</div>
</div>

<footer>copyright</footer>

I made the column-container class have a background color of yellow so you can see how it works visually. You can also remove the background colors from your div columns to get a better idea of how it looks/works.

I hope that helps you with your first question.

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

Hello Vlatko,

1) I have put a container around the divs, and it works:) Thanks! But for some reason the lecture video does not have this extra div around these two divs.Anyway I understand why I have to put a container around them. I have added the container but now the 'yellow background is running into the 1st div, Would you happen to know how to fix that.

2) You mentionned that I had a lot of duplicated code, I am really following what I see in the videos, but can you please point out a few duplicated code. I am having a hard time spotting one. 

Cheers
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="">
<style>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/


/*=====================================================*/

.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: 1.1em/1.5 sans-serif;
color:#222;
background-color:beige;


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



}
/*========================================================
styling the navigation

*/
*{
box-sizing:border-box;

}

.main-header{
display:table;
width:100%;
padding:20px;

}
.main-logo, .main-nav{
display:table-cell;
vertical-align:center;
}
.main-logo, .main-nav, .main-nav  li{
display:inline-block;
}
.main-nav {
padding-left:20px;


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

}

.main-logo, .main-nav li{
border-radius:5px;

}

.main-logo{
width:120px;


}

.main-logo a, .main-nav a{
display:block;
padding: 10px 20px;
color:white;
text-decoration:none;


}
/*=====================Media================================*/
 @media(max-width:768px)
 {
     .main-logo,
     .main-nav,
     .main-nav li
     {
     display:block;
     width:initial;
     margin:initial;


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

    }
    .main-nav li{
    margin-top:10px;

    }


 }


 /***********Styling the colum ************/


 .col{
 display:inline-block;
 padding:20px;
 margin-right:-9px;
 vertical-align:top;

 }

 .column-container {
    background-color: yellow;
}


 .primary-content{
 width:60%;
 }

 .secondary-content {
 width:20%;
 }

 .third-content{
  width:20%;
 }

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

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

 }



</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="#">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=" column-container">
    <div class="primary-content col">
            <h2>Primary Content</h2>
            <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>
            <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="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 class="third-content col">
            <h3>third 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>
    <footer class="main-footer">
    <p>&copy; 2014 Example Layout </p>

    </footer>
</div>
</body>
</html>
orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Wait :) even when I add an extra div around both columns and giv all 3 columns their own colors, the width of the main header, column-container, and main-footer are still not even

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="">
<style>
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/


/*=====================================================*/

.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: 1.1em/1.5 sans-serif;
color:#222;
background-color:beige;


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



}
/*========================================================
styling the navigation

*/
*{
box-sizing:border-box;

}

.main-header{
display:table;
width:100%;
padding:20px;

}
.main-logo, .main-nav{
display:table-cell;
vertical-align:center;
}
.main-logo, .main-nav, .main-nav  li{
display:inline-block;
}
.main-nav {
padding-left:20px;


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

}

.main-logo, .main-nav li{
border-radius:5px;

}

.main-logo{
width:120px;


}

.main-logo a, .main-nav a{
display:block;
padding: 10px 20px;
color:white;
text-decoration:none;


}
/*=====================Media================================*/
 @media(max-width:768px)
 {
     .main-logo,
     .main-nav,
     .main-nav li
     {
     display:block;
     width:initial;
     margin:initial;


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

    }
    .main-nav li{
    margin-top:10px;

    }


 }


 /***********Styling the colum ************/


 .col{
 display:inline-block;
 padding:20px;
 margin-right:-9px;
 vertical-align:top;

 }

 .column-container {
    //background-color: yellow;
}


 .primary-content{
 width:60%;
 }

 .secondary-content {
 width:20%;
 }

 .third-content{
  width:20%;
  background-color:pink;
 }

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

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

 }



</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="#">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=" column-container">
    <div class="primary-content col">
            <h2>Primary Content</h2>
            <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>
            <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="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 class="third-content col">
            <h3>third 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>
    <footer class="main-footer">
    <p>&copy; 2014 Example Layout </p>

    </footer>
</div>
</body>
</html>
orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

No worries, I was able to solve. thanks!

Liviu Tudor
Liviu Tudor
7,061 Points
Liviu Tudor
Liviu Tudor
7,061 Points

how ? just curious....