[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 381
  • Last Modified:

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>

Open in new window

0
MeridianManagement
Asked:
MeridianManagement
  • 6
  • 5
1 Solution
 
rbudjCommented:
take the float:left out of the content css
<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;
 
  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>

Open in new window

0
 
Mark StegglesWeb DeveloperCommented:
Greetings,

try this

#content {
  background: #fff;
  border: 1px solid #000;
  height: 500px;
  margin:0px 204px;
}
0
 
MeridianManagementAuthor Commented:
Actually, my apologies, Steggs was more correct. For anyone else having this problem make sure you check that your width is empty.
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
Mark StegglesWeb DeveloperCommented:
:D
0
 
Mark StegglesWeb DeveloperCommented:
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
0
 
MeridianManagementAuthor Commented:
Steggs, how do I reassign?
0
 
Mark StegglesWeb DeveloperCommented:
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
0
 
MeridianManagementAuthor Commented:
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?
0
 
Mark StegglesWeb DeveloperCommented:
ok cool

ie6 or 7?

did u change anything else?

can u post all the html and css
0
 
MeridianManagementAuthor Commented:
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>

Open in new window

0
 
Mark StegglesWeb DeveloperCommented:
you need a doctype at the top of the page... this is vitally important... you should read up about doctypes
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

Open in new window

0
 
MeridianManagementAuthor Commented:
You deserve 1000 points but I can only give you 500
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 6
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now