MeridianManagement
asked on
CSS based liquid + fixed center 3 column layout.
I'm trying to make a 3 column layout with CSS however, I want the left and right columns to remain fixed while the center takes up the rest of the space. However, when I made the left and right fixed, the center pushes down below them like it doesn't fit.
<html>
<head>
<title>Vimark Solutions</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 100%;
}
#leftcol {
background: #f00;
float: left;
width: 200px;
height: 500px;
}
#rightcol {
background: #f00;
float: right;
width: 200px;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 100%;
height: 500px;
border: 1px solid #000;
}
#footer {
background: #0f0;
clear: both;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
Greetings,
try this
#content {
background: #fff;
border: 1px solid #000;
height: 500px;
margin:0px 204px;
}
try this
#content {
background: #fff;
border: 1px solid #000;
height: 500px;
margin:0px 204px;
}
ASKER
Actually, my apologies, Steggs was more correct. For anyone else having this problem make sure you check that your width is empty.
:D
Im not being petty but some people might not check the other posts here... they will look straight at the accepted solution... I think you should get the answer reassigned ... give rbudj an assist
ASKER
Steggs, how do I reassign?
there should be a 'request attention' link at the top of this thread in your question... then just say what you want to do and they will deal with it
Cheers mate
Cheers mate
ASKER
Steggs, I have one more question related to this since the question is now re-opened. The change you recommended works great, but in Internet Explorer there is a little space between the left, center, and right columns, but everything else touches perfectly. Any ideas?
ok cool
ie6 or 7?
did u change anything else?
can u post all the html and css
ie6 or 7?
did u change anything else?
can u post all the html and css
ASKER
Remember, firefox is reading this fine, but internet explorer is adding spaces.
<html>
<head>
<title>Vimark Solutions</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 10px;
font-family:Arial, Helvetica, sans-serif;
}
#header {
background: #fff;
padding: 10px;
border: 1px solid #000;
}
#navigation {
background: #fff;
border: 1px solid #000;
padding: 10px;
}
#leftcol {
background: #fff;
float: left;
width: 200px;
height: 500px;
border: 1px solid #000;
padding: 10px;
}
#rightcol {
background: #fff;
float: right;
width: 200px;
height: 500px;
border: 1px solid #000;
padding: 10px;
}
#content {
background: #fff;
float: none;
height: 500px;
border: 1px solid #000;
padding: 10px;
}
#footer {
background: #fff;
padding: 10px;
border: 1px solid #000;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="navigation">Navigation - <a href="property_form.php">Property Form</a> - <a href="investor_form.php">Investor Form</a> </div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
You deserve 1000 points but I can only give you 500
Open in new window