Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

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

Impossible 3 column CSS Layout? (Percent, Fixed, Percent) with 100% height

So, i have searched and search and come close but not exact... I am trying to create a 3 column CSS layout - where the left and right column are percentage and the middle column is a fixed pixel sized centered between the two percentage-based left and right columns. ALSO (this is the kicker) I need to have all of the columns adjust vertically to 100% height no matter what amount of content is in each column.  Is this an impossibility?  

Thanks
John
3col2.gif
0
OrbitMonkey
Asked:
OrbitMonkey
  • 4
  • 4
  • 2
1 Solution
 
alien109Commented:
0
 
alien109Commented:
the 100% height isn't there, but I'm sure it can be tweaked.
0
 
OrbitMonkeyAuthor Commented:
Well, yeah It's the 100% height that is really the issue - I've TRIED tweaking it to no avail.  I guess that's where i need help - with the tweaking part :)
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Thorn007Commented:
to get the height thing to work you need to specify the bottom position.
* {
margin:0;
padding:0;
}
#wrapper {
bottom:0;
display:block;
position:absolute;
top:0;
width:100%;
}
#left {
left:0;
position:absolute;
right:50%;
top:0;
z-index:5;
}
#left p {
padding-right:300px;
}
#center {
background:#00FF00 none repeat scroll 0 0;
bottom:0;
left:50%;
margin-left:-300px;
position:absolute;
top:0;
width:600px;
z-index:5;
}
#right {
left:50%;
margin:0 auto;
position:absolute;
right:0;
top:0;
z-index:1;
}
#right p {
padding-left:300px;
}

Open in new window

0
 
Thorn007Commented:
the above are tweaks to alien
0
 
OrbitMonkeyAuthor Commented:
Thorn007 - That is close!!  The center column is 100% height - but is there a way to have the left and right columns 100% height as well?  

Thanks
John
0
 
Thorn007Commented:
one sec
0
 
Thorn007Commented:

* {
margin:0;
padding:0;
}
#wrapper {
display:block;
position:absolute;
width:100%;
bottom:0;
top:0;
}
#left {
left:0;
position:absolute;
right:50%;
top:0;
z-index:5;
bottom:0;
background:#ccc;
}
#left p {
padding-right:300px;
}
#center {
background:#00FF00 none repeat scroll 0 0;
left:50%;
margin-left:-300px;
position:absolute;
top:0;
width:600px;
z-index:10;
bottom:0;
}
#right {
left:50%;
margin:0 auto;
position:absolute;
right:0;
top:0;
z-index:1;
bottom:0;
background:#00f;
}
#right p {
padding-left:300px;
}

Open in new window

0
 
OrbitMonkeyAuthor Commented:
You rock!  I pulled many a hair out on something that seems so simple!!!  Thank you, Thank you!  WOOT!
0
 
OrbitMonkeyAuthor Commented:
I'll mark Thorn's Answer as the correct one - but i'm posting the entire HTML code for future reference in case alien109 link goes away...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Template</title>
<style type="text/css">
 
* {
margin:0;
padding:0;
}
#wrapper {
display:block;
position:absolute;
width:100%;
bottom:0;
top:0;
}
#left {
left:0;
position:absolute;
right:50%;
top:0;
z-index:5;
bottom:0;
background:#ccc;
}
#left p {
padding-right:300px;
}
#center {
background:#00FF00 none repeat scroll 0 0;
left:50%;
margin-left:-300px;
position:absolute;
top:0;
width:600px;
z-index:10;
bottom:0;
}
#right {
left:50%;
margin:0 auto;
position:absolute;
right:0;
top:0;
z-index:1;
bottom:0;
background:#00f;
}
#right p {
padding-left:300px;
}
 
</style>
</head>
<body>
<div id="wrapper"><div id="left"><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolo&#9733;&#9733;r pede, tempus non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iac&#9733;&#9733;s nulla nec urna. Phasellus ultricies est et urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. &#9733;&#9733;Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. </p></div>
<div id="center"><p>
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolo&#9733;&#9733;r pede, tempus non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iac&#9733;&#9733;s nulla nec urna. Phasellus ultricies est et urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. &#9733;&#9733;Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. </p></div>
<div id="right"><p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed dolo&#9733;&#9733;r pede, tempus non, volutpat dignissim, cursus non, mauris. In tristique. Integer blandit, lorem eget tincidunt posuere, quam wisi fermentum elit, quis aliquam ante enim at nibh. Sed faucibus sem et mi. Donec iac&#9733;&#9733;s nulla nec urna. Phasellus ultricies est et urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. &#9733;&#9733;Etiam laoreet tortor ac nunc. Nulla risus nulla, suscipit eget, rhoncus et, nonummy sed, tortor. Aliquam erat volutpat. Etiam consequat imperdiet lorem. Nullam aliquet volutpat wisi. </p></div></div>
</body>
</html>

Open in new window

0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

  • 4
  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now