In the markup below, without altering the code, I’m trying to get the “box ad” element to span the entire width of the container element without effecting the “box text” elements.
When I add “display:table-row” to the “box ad” element, it does span that div across the full width, however, the sibling boxes get pushed to the right as if they were part of the same row.
I want those boxes to act as if they were on the next row.
<div class="pre-footer">
<div class="box ad">This should span the entire width</div>
<!--the next set of divs should be equally spaced across the container width-->
<div class="box text">text box</div>
<div class="box text">text box</div>
<div class="box text">text box</div>
<div class="box text">text box</div>
</div>
Yes as others have said I don’t think there’s a way to do this nicely without changing the html or absolutely positioning the first row and removing it from the flow.
Without changing the html you could use inline-block and the negative margin/padding trick to get equal boxes although this technique means you can’t have in-page links in those elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style tpe="text/css">
/* not working in ie8 properly */
.pre-footer {
clear:both;
position:relative;
overflow:hidden;
display:table;
width:100%;
white-space:nowrap;
}
.pre-footer .box {
display:inline-block;
white-space:normal;
width:22%;
padding:15px 1% 1015px;
text-align:left;
border:1px solid #ccc;
margin:0 1% -1000px 0;
background:#ccc;
vertical-align:top;
}
* html .pre-footer .box{display:inline;width:21.5%}
*+html .pre-footer .box{display:inline;width:21.5%}
.box:last-child {margin-right:0;}
.pre-footer .ad {
background:#fff;
border:1px solid #ccc;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
margin:10px 0;
float:none;
width:auto!important;
display:block!important;
padding:15px 1% 15px;
}
</style>
</head>
<body>
<div class="pre-footer">
<div class="box ad">This should span the entire width</div>
<!--the next set of divs should be equally spaced across the container width-->
<div class="box text">text box lorem ipsum dolor sit amet text box lorem ipsum dolor sit amet dolor sit amet text box lorem ipsum dolor sit amet </div>
<div class="box text">text box</div>
<div class="box text">text box</div>
<div class="box text ">text box</div>
</div>
</body>
</html>
You can’t really do the round corners either using that example so all in all not much use really
I think the gotcha that first bit you was the colspan. There does not seem to be any css equivalent. So the top row’s single cell aligned itself with the first cell of the second row. My solution is very much like dresden_phoenix’s, except that I saw he rounded the corners, and I didn’t want to look like a copy-cat, so I removed border-radius from mine.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8"
http-equiv="Content-Type" />
<title>
test doc
</title>
<style type="text/css">
/*<![CDATA[*/
.pre-footer {
border: 1px solid black;
margin: 0 auto;
text-align: center;
width: 90%;
}
.row {
border-spacing: 10px;
display: table;
width: 100%;
}
.text {
border: 1px solid black;
display: table-cell;
vertical-align: middle;
width: 25%;
}
/*]]>*/
</style>
</head>
<body>
<div class="pre-footer">
<div class="ad">
<p>
This should span the entire width
</p>
</div>
<div class="row">
<div class="text">
<p>
text box
</p>
</div>
<div class="text">
<p>
text box
</p>
</div>
<div class="text">
<p>
text box
<br />
with multiple lines
<br />
of text
</p>
</div>
<div class="text">
<p>
text box
</p>
</div>
</div>
</div>
</body>
</html>
Next time, I won’t keep leaving the keyboard to check on the ballgame. Maybe d_p will look like he’s copying me.
well the first problem is you are still think “tables” design wise, IMHO.
the second problem , should you continue to desire said aesthetic strategy and not mind the fact that older IE does not support display:table is to actually use extra elements. In a table you would not have a TD as a SIBLING of a TR… would you? well the same issue here.
Once you realize this, here are a myriad of slick ways in which to code your display:table-row ( or actually it may become unnecessary to do so at all) , here is ONE example.
