Ye Olde' 3 Column CSS Problem

Russinating · 21 Nov 2008 at 22:14

Well after following a guide, sourcing some template code and adapting it I'm now facing a problem. I've got 3 columns, small left, small right and remaining width variable middle. All looks fine until I shrink the width of my browser, then the middle grows in height (text basically pushed below the incoming right hand side div) and then after a bit more shrinking the middle div goes back to its normal height and this time the right div drops enough to be below the left hand column.

Code:

<body>

<div class="heading">
<img src="simages/logo.jpg">
</div>

<div class="left">
<div class="content"><h1>navigation</h1></div>
<div class="content"><h1>extra shizzle</h1></div>
</div>

<div class="right">
<div class="content"><h1>login</h1></div>
<div class="content"><h1>more extra shizzle</h1></div>
</div>

<div class="middle">
<div class="content"><h1>welcome</h1></div>
</div> 

<div class="footer">
<h1>footer</h1>
</div>

</body>

And the CSS:

Code:

.heading {
	text-align: center;
	height: 175px;
}
  
.left {
	text-align: right;
	border: 0px #888888 solid;
	float: left;
	width: 200px;
}

.middle {
	text-align: left;
	border: 0px #888888 solid;
	margin-left: 250px;
	margin-right: 250px;
}

.right {
	text-align: left;
	border: 0px #888888 solid;
	float: right;
	width: 200px;
	margin-left: 600px;
}

.footer {
  padding-top: 40px;
  text-align: center;
  clear: both;
}

.content {
	text-align: left;
	border: 1px #888888 solid;
	background-color: #ffffff;
	width: 100%;
	padding: 10px 15px 10px 15px;
	margin-bottom: 20px;
}

Much help appreciated

Russinating · 21 Nov 2008 at 22:23

Ok I've semi fixed it, was being caused by the margin-left on the right column. But the question now is how do I set it so that the middle has a min-width (and so essentially stops scaling down ones it reaches a certain point), or so that the right column stops forcing the middle to shrink once it reaches a certain place (that's what I was trying to achieve with the margin-left).

edit: Achieved this in Firefox/Chrome, now trying to find an IE hack with no success!

Ye Olde' 3 Column CSS Problem

Russinating

Russinating

Russinating

Russinating