Forum Moderators: not2easy
I had an idea for a layout that I thought I could do with an appropriate combination of floats, clears, etc, but it seems not. Does anybody think it is possible?
Basically I wish to create a two column layout with the main DIV of a document (there is a side menu bar and header which I have already taken care of.
I would like the two columns to be split evenly: 50% of the width of the main DIV, stretching with the browser width. What I would like to happen though, is for one of the two columns (I don't mind which) suddenly to jump below the other when the browser is narrowed beyonf a critical width (such that the text lines in each column would have to wrap.
I thought using floats, display block and   to prevent line wraps might do it, but the solution I came up with worked in IE but not in Netscape.
Any ideas? Is it possible to do it cleanly?
thanks,
Michael
It is possible...
Say that you have two columns, both are 300px wide. If you float both left, and set the width, they will wrap when the inner window width is less than 600px.
#divone, #divtwo {
width: 300px;
float: left;
}
<div id="divone"></div>
<div id="divtwo"></div>
Michael
SN
I try to avoid Pixel-measurements in my divs, so all other em/relative sizes will keep working.
Still, this "split the column roughly at 50% into two divs and make the first div a float left" seems to work quite good (1) without any widths and (2) with %-widths.
Unfortunately it is only possible to make a one/two column layout, since further splitting up of the column brings the floats in a "disorder"...
...still experimenting....
Thanks,
SN
<head>
<style>
#divone, #divtwo {
width: 50%;
float: left;
border: 1px solid #000;
}
#matchstick {
width: 300px;
height:1px;
}
border: 1px solid blue;}
</style>
</head>
<body>
<div id="divone"><div id="matchstick"></div>Content in left</div>
<div id="divtwo"><div id="matchstick"></div>Content in right</div>
</body>
Shawn
Hmm doesn't CSS2 have features for min and max sizes? I'd sure love to see those implemented.
I'd also love to see right work properly so you could anchor. Often I'd like to have a fixed margin and percantage body width, I'd like to do something like left:XX%;right:XXpx
pity that right doesn'T seem to work that way in CSS :(
SN
Maybe I don't understand what you want, but I don't see any problem. Sure you can have % width and fixed px margins, or fixed px right margin and % left margin.
Shawn
