Dividing div into 3 equal parts

I have this example that I play with. I would like to learn how to place another div between green and red that would also be 33% of wrapper with. This is my example https://jsfiddle.net/5xphhmej/1/

Also my wrapper keeps collapsing so only way to not have it collapsed was to add div on the bottom and clear it but I don’t really understand it why that works.

Also if there is better way to divide wrapper would love to know. For my purposes example I have works fine and it also adapts to size of my browser(adaptive?)


1 Like

I should have commented out some rules…this is updated fiddle…https://jsfiddle.net/5xphhmej/3/

For the collapsing situation, you need to contain your floats. This is normal behavior - http://www.sitepoint.com/clearing-floats-overview-different-clearfix-methods/.

I floated them all left…that worked well…I also cleared up my css a little…

Why is it when I change width of wrapper to 400px right div moving below?

Because the width of each block is 132 px + 2px for the borders making 134. Then 3 x 134 = 402px, which is wider than the space (400px) available, so the last block cannot float to the top and must stay beneath.

1 Like

Hi there Stribor45,

here is an alternative method for you to try…


untitled document body { background-color:#f0f0f0; } #page-wrap { display:table; width:90%; border:1px solid #999; border-radius:10px; border-spacing:10px; margin:auto; background-color:#fff; box-shadow:6px 6px 6px #999; } #page-wrap div { display:table-cell; width:33.33%; padding:2%; border:1px solid #999; border-radius:10px; background-image:linear-gradient(to bottom,#fff,#ddd); box-shadow:inset 0 0 10px #999; font-size:1.5vw; word-wrap:break-word; color:#666; } @media screen and (max-width:800px) { #page-wrap div { font-size:2.0vw; } } @media screen and (max-width:480px) { #page-wrap div { font-size:2.5vw; } }

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultricies sollicitudin nisi, ut molestie felis adipiscing sit amet. Sed auctor vehicula commodo.



how would i handle images or other elements inside these divs so they are responsive as well?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.