|
|
Posted by asdf on 06/13/39 12:01
"Bazley" <jmp6789@hotmail.com> wrote in message
news:e06cf3dc-7a01-4ead-89ae-75c9b71b1b15@e25g2000prg.googlegroups.com...
> CSS is unbelievably unwieldy. All I want to do is have a page with
> three columns. The left and right columns should be fixed width and
> the central column should adjust its width to fill in the remaining
> space. Such a simple concept is, I believe, virtually impossible to
> code. If anyone can do it I would be very impressed.
Ok, here goes....
I've given the center column a background colour, and the two outer columns
a border so you can see how it fills the space. You need to play around with
margins and paddings to suit your application, but this should point you in
the general direction ok...
Two minute job:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>3 Column CSS layout</title>
<style type="text/css">
<!--
#leftcol, #rightcol {
width: 150px;
border: 1px solid #E0DFE3;
}
#leftcol {
float: left;
}
#rightcol {
float: right;
}
#centercol {
margin-left: 150px;
margin-right: 150px;
background-color: #E0DFE3;
border: 1px solid #E0DFE3;
}
-->
</style>
</head>
<body>
<div id="leftcol">Here's your left column </div>
<div id="rightcol">Here's the right column</div>
<div id="centercol">Here's the middle bit.</div>
</body>
</html>
Navigation:
[Reply to this message]
|