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.container div.child {
width: 200px;
}
div.container div.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:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div style="width:1000px; ">
<div id="divA" style="width: 200px; float: left; background-color: blue;">a</div>
<div id="divB" style="float: left; width:600px; background-color: yellow;">b</div>
<div id="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"}
else if (document.getElementById("divA") == null || document.getElementById("divC") == null) { document.getElementById("divB").style.width="800"}
</script>
</body>
<html>
Post a Comment for "Dynamic Stretch DIV"