To make container wrap elements with “float: left” (CSS)

Hey! How are you guys (girls?)?

I want to tell you a bit about ways to make container that can wrap included elements. Huh, you’ve already read about it in title? (:

I’m talking about next simple example:

<div style="background: red; padding: 5px;">
	<div style="background: green; float: left; padding: 5px;">First</div>
	<div style="background: yellow; float: left; padding: 5px;">Second</div>
</div>

Container will think that elements inside it don’t have height at all and look approximately like that:

It’s wrong behavior and we want to get something like that usually:

There are two ways how to avoid that:

1. we use additional block in the end of container to clear float

<div style="background: red; padding: 5px;">
	<div style="background: green; float: left; padding: 5px;">First</div>
	<div style="background: yellow; float: left; padding: 5px;">Second</div>
	<div style="clear: both;"></div>
</div>

2. … or the more convenient way is to add “overflow: hidden” to style of container

<div style="background: red; padding: 5px; overflow: hidden;">
	<div style="background: green; float: left; padding: 5px;">First</div>
	<div style="background: yellow; float: left; padding: 5px;">Second</div>
</div>

I found second way not so long time ago and it’s more beautiful at least for me. Do you know way to solve this somehow different? Let me know it’s interesting.

Note: And yes – I know that styles in pure html is very bad, but it’s easier to understand what’s going on instead of separated classes.

Goodbye.

Books to read

3 Comments

  1. StefanoV

    I noticed that it’s hard to find your website in google, i found it on 25th spot, you should get some quality backlinks to rank it in google and increase traffic. I had the same problem with my website, your should search in google for – insane google ranking boost – it helped me a lot

Leave a Reply

Your email address will not be published. Required fields are marked *