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
Craig Garrity
23,692 PointsTwo columns not aligned on contact page
Hi all, i'm stuck on this page, my two columns are not positioned correctly on my contact page, the second column (right hand) sits to the right hand side, but below the first column in desktop view, not aligned alongside as per the video. I've looked through other posts on this matter but unable to find anything so far. I'm thinking it's a user error on my part somewhere and have looked at my code but unable to spot the error, I'm sure fresh and experienced eyes will help me out here!
My HTML with two sections "primary" and "secondary"
<div id="wrapper">
<section id="primary">
<h3>General Information</h3>
<p>I am currently available for new design projects</p>
<p>Please use phone for urgent enquiries. Twitter and email are the best ways to reach me.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-6425">555-6425</a>
<li class="mail"><a href="mailto:">email</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=">twitter</a>
</ul>
</section>
This is my CSS with two targeted IDs.
@media screen and (min-width: 480px) {
/******************************
TWO COLUMN LAYOUT
*******************************/
#primary {
width: 50%;
}
#secondary {
width: 40%;
float: right;
}
/******************************
PAGE: PORTFOLIO
*******************************/
#gallery li {
width: 28.3333%;
}
#gallery li:nth-child(3n + 1) {
clear: left;
}
}
Many thanks for any help.
3 Answers
Jordan Littell
10,227 PointsJust float the content in your columns to the left
#primary {
width: 50%;
float:left;
}
#secondary {
width: 40%;
float:left;
}
or you can do this as well:
#primary {
width: 50%;
float:left;
}
#secondary {
width: 40%;
float:right;
}
If you are shooting for a 3 column layout, I would go with the first configuration. Note that when you are floating elements on a page, you need to clear them if you plan to have content that won't be in a column layout (like a footer for instance). You can do this by grouping your columns in an element like <div class = "container"> then using the following CSS:
.container:after { style:table; content:""; clear:both; } Hope this helps
Adam Bennett
7,663 PointsI'm thinking you could also set the primary and secondary id's to display: inline-block; as well. That way they wouldn't take up a whole line by themselves and they would sit next to each other and you wouldn't have to float anything.
Craig Garrity
23,692 PointsThanks guys for your advice and pointers, appreciated.
Craig Garrity
23,692 PointsCraig Garrity
23,692 PointsApologies, I just spotted this as soon as I posted the problem. I missed the float: left from #primary, I was convinced I had knocked something out on the HTML that I missed the glaringly obvious. Time for bed!