Forum Moderators: not2easy
Anyway, my situation is this: I have 3 elements in-line, each of variable width and would like the middle element to expand to fill the space between the left and right elements.
The middle element should expand up to the point where the right element (assuming all elements are lined up to the left) will be flush against the containing div for all three elements. There is a height restriction of 20px.
Having looked and looked my initial attempts of using spans or divs (display: inline) proved fruitless because inline does not allow you to set a width or height which is kind of what I was going for: the middle element to take up 100% of the left over space between the two others.
I just tried using tables relying on their tendency to shift cell widths to take up space but setting width: 100% didn't work out because it caused the height to nearly triple when the left and right were narrowed. If the width is not specified the left cell takes up all of the space bumping into the right cell. The middle cell practically gone.
The html is simple enough (in theory, I suppose) but I'm sure I'm also messing up the css, as well.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">.post_footer {
height: 20px;
width: 620px;
font-size: 12px;
}
.post_meta {
background: transparent url(../images/box_bg.png);
border: #bdb997 1px solid;
padding: 0 10px;
}
.footer_filler {
background: transparent url(../images/footer_filler_bg.png);
border: #bdb997 1px solid;
margin: 0 10px;
}
.footer_up {
background: transparent url(../images/box_bg.png);
border: #bdb997 1px solid;
}
.footer_up img {
vertical-align: bottom;
}
<div class="post_footer">
<span class="post_meta">
This is the left element.
</span>
<span class="footer_filler">I am not wide enough!</span>
<span class="footer_up">
<a href="#page-top" target="_self">Up<img src="images/uparrow.png" width="10" height="20" alt="" alight="right" /></a>
</span>
</div>
An additional note is that I'm using the 960 grid system.
Thanks ahead of time for an help. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en">
<head>
<title>test</title>
<style type="text/css">
.post_footer {
height: 20px;
width: 620px;
font-size: 12px;
overflow: hidden;
}
.post_meta {
border: #bdb997 1px solid;
float: left;
width: 120px;
}
.footer_filler {
border: #bdb997 1px solid;
}
.footer_up {
border: #bdb997 1px solid;
float: right;
width: 100px;
}
.footer_up img {
vertical-align: bottom;
}
</style>
</head>
<body>
<div class="post_footer">
<div class="post_meta">This is the left element.</div>
<div class="footer_up">Right Column</div>
<div class="footer_filler">I am not wide enough</div>
</div>
</body>
</html>
I just removed the images as I don't have them here. I used the floats for the left and right cols with a specific width so the the mid one will allocate the remaining space.
