Welcome to WebmasterWorld Guest from 3.233.226.151

Forum Moderators: not2easy

Message Too Old, No Replies

Getting 3 floated DIVs to take up 100% of container

     
6:00 am on Mar 8, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 119


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?
10:07 am on Mar 8, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there csdude55,
here is an example with which you may like to play around...



<!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>


birdbrain
6:18 pm on Mar 8, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 119


Hmm, that's cool, but is there not a way to do it without incorporating tables? I'm finally rebuilding my site without using tables, and if I have to use them in the CSS then it feels like I'm defeating the purpose! LOL
7:27 pm on Mar 8, 2018 (gmt 0)

Senior Member from GB 

joined:Oct 2, 2003
posts: 1019
votes: 39


Hi there csdude55,
please do not confuse the CSS "display: table" attribute
with the HTML "table element". :(

The former is a legitimate and well used display method
whereas the latter is the semantic element for displaying
tabular data. ;)

I would not have prepared it for you if was anything other
than kosher. :)

I would suggest that you spend a little more time studying
CSS methodology and you really should stop using inline
styling, it is a very bad habit.

Use internal styling only whist coding a page, then on
completion transfer it to an external file.



birdbrain