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 trialJolanta Malinowska
2,782 PointsFloat & 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>© JM 2016 </p>
</footer>
</div>
</body>
</html>
1 Answer
David Bath
25,940 PointsAs 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
2,782 PointsI 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
25,940 PointsIndeed, 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!
davidschreiter
15,005 Pointsdavidschreiter
15,005 PointsIf 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.