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

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

Jolanta Malinowska
Jolanta Malinowska
2,782 Points
Posted by Jolanta Malinowska
Jolanta Malinowska
2,782 Points

Float & width

#primary {
    width: 50%;
    float: left;
  }
#secondary {
    width: 40%;
    float: right;
  }

If we skip css for #secondary, "float: left" using in #primary has influence on content #secondary (it will be on the right side). But if we add "width: 40%" in #secondary{}, content will be in a new line! Why? Why I have to add "float: right"?

Edit: ADDED HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JM | website</title>  
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400,400italic,700,700italic,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="css/responsive.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>JM</h1>
        <h2>Title</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html">O mnie</a></li>
          <li><a href="contact.html" class="selected">Kontakt</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section id="primary">
        <h3>Lokalizacja</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.</p>
        <p>Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</p> 
      </section>  
      <section id="secondary">
        <h3>Kontakt</h3>
        <ul id="contact-info">
          <li><img src="img/phone.png" alt="Ikona telefonu"><a href="tel:+48987789987">+48 987-789-987</a></li>
          <li><img src="img/mail.png" alt="Ikona emaila"><a href="mailto:abc@example.com">abc@example.com</a></li>
          <li><img src="img/twitter.png" alt="Ikona Twittera"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>
      <footer>
        <a href="http://facebook.pl/abc"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
        <a href="http://twitter.com/nickpettit"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <p>&copy; JM 2016 </p>
      </footer>
    </div>
  </body>
</html>
davidschreiter
davidschreiter
15,005 Points

If secondary is a div or some other block element it will always be on it's own line. If you set it's display to inline-block then it should work.

1 Answer

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

As David said in his comment, if it is a block element like a div (that is, by default display:block) it will take up full width. Elements that are inline or inline-block will flow around a floated element, or stack up on the same row. A block element won't stay on the same row as the floated element unless you float it (this actually makes it inline-block too).

Jolanta Malinowska
Jolanta Malinowska
2,782 Points
Jolanta Malinowska
Jolanta Malinowska
2,782 Points

  • I tried to test it. I removed <div id="wrapper">, but still I have new line if I only write #secondary {width: 40%;}. It's because of the <body> (<body> is display: block)?

  • David S., you mentioned about inline-block. I tried: 

#primary {
    width: 50%;
    display: inline-block;
  }
#secondary {
    width: 40%;
  }

I also tried to add "display: inline-block" to #wrapper{}. Still #secondary {width: 40%;} needs float:right.

  • I found this http://www.w3schools.com/css/css_display_visibility.asp . The <section> is BLOCK element, so #primary and #secondary are block elements. Why sometimes they can be on the same line (e.g. when we skip css for #secondary).

  • The more I think that I am more confused.

David Bath
David Bath
25,940 Points
David Bath
David Bath
25,940 Points

Indeed, floating is a confusing topic. I'm a bit confused myself by what we're seeing - I tried it myself and it's strange. It seems like when you comment out the styles for #secondary, the #secondary section is taking up the full width, as I'd expect, but the floated #primary section floats to the left of the contents of #secondary, not to the left of the section itself. When you set the width of #secondary to 40%, then its contents cannot fit to the right of the floated #primary, so it wraps to the next line. Strange behavior.

But you need to be aware that in any case that a block element won't sit on the same line as another element, even if you specify a width of 40%. Think of it this way - a block element has an implied line break before and after it. If you need elements to be positioned next to each other you can specify widths for them and then either declare them inline-block or float them. Or use flex-box! But that's another big topic.

p.s., what I like to do in situations like this is to give each section a different colored border so that I can see the actual boundaries of each container as I play with the different attributes. It might not appear the way you imagine!