2 replies [Last post]
mrclark62000
mrclark62000's picture
Offline
newbie
Last seen: 10 years 4 weeks ago
Timezone: GMT-5
Joined: 2010-10-02
Posts: 4
Points: 8

I am a CSS noob. Sorry if this is redundant of other answers--I did try to search the forum and the web before posting.

I'd like to do this without javascript if possible:

I am trying to create a layout that has two content columns. The left content column can be fixed width, but I would like the right column to behave differently, depending on screen resolution:
(1) At lower screen resolutions (eg 800x600), the right content column will drop below the left content column.
(2) At higher screen resolutions, the right content column will float to the right of the left content column.
In other words, I want the right column to have a minimum width, and if the screen resolution cannot accomodate that minimum width, then the right column should drop below the left. In either case, I would like for the right content column to take up all of the available screen width, whether it drops below the left column, or floats to the right of the left column. In my fantasy world, if the right column drops down, then I would like the left to expand to fill all available width. But, I think that might be asking too much.

I've played around with min-width for the right column, but whatever value I set it always drops below the left column and takes up 100% of available screen width. I realize that min-width does not constrain the maximum width. But, combining min-width and max-width for the right column also has not worked for me.

I'm having the same problem in both FF and IE.

Here is the simple code that I would like to eventually fill with content and paste into my actual working document:

CSS:

#leftcolumn {width:420px;float:left;border:3px solid red;}
#rightcolumn {min-width:400px;float:left;border:3px solid blue;}
#thirdcolumn {float:left;min-width:5%;height:200px;border:10px solid yellow;}

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
<link rel="stylesheet" type="text/css" href="newcss2.css" />
</head>
<body>
<div id="container">
<div id="leftcolumn"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta sollicitudin risus, non suscipit nibh molestie eget. Phasellus sit amet tortor nisl. Aenean eget arcu sem. Quisque vehicula porttitor rutrum. Curabitur sagittis feugiat eros, ut ornare nisi congue in. Ut at vestibulum dolor. Mauris porta molestie risus et viverra. Morbi sed ante nulla, sit amet fringilla felis. Cras pellentesque dictum ipsum, euismod tincidunt enim rhoncus vel. In semper enim nec odio cursus eu pellentesque orci hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
</p>
</div>
<div id="rightcolumn"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porta sollicitudin risus, non suscipit nibh molestie eget. Phasellus sit amet tortor nisl. Aenean eget arcu sem. Quisque vehicula porttitor rutrum. Curabitur sagittis feugiat eros, ut ornare nisi congue in. Ut at vestibulum dolor. Mauris porta molestie risus et viverra. Morbi sed ante nulla, sit amet fringilla felis. Cras pellentesque dictum ipsum, euismod tincidunt enim rhoncus vel. In semper enim nec odio cursus eu pellentesque orci hendrerit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
</p>
</div>
<div id="thirdcolumn"></div>
</div>
</body>
</html>

Any help will be greatly appreciated.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 6 years 6 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

For window sizes larger than

For window sizes larger than 800px you can use:

	#leftcolumn {width:420px;float:left;border:3px solid red;}
	#rightcolumn {overflow:hidden;border:3px solid blue;}

but for sizes smaller than that, you'll probably have to use media queries.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

mrclark62000
mrclark62000's picture
Offline
newbie
Last seen: 10 years 4 weeks ago
Timezone: GMT-5
Joined: 2010-10-02
Posts: 4
Points: 8

You rule Tyssen--that did it!

You rule Tyssen--that did it! Thanks!