Dynamic Stretch Div
I want to align 3 divs side by side. 2 of them have fixed width but the last one has to stretch the remaining area of the page. My container's width: 1000px. Fixed divs'widths are
Solution 1:
I feel like I'm serving as Google here, but check these out:
You'd want to set up your hypothetical like this:
div.container{
display: box;
box-orient: horizontal
}
div.containerdiv.child {
width: 200px;
}
div.containerdiv.child:nth-child(3) {
box-flex: 1;
}
Voila, that should do exactly what you're looking for. However, you'll need to use the vendor specific prefixes/properties to implement this as it's in experimental implementation in everything except IE10.
Solution 2:
Edit: I've updated my example here using nth-child selectors to determine what should be done with the "auto-expanding" div by predicting the handful of places it can occur.
If you float a fixed-width div either side of a div with no width, the latter div will expand automatically.
Getting it to work for your different circumstances is as simple as changing the float values or re-arranging your markup.
Solution 3:
<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"><head></head><body><divstyle="width:1000px; "><divid="divA"style="width: 200px; float: left; background-color: blue;">a</div><divid="divB"style="float: left; width:600px; background-color: yellow;">b</div><divid="divC"style="width: 200px; float: left; background-color: red;">c</div></div><script>if(document.getElementById("divA") == null && document.getElementById("divC") == null) { document.getElementById("divB").style.width="1000"}
elseif (document.getElementById("divA") == null || document.getElementById("divC") == null) { document.getElementById("divB").style.width="800"}
</script></body><html>
Post a Comment for "Dynamic Stretch Div"