CODEWITHSUNDEEP
htmlcss
Jordan
Jordan

Reputation: 9911

How do I make floated DIV's take up the horizontal space of their container?

This is what I'm talking about:

#row {
    border: solid blue;
    overflow: hidden;
}

.cell {
    float: left;
    width: 33.333%;
    height: 100%;
    border: solid pink;
    box-sizing: border-box;
}
<div id="row">
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui. Maecenas vitae nisl congue, ornare turpis in, malesuada sem. In eu eleifend nulla. Donec est tellus, tincidunt volutpat eleifend vel, pellentesque et leo. Maecenas purus justo, scelerisque blandit ultrices non, facilisis id diam. Sed gravida tincidunt nunc ut sollicitudin.
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
    </div>
    <div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui.        
    </div>
</div>

I wan the pink cells to fill up the horizontal vertical space of the row DIV. If i don't float them left they do this, but I need them to be uniformly sized across the row. This is a simplification of my actual code, but this is the problem I am facing.

Upvotes: 2

Views: 61

Answers (2)

Alex Char
Alex Char

Reputation: 33228

Use display: table-cell and remove float: left from elements with class .cell:

#row {
    border: solid blue;
    overflow: hidden;
}

.cell {
    display: table-cell;
    width: 33.333%;
    height: 100%;
    border: solid pink;
    box-sizing: border-box;
}
<div id="row">
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui. Maecenas vitae nisl congue, ornare turpis in, malesuada sem. In eu eleifend nulla. Donec est tellus, tincidunt volutpat eleifend vel, pellentesque et leo. Maecenas purus justo, scelerisque blandit ultrices non, facilisis id diam. Sed gravida tincidunt nunc ut sollicitudin.
    </div>
    <div class="cell">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. 
    </div>
    <div class="cell">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui.        
    </div>
</div>

Upvotes: 8

j08691
j08691

Reputation: 208022

Instead of floating, use display:table-cell instead:

#row {
  border: solid blue;
  overflow: hidden;
}
.cell {
  display: table-cell;
  width: 33.333%;
  height: 100%;
  border: solid pink;
  box-sizing: border-box;
}
<div id="row">
  <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui. Maecenas vitae
    nisl congue, ornare turpis in, malesuada sem. In eu eleifend nulla. Donec est tellus, tincidunt volutpat eleifend vel, pellentesque et leo. Maecenas purus justo, scelerisque blandit ultrices non, facilisis id diam. Sed gravida tincidunt nunc ut sollicitudin.</div>
  <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus.</div>
  <div class="cell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas efficitur tincidunt sapien, sed hendrerit metus pharetra et. Mauris nec turpis faucibus, mattis purus sed, tempus risus. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Phasellus rutrum luctus dapibus. Integer sed sodales sem, quis accumsan augue. Mauris non augue dignissim, vestibulum risus nec, convallis augue. Integer quis elit et nisl facilisis pellentesque sit amet at dui.</div>
</div>

Upvotes: 4

Related Questions