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 trialErica Erf
503 PointsTwo Column text display off
Here is the link to my Contact page: http://port-80-oj8yh3dbtj.treehouse-app.com/contact.html
I'm not sure how to show my contact.html and responsive.css pages so coding can be checked.... I appreciate your help!
3 Answers
Tobias Bjerrome Ahlin
9,742 PointsHi Erica! Are you referring to that:
If you'd like to follow me on Twitter, my username is @eeVakil.
is squeezed in between the two other columns? The issue is probably with the HTML, not the CSS.
You currently have this:
<section id="primary">
<h3>General Information</h3>
<p>I'm not currently looking for new design work but am available for speaking gigs. If you have any questions, please don't hesitate to contact me!</p>
<p> Please only use phone contact for urgent inquires. Otherewise, email is the best way to reach me.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact">
<li class="phone"> <a href="tel:224-223-5565"> 224-223-5565</a>
<li class="mail"> <a href="mailto:erica.erf@gmail.com"> erica.erf@gmail.com</a>
<li class="twitter"> <a href="http://twitter.com/intent/tweet? screen_name=eeVakil">@eeVakil</a>
</ul>
</section>
<p>
If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/eevakil">@eeVakil</a>.</p>
The last paragraph ("If you'd like to follow…") is outside both of the two sections. If you move it to the primary section (or to the footer), it should look OK:
<section id="primary">
<h3>General Information</h3>
<p>I'm not currently looking for new design work but am available for speaking gigs. If you have any questions, please don't hesitate to contact me!</p>
<p> Please only use phone contact for urgent inquires. Otherewise, email is the best way to reach me.</p>
<p>If you'd like to follow me on Twitter, my username is <a href="http://twitter.com/eevakil">@eeVakil</a>.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact">
<li class="phone"> <a href="tel:224-223-5565"> 224-223-5565</a>
<li class="mail"> <a href="mailto:erica.erf@gmail.com"> erica.erf@gmail.com</a>
<li class="twitter"> <a href="http://twitter.com/intent/tweet? screen_name=eeVakil">@eeVakil</a>
</ul>
</section>
Nick Marsh
14,763 PointsAre you talking about "If you'd like to follow me on Twitter, my username is @eeVakil."? Using the dev tools, it looks like you have two sections - primary and secondary which is giving you a two column layout. The text that is out of line isn't in either of these columns. If you move the text under the secondary section, it will be put in your second column. Hope this helps.
Erica Erf
503 PointsThanks, Nick... that's it in a nutshell! I had that line outside of the the section. Funny how it looks obvious once you know what the fix is :-)
Many thanks, Erica
Ognjen Jevremovic
13,028 PointsHello Erica. Welcome to the wonderful TreeHouse community. I hope you're enjoying the video lectures from the instructors. There's a plenty of material in here!
Anyways, I'm not 100% sure what are you trying to achieve. My guess is that
- You're having that extra paragraph tag in between section#primary and section#secondary that is causing the page to break
<section id="primary"></section>
<section id="secondary"></section>
<p></p>
So just by removing it, it should fix the the problem.
- You're trying to add a 3rd column to a webpage, so you'll have 2 section elements and a paragraph all side by side. If so, you'll need to adjust the widths of all 3 HTML elements, so when they're combined together they're equal to 100%. So for example:
section#primary,
section#secondary,
p {
float: left;
margin: 0;
}
section#primary {
width: 40%;
}
section#secondary,
p {
width: 30%;
}
You're trying to put the paragraph text, below the floated sections (on the left and right side) and make it wide as possible. If so, that would include a clearfix technique.
The paragraph should be used as a child of the first section element, instead of being it's sibling. For example:
<section id="primary">
<!-- Paste your paragraph here -->
</section>
<section id="secondary">
<!-- Or paste it here -->
</section>
<p></p> <!-- But remove it from here -->
Providing a your source code aswell as some more information about the problem, would definitely help to debug the code.
Keep on practicing and have fun!
Erica Erf
503 PointsHi Ognjen,
Thank you for your warm welcome... this is like learning a new language and you're right, it takes a lot of practice!! I moved the <p></p> line into the secondary section and that worked.
Thanks so much and hope to see you again :-)
Erica
Erica Erf
503 PointsErica Erf
503 PointsHi Tobias,
A belated THANK YOU for your simple answer that solved the problem! I now have a clean two-column page.
Many thanks!! Erica