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
Kayla Davis
4,668 PointsCan't get a float layout to behave
Working with a page based off the codes from How To Make A Website, having a hard time getting my layout and design to behave the way I want it to. Based on floats and columns. Went back and reviewed the Float Layouts videos, but didn't really find an answer.
Here's a public link to my workspace: http://port-80-z18k8a46bj.treehouse-app.com/
Issue #1: When the columns stack below viewport width of 580px, the primary column leaks up behind the header, and I'm not sure how to make it start below the header where the content begins.
Issue #2: Getting the picture and the name portions of the logo to be centered and stack cleanly when the viewport width is below 580px.
Advice?
Thanks!
CSS:
@media screen and (max-width: 580px) {
/***
Mobile Layout
***/
#primary {
width: 100%;
padding: 1%;
background-color: rgba(255,255,255,0.5);
border-radius: 10px;
}
#secondary {
width: 100%;
padding: 1%;
background-color: rgba(255,255,255,0.5);
border-radius: 10px;
}
/***
Portfolio Layout 2 Across
***/
#gallery li {
width: 45%;
}
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
@media screen and (min-width: 580px) {
/***
Two Column Layout -- Fullscreen
***/
#primary {
width: 50%;
float: left;
padding: 1%;
background-color: rgba(255,255,255,0.5);
border-radius: 10px;
}
#secondary {
width: 45%;
float: right;
padding: 1%;
background-color: rgba(255,255,255,0.5);
border-radius: 10px;
}
nav {
font-size: 1.125em;
margin-right: 5%;
text-align: right;
}
.bottomnav {
text-align: center;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 0.825em;
margin-bottom: 20px;
}
header {
border-bottom: 5px solid rgba(0,0,0,0.5);
margin-bottom: 60px;
}
/***
Portfolio Layout 2 Across
***/
#gallery li {
width: 45%;
}
.profile-photo {
float: left;
margin: 0 5% 80px 0;
}
}
/***
2 x 5 = 10% margins
100% - 10 = 90%
90% / 2 = 45%
3 x 5 = 15% margins
100% - 15 = 85%
/3 = 28.3333%
4 x 5 = 20% margins
100 - 20 = 80
80/4 = 20%
***/
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf=8">
<title>Kayla Davis | About Kayla</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header id="top">
<a id="logo" href="index.html">
<img src="img/Kayla.png" alt="Kayla Davis" class="header-photo">
<h1 class="logotext"s>Kayla Davis | Freelancer</h1>
</a>
<nav>
<ul>
<li><a href="webdesign.html">Web Design</a></li>
<li><a href="fineart.html">Fine Art</a></li>
<li><a href="photography.html">Photography</a></li>
<li><a href="business.html">Business</a></li>
</ul>
</nav>
</header>
<div id="wrapper">
<section id="primary">
<h3>Hello,</h3>
<p>Paragraphical introduction about myself being a boss.</p>
<p>Itemized overview of general skills.</p>
<p class="hire"><a href="contact.html" class="hirelink">Hire Kayla</a></p>
</section>
<section id="secondary">
<h3>Mixed Portfolio</h3>
<ul id="gallery">
<li>
<a href="/img/pic1.jpg">
<img src="/img/pic1.jpg" alt="">
<p>Picture 2</p></a>
</li>
<li>
<a href="/img/pic2.jpg">
<img src="/img/pic2.jpg" alt="">
<p>Picture 1</p></a>
</li>
<li>
<a href="/img/pic3.jpg">
<img src="/img/pic3.jpg" alt="">
<p>Picture 4</p></a>
</li>
<li>
<a href="/img/pic4.jpg">
<img src="/img/pic4.jpg" alt="">
<p>Picture 2</p></a>
</li>
<li>
<a href="/img/pic5.jpg">
<img src="/img/pic5.jpg" alt="">
<p>Picture 2</p></a>
</li>
<li>
<a href="/img/pic6.jpg">
<img src="/img/pic6.jpg" alt="">
<p>Picture 2</p></a>
</li>
</ul>
<div style="clear: both;"></div>
</section>
<footer>
<nav class="bottomnav">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="">Web Design</a></li>
<li><a href="">Fine Art</a></li>
<li><a href="">Photography</a></li>
<li><a href="">Business</a></li>
<li><a href="#top">Top of Page</a></li>
</ul>
</nav>
<p>All content and images © 2014 Kayla Davis</p>
</footer>
</div>
</body>
</html>
2 Answers
Jon Benson
12,168 PointsKayla,
Did you try to write in some padding to the body element in your media query? It could add the extra pixels (ems) you need when you go to smaller devices.
Your site is pretty amazingly responsive! I would think some negative margin might help center the logo and name parts, by pulling them over. You could add in the same media query.
All the best! Jon
Jon Benson
12,168 PointsHi Kayla,
I would have to look at your code to help. Check out the Markdown Cheatsheet below, and then put up your CSS. And always double check for the missing semi-colons, those things always get me.
All the best,
Jon
Kayla Davis
4,668 PointsAdded
Kayla Davis
4,668 PointsKayla Davis
4,668 PointsThanks a bunch! Adding a margin to the top of my primary column and also fixing the width of the header to a slightly smaller size than the set margin worked great. Thanks for the suggestion!
Negative margins didn't work great on the picture and header, but adding an extra query to disappear the picture at ultra narrow widths fixed the overlap at that level.
Thanks a ton for helping!