Getting 3 floated DIVs to take up 100% of container

Here's another little tidbit that I'm struggling with.

<div style="padding: 10px; line-height: 40px">
 <div id="child_1" style="float: left; height: 40px; width: 32%; margin-right: 1%">
  <div style="float: left">
   <img src="$image_1">
  </div>
  <div style="float: left">
   Blah
  </div>
  <div style="clear: both"></div>
 </div>

<div id="child_2" style="float: left; height: 40px; width: 32%; margin-right: 1%">
  <div style="float: left">
   <img src="$image_2">
  </div>
  <div style="float: left">
   Blah 2
  </div>
  <div style="clear: both"></div>
 </div>

<div id="child_3" style="float: left; height: 40px; width: 32%">
  <div style="float: left; font-family: Times New Roman; font-size: 18pt">
   Blah blah
  </div>
  <div style="float: left">
   Blah 3
  </div>
  <div style="clear: both"></div>
 </div>
</div>

Notice that in child_1 and child_2 there's an image nested and floated to the left of the child element, but in child_3 there's text where the image was in the other two.

I'm having 3 problems:

1. I'm trying to get all of it vertically centered. I have a set height of 40px, and line-height in the container makes the text center, but I'm having to add margins to the images to get them right. Is there a better way to get all of them to center correctly?

2. For some reason that I can't guess, the text in the float: left of child_3 is positioning itself to the bottom of the container, instead of vertically centering like the rest of the text! So I'm having to add margins to this, too. Maybe because it's a different font? I don't know, that's a really weird one.

3. But I can get around all of that with margins, so it's OK... not great, just OK. So the reason for my posting is that I can't get the widths to line up to 100% of the container! You can see that the above percentages add up to 98% (32 + 1 + 32 + 1 + 32), which leaves more of a gap on the right than I want. But if I do 32 + 2 + 32 + 2 + 32 (which should add up to 100), the last element wraps to the next line.

I'm guessing maybe that's due to the padding: 10px in the container? But I need that bit of padding, so how do I get the child elements to all expand evenly to fit the container, along with a bit of a margin to the left and right of the middle child?

<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1"> <title>untitled document</title> <link rel="stylesheet" href="screen.css" media="screen"> <style media="screen"> body { background-color: #f0f0f0; font: 100% / 162% verdana, arial, helvetica, sans-serif; } #container { display: table; width: 100%; border-spacing: 0.625em; border: 1px solid #999; border-radius: 0.75em; background-color: #fff; box-sizing: border-box; box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.3 ); } .box { display: table-cell; width: 33.333%; padding: 2%; border: 1px solid #999; border-radius: 0.5em; box-sizing: border-box; background-color: #fee; box-shadow: inset 0 0 0.4em rgba( 96, 0, 0, 0.5 ); vertical-align: middle; } .box img { display: inline-block; width: 20%; height: auto; border: 1px solid #000; vertical-align: middle; } .box div { display: inline-block; margin: 0 1%; } .descript { font-family: 'times new roman', serif; font-size: 1.5em; } </style> </head> <body> <div id="container"> <div class="box"> <img src="http://placehold.it/324x200" width="324" height="200" alt="desc"> <div>Blah</div> </div> <div class="box"> <img src="http://placehold.it/324x200" width="324" height="200" alt="descr"> <div>Blah 2</div> </div> <div class="box"> <div class="descript">Blah blah</div> <div>Blah 3</div> </div> </div> </body> </html>

Getting 3 floated DIVs to take up 100% of container

csdude55

birdbrain

csdude55

birdbrain

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week