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 Pointshow to calculate the width of my header/columns based on box model
Hello, I would like some help to understand what is happening in the inspector of my web console( I am using Firefox )
1) If you go to the inspector tab, you wil see a section that says box model. My header tag has a class called main-header. In the box model, the width of main-header is 1194px; however when you add the width of the 3 columns right below the main-header (primary-content (717px + seconday-content(239px)+ third-content(239px) = 1195px.
main-header is 1194px and the 3 columns add to 1195px, when you run this code, the header and colums appear well balanced, I dont see a one pixel difference on the browser.
Is the width of my header truly perfectly aligned to the total width of my columns? Does this 1pixel difference matter?
2) .col has a "margin-right:-5px;" and it appears in the box-model of primary-content, secondary-content and third content. How does this -5 fit int the total width calculations of my 3 columns. (primary-content 717px + secondary239px + third 239px)=1194 - (-5*3)each column has a -5px margin right.
I am sure this calculation is not right because the total colums width is well aligned with the column width of the header, but -5 must have been derived somehow. when I try margin-right:-7 the total columns are no longer well aligned with the header. How is the value of margin-right determined mathematically?
<!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 main nav
==================================================*/
.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;
}
*{
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;
}
.col{
display:inline-block;
padding:20px;
background:green;
border:1px solid black;
margin-right:-5px;
vertical-align:top;
}
.primary-content{
width:60%;
}
.secondary-content {
width:20%;
}
.third-content{
width:20%;
background:pink;
}
html,body,
.main-wrapper, .col{
height:100%;
}
.main-footer{
text-align:center;
padding:20px;
}
.feat-img{
width:50%;
float:left;
margin-top:10px;
margin-right:25px;
margin-bottom:10px;
border: 1px dotted;
padding:5px;
}
</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>
<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 class="third-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>
<footer class="main-footer">
<p>© 2014 Example Layout </p>
</footer>
</div>
</body>
</html>
2 Answers
fredy mendez
5,886 Pointsin the code above you are using percentage,
Marcus Parsons
15,719 PointsI had fun in answering this question! #1 and #2 tie in together very neatly, as I will explain below, so I am actually going to start with #2 (you'll see why in a moment):
2) The "inline-block" method of display, while a truly awesome and simple way to display columns of content, side by side, has a severe drawback. It is whitespace dependent. If you have any whitespace between the content that is meant to be displayed side by side, it will render this whitespace as about 4px of space.
This is why you had to use "margin-right: -5px;" to overcome this. HOWEVER, you can eliminate the need to even derive the margin (and you can completely omit the "margin-right" property after doing the following), by simply putting the ending tag of the first column's content directly beside the beginning of the next column's tag with no spaces between them whatsoever. For example:
<div class="primary-content col">......</div><div class="secondary-content col">.....</div><div class="third-content col">
If you notice, there is now no whitespace at all between closing and opening tags of column content. But you can put any amount of whitespace in between the content of any div.
1) The 1px difference you speak of seems to be an error in Firefox. I have only tried this page with Firefox and Chrome. But, when I inspected the page in Chrome, the width of the header and the width of the columns matched up perfectly. In Firefox, I did get a 1px difference. However, you won't even be able to see a difference until you zoom in to about 500% and even then it wasn't anything that would catch my eye. In other words, don't sweat it.
I would personally omit the border property for the columns as well as they do seem to noticeably stick out further than the header, but that's purely personal preference. Here is the new HTML page I edited for you.
I hope that covers it for you! :)
<!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 main nav
==================================================*/
.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;
}
*{
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;
}
.col{
display:inline-block;
padding: 1.5%;
background:green;
border:1px solid black;
vertical-align:top;
}
.primary-content{
width:60%;
}
.secondary-content {
width:20%;
}
.third-content{
width:20%;
background:pink;
}
html,body,
.main-wrapper, .col{
height:100%;
}
.main-footer{
text-align:center;
padding:20px;
}
.feat-img{
width:50%;
float:left;
margin-top:10px;
margin-right:25px;
margin-bottom:10px;
border: 1px dotted;
padding:5px;
}
</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>
<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 class="third-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>
<footer class="main-footer">
<p>© 2014 Example Layout </p>
</footer>
</div>
</body>
</html>