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

CSS How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Posted by Erica Erf
Erica Erf
503 Points

Two 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
Tobias Bjerrome Ahlin
9,742 Points
Tobias Bjerrome Ahlin
Tobias Bjerrome Ahlin
9,742 Points

Hi 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>
Erica Erf
Erica Erf
503 Points

Hi Tobias,

A belated THANK YOU for your simple answer that solved the problem! I now have a clean two-column page.

Many thanks!! Erica

Nick Marsh
Nick Marsh
14,763 Points
Nick Marsh
Nick Marsh
14,763 Points

Are 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
Erica Erf
503 Points

Thanks, 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
Ognjen Jevremovic
13,028 Points
Ognjen Jevremovic
Ognjen Jevremovic
13,028 Points

Hello 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
Erica Erf
503 Points

Hi 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