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 trialPhil White
Courses Plus Student 9,519 PointsProblem with text overflowing their containers and into my footer
Hi,
I followed the tutorial step by step and sure that i have done everything correct but when i minimize the window my text from .primary-content and .secondary-content overflows the footer and goes on further down the page...
How do i fix?
Phil White
Courses Plus Student 9,519 PointsYeah sure is there a better way of pasting it in here rather then traditional copy and paste?
Keith Kelly
21,326 PointsI think copy and paste would be the easiest way. Take a look at the markdown cheat sheet as well in order to get the proper formatting.
Phil White
Courses Plus Student 9,519 PointsWhere do i put the ``` so all my code is in the viewer
Keith Kelly
21,326 PointsYou can put the code in your comment. Just type the 3 backticks then paste your code on the next line after the backticks. Then you can close the code with 3 more backticks on the line after your code.
Phil White
Courses Plus Student 9,519 Points<!DOCTYPE html>
<html>
<head>
<title>Display Modes</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</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>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula vehicula malesuada. Nulla eget convallis erat, viverra ullamcorper nibh. Curabitur vitae neque adipiscing, vestibulum justo vitae, pretium neque. Aenean a volutpat sem. Morbi porta nisi leo, at fermentum eros pulvinar sit amet. Mauris adipiscing eget sem a lobortis. Sed consectetur enim nulla, sit amet posuere erat eleifend non. Pellentesque tempus tincidunt nisi, et accumsan libero mattis nec. Etiam auctor risus mi, ut molestie nisi lacinia vel. Vestibulum commodo dui sit amet sapien imperdiet, eget molestie dolor consectetur. Nam id velit quis urna posuere sodales eu ac dolor. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula vehicula malesuada. Nulla eget convallis erat, viverra ullamcorper nibh. Curabitur vitae neque adipiscing, vestibulum justo vitae, pretium neque. Aenean a volutpat sem. Morbi porta nisi leo, at fermentum eros pulvinar sit amet. Mauris adipiscing eget sem a lobortis. Sed consectetur enim nulla, sit amet posuere erat eleifend non. Pellentesque tempus tincidunt nisi, et accumsan libero mattis nec. Etiam auctor risus mi, ut molestie nisi lacinia vel. Vestibulum commodo dui sit amet sapien imperdiet, eget molestie dolor consectetur. Nam id velit quis urna posuere sodales eu ac dolor. </p>
</div>
<div class="secondary-content col">
<h3>Secondary Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula vehicula malesuada. Nulla eget convallis erat, viverra ullamcorper nibh. Curabitur vitae neque adipiscing, vestibulum justo vitae, pretium neque. Aenean a volutpat sem. Morbi porta nisi leo, at fermentum eros pulvinar sit amet. Mauris adipiscing eget sem a </p>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vehicula vehicula malesuada. Nulla eget convallis erat, viverra ullamcorper nibh. Curabitur vitae neque adipiscing, vestibulum justo vitae, pretium neque. Aenean a volutpat sem. Morbi porta nisi leo, at fermentum eros pulvinar sit amet. Mauris adipiscing eget sem a </p>
</div>
<footer class="main-footer">
<p>©2014 Example Layout</p>
</footer>
</div>
</body>
</html>
Phil White
Courses Plus Student 9,519 Points/** Page styles **/
body {
font: normal 1.1em/1.5 sans-serif;
color: #222;
background-color: #edeff0;
width: 90%;
margin: auto;
}
html,
body,
.main-wrapper,
.col {
height: 100%;
}
.main-wrapper {
width: 90%;
margin: auto;
}
* {
box-sizing: border-box;
}
/** Layout Element Colors **/
.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; }
/** Header, Banner and Footer Layout **/
.main-header {
padding: 20px;
display: table;
width: 100%;
min-height: 150px;
}
.main-logo,
.main-nav,
.main-nav li {
display: inline-block;
vertical-align: middle;
}
.main-logo,
.main-nav {
display: table-cell;
}
.main-logo,
.main-nav li {
border-radius: 5px;
}
.main-logo {
width: 120px;
min-height: 150px;
}
.main-nav {
padding-left: 50px;
}
.main-nav li {
margin-right: 10px;
}
.main-logo a,
.main-nav a {
color: white;
text-decoration: none;
display: block;
text-align: center;
padding: 10px 20px;
}
.main-footer {
text-align: center;
padding: 20px;
}
/** Column Layout **/
.col {
display: inline-block;
padding: 20px;
margin-right: -5px;
vertical-align: top;
}
.primary-content {
width: 60%;
}
.secondary-content {
width: 40%;
}
/** Media Quearies **/
@media (max-width: 760px) {
.main-logo,
.main-nav,
.main-nav li {
display: block;
width: initial;
margin: initial;
}
.main-nav {
padding-left: initial;
}
.main-nav li {
margin-top: 15px;
}
}
5 Answers
Hugo da Silva Ribas
7,666 PointsSame here guys.
Although i do belive there would still be a problem in Guils example also, since in the video he didn't really resized the browser to where the problem is.
So it didn't really show up anyway.
hugs,
Hugo
Placid Rodrigues
12,630 PointsI think Hugo da Silva Ribas is right here.
Dominick Triola
5,079 PointsI noticed this issue as well. It seems that if you don't have the "col" class at height: 100% then the overflow issue doesn't occur. But then you'll have some white space between your secondary column and your footer, and the footer won't be truly sticky if there's not enough content on the page to push it all the way to the bottom.
Placid Rodrigues
12,630 PointsIt seems that Dominick Triola and Hugo da Silva Ribas are right here. I request Guil Hernandez to kindly suggest regarding this issue.
Keith Kelly
21,326 PointsIn the video Gill adds a media query for the columns so that they stack properly on smaller devices. He does this by adding a .col after the .main-nav li and changing the height property back to initial. This allows the columns to stack properly and eliminates any overflow issues. The updated portion of the media query would look like this:
.main-logo,
.main-nav,
.main-nav li,
.col {
display: block;
height: initial;
width: initial;
margin: initial;
}
I tested this code in a workspace and it seems to work correctly.
Phil White
Courses Plus Student 9,519 PointsIve added in what you said but im still getting the same problem? Below is what i did...
@media (max-width: 760px) {
.main-logo,
.main-nav,
.main-nav li,
.col {
display: block;
height: initial;
width: initial;
margin: initial;
}
Keith Kelly
21,326 PointsSo when you refresh and resize the columns do not stack?
Phil White
Courses Plus Student 9,519 PointsNo it just overflows as before... could it be a problem with my html?
Keith Kelly
21,326 PointsIt sounds to me to be more of a css issue. I am slightly confused because I copied the html and css you posted into my own workspace and only made the change I posted and everything works as expected.
Phil White
Courses Plus Student 9,519 PointsOk, can you paste your css on here please and then ill try to use that?
Keith Kelly
21,326 PointsSure. Here is what I have:
/** Page styles **/
body {
font: normal 1.1em/1.5 sans-serif;
color: #222;
background-color: #edeff0;
width: 90%;
margin: auto;
}
html,
body,
.main-wrapper,
.col {
height: 100%;
}
.main-wrapper {
width: 90%;
margin: auto;
}
* {
box-sizing: border-box;
}
/** Layout Element Colors **/
.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; }
/** Header, Banner and Footer Layout **/
.main-header {
padding: 20px;
display: table;
width: 100%;
min-height: 150px;
}
.main-logo,
.main-nav,
.main-nav li {
display: inline-block;
vertical-align: middle;
}
.main-logo,
.main-nav {
display: table-cell;
}
.main-logo,
.main-nav li {
border-radius: 5px;
}
.main-logo {
width: 120px;
min-height: 150px;
}
.main-nav {
padding-left: 50px;
}
.main-nav li {
margin-right: 10px;
}
.main-logo a,
.main-nav a {
color: white;
text-decoration: none;
display: block;
text-align: center;
padding: 10px 20px;
}
.main-footer {
text-align: center;
padding: 20px;
}
/** Column Layout **/
.col {
display: inline-block;
padding: 20px;
margin-right: -5px;
vertical-align: top;
}
.primary-content {
width: 60%;
}
.secondary-content {
width: 40%;
}
/** Media Queries **/
@media (max-width: 760px) {
.main-logo,
.main-nav,
.main-nav li,
.col {
display: block;
height: initial;
width: initial;
margin: initial;
}
.main-nav {
padding-left: initial;
}
.main-nav li {
margin-top: 15px;
}
}
Phil White
Courses Plus Student 9,519 PointsI copied exactly what you put and having the same problem plus i just tried it in fire fox and ie on top of chrome and they are all the same...
Phil White
Courses Plus Student 9,519 PointsI just noticed that it is fine on full width and works fine at mobile width. its more at tablet width and higher that i have the problem. Might i need to change the
@media (max-width: 760px)
or add another media query?
Keith Kelly
21,326 PointsYou could either change your max-width or create another media query. I would probably add another media query to target tablet widths. That would give you more control over the layout. Sorry I didn't notice that I was reviewing the site on a smaller layout.
Phil White
Courses Plus Student 9,519 PointsOk so would i do this again
@media (max-width: 760px) {
.main-logo,
.main-nav,
.main-nav li,
.col {
display: block;
height: initial;
width: initial;
margin: initial;
}
and then change the amount of px? How many px would you suggest?
Chris Wiley
11,327 PointsDoesn't your opening line for media query need to be
@media only screen and (max-width: 760) {
? The 'only' is supposed to be optional but preferred, but I think the rest has to be in there.
Keith Kelly
21,326 PointsKeith Kelly
21,326 PointsCould you post your html and cs code so we can take a look?