Solved

CSS based liquid + fixed center 3 column layout.

Posted on 2008-06-17
13
367 Views
Last Modified: 2013-11-19
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
Comment
Question by:MeridianManagement
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
13 Comments
 
LVL 16

Expert Comment

by:rbudj
ID: 21803680
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
 
LVL 30

Expert Comment

by:Steggs
ID: 21803805
Greetings,

try this

#content {
  background: #fff;
  border: 1px solid #000;
  height: 500px;
  margin:0px 204px;
}
0
 
LVL 2

Author Comment

by:MeridianManagement
ID: 21805855
Actually, my apologies, Steggs was more correct. For anyone else having this problem make sure you check that your width is empty.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Expert Comment

by:Steggs
ID: 21806754
:D
0
 
LVL 30

Expert Comment

by:Steggs
ID: 21806912
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
 
LVL 2

Author Comment

by:MeridianManagement
ID: 21816000
Steggs, how do I reassign?
0
 
LVL 30

Expert Comment

by:Steggs
ID: 21816292
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
 
LVL 2

Author Comment

by:MeridianManagement
ID: 21816812
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
 
LVL 30

Expert Comment

by:Steggs
ID: 21816911
ok cool

ie6 or 7?

did u change anything else?

can u post all the html and css
0
 
LVL 2

Author Comment

by:MeridianManagement
ID: 21816931
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
 
LVL 30

Accepted Solution

by:
Steggs earned 500 total points
ID: 21816969
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
 
LVL 2

Author Closing Comment

by:MeridianManagement
ID: 31467961
You deserve 1000 points but I can only give you 500
0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

756 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question