CSS layout problem

Question

If I have two 3in divs (a and b) and a 4in div (c). In a ten inch wide outer div. I want this layout

1234567890 # ruler
---------- # header
aaaccccbbb # the divs in question

But if that outer div becomes 8 inches I want this layout

12345678
--------
aaa  bbb
  cccc

Can that be done without JavaScript? I would do a-float:left b-float:right and c-margin:0 auto but then the elements overlap... (X is the overlap)

12345678
--------
aaXccXbb

Answer 1

var mydiv = document.getElementById("mydiv");
var curr_width = mydiv.style.width;

// Will likely need to do the pixel-inches conversion here.
if (curr_width >= 8in)
{
   mydiv.class = other_class
}

This is a general implementation idea, in Javascript.

Related article here.

-Brian J. Stinar-

Answer 2

First of all, I don't see how you measure the width of the divs in inches. Anyway, the solution would be to have the div marked as "aaaa" float left, the div marked "bbbb" float right and the div marked "cccc" float left with a margin 0 auto on it. Still, your question is a little bit confusing to me so here's a basic markup and css that you could test. Please note I didn't test this in the browser and it might not give the expected results. Still, it should give you some pointers:

<style>
    div#wrapper {
        width: 1000px;
    }
    div#wrapper .a, .c{
        width: 33%;
        height:50px;
        float: left;
        border: 1px solid #ccc;
        line-height: 50px;
        text-align: center;
    }
    div#wrapper .c {
        margin: 0 auto;
    }
    div#wrapper .b {
        float: right;
        width: 33%;
        height: 50px;
        border: 1px solid #ccc;
        line-height: 15px;
        text-align: center;
    }
</style>
<div id="wrapper">
    <div class="c">
        <p>cccccc</p>
    </div>
    <div class="a">
        <p>aaaaaa</p>
    </div>
    <div class="b">
        <p>bbbbbb</p>
    </div> 
</div>

Also, even if this or another solution works, it isn't ideal. IF you could give more details, I'm sure that there's a better option out there. Having div's moving around the page like this looks more like broken design to me, sorry to tell you that buddy.

Cheers!

Answer 3

    <style type="text/css">
        #container { max-width: 580px; }
        #container div { border: 1px solid #000; font-size: 50px; font-family: monospace; }
        #ruler, #header { white-space: nowrap; overflow: hidden; }
        #aaa { float: left; }
        #bbb { float: right; }
    </style>
    <style type="text/css" media="all and (max-width: 599px)">
        #cccc { float: left; }
    </style>
    <style type="text/css" media="all and (max-width: 600px)">
        #aaa, #bbb { text-align: center; }
        #cccc { float: none; clear: both; width: auto; text-align: center; margin: 0 auto; }
    </style>

    <div id="container">
        <div id="ruler">1 2 3 4 5 6 7 8 9 0</div>
        <div id="header">- - - - - - - - - -</div>
        <div id="aaa" class="content">a a a&nbsp;</div>
        <div id="bbb" class="content">&nbsp;b b b</div>
        <div id="cccc" class="content">c c c c</div>
    </div>

Media Queries to the rescue!

(Works great in FF3.6)

Answer 4

Float the "a" and "b" divs left and right respectively, and apply a 4-inch width to both of them. Then place the "c" div below them.

Answer 5

This is the solution you want. No javascript needed, just the magic of "overflow: hidden" which gives the center-div respect to the flow :) See the effect by making the output screen wider and smaller!

CSS solution