Column width question

liunx

Guest
Just an old dog trying to learn new tricks. Been developing sites since the early 90's using tables. I plan to never use them again, and have even been changing the design for some clients for free, mostly as a learning tool.

I seem to have mastered some pretty complicated layouts, but am having trouble with a very simple one. I need a 2 column layout. The first column is 150px wide. The 2nd column needs to be the remainder of the screen, no matter the screen size. Also, either column could be the longest, but the right column should not overlap the left should it be longer.

I feel kind of stupit to ask what is probably a very simple question, but thanks for the help in advance.One way is to float the left div, then set the left margin of the right div to be greater than the left div's width, something like:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<META HTTP-EQUIV='Content-Type' CONTENT='text/html; charset=ISO-8859-1'>
<title>Untitled</title>
<style type="text/css">
body {
margin: 0;
padding: 10px;
}
.left {
float: left;
margin: 0;
padding: 5px;
border: solid black 1px;
width: 138px;
}
.right {
margin: 0 0 0 160px;
padding: 5px;
border: solid blue 1px;
}
</style>
</head>
<body>

<div class=left>
<p>This is a test. It is only a test. This is the left column.
This is a test. It is only a test. This is the left column.
This is a test. It is only a test. This is the left column.</p>
</div>

<div class=right>
<p>This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.</p>
<p>This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.
This is a test. It is only a test. This is the right column.</p>
</div>

</body>
</html>Thank you soooo much! Of course, I feel even sillier now seeing how simple it was. You wouldn't believe the time I've wasted experimenting. At least I've learned several unrelated things in the process.Originally posted by wamboid
Thank you soooo much! Of course, I feel even sillier now seeing how simple it was. You wouldn't believe the time I've wasted experimenting. At least I've learned several unrelated things in the process.
Yeah, I went through a number of abortive attempts before I came up with this technique when trying to come up with the 3-column, semi-fluid format I'm currently using on my personal site (<!-- w --><a class="postlink" href="http://www.charles-reace.com">www.charles-reace.com</a><!-- w -->).This must just be fate. I've been looking all over for the site of someone who's post I read last week - it was you! I don't really have time right now, but I've bookmarked your site. I've been into gaming since high school, especially wargaming, especially WWII. Problem is I've moved to a small town and have no gaming friends here. We'll have to talk later.

Now back on topic. I'm back at my day job now so I can't test it yet. Both of those divisions will have different backgrounds. I'm guessing the right side will need to be put first for the left side background to show up? I'm looking forward to getting home to finish this site up.
 
Back
Top