I have two columns, both the same width, like so:
.column {
float: left;
width: 392px;
margin-left: 5px;
border: 1px red solid;
}
This works fine when I have enough room in the browser to display
this. But when the browser window gets resized, the second column
jumps below the first column. I would like the second column to
stay put and for the user to have to scroll if that is the case.
I tried adding a clear: none, but that didn't work. From there, I
have no idea where to go... Am I using the wrong approach
altogether (as in, should I not be using float?)?
Robyn,
I'm guessing that by resizing you mean shrinking the browser window.
If that's the case and you'd rather have the user horizontal scroll
all you need to add is a min-width declaration to the top most style
(generally either html, body, or container - or some variant).
For example, if #container is my top most div then I would put:
#container {
min-width: 784px;
....other formating here....
}
.column {
...
clear: none; /* left here just in case you choose to make it
more fluid */
}
As you'll notice though, that makes the minimum width of the browser
window quite large. I would double check to see that your intended
audience is capable of viewing a site that wide. Otherwise consider
moving to a slightly more fluid width or a smaller width for the two
columns. Of course, you could always include a min-width in each
column if you choose to go with a more fluid layout.
HTH,
Mike Stickel
Screenflicker Developments
www.screenflicker.com
p: 403-923-7667
e: [EMAIL PROTECTED]
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
