Forum Moderators: not2easy
Just wondering if its possible to do such layout in CSS:
3 columns, middle is static legs say 800px, and left and right sides just goes bigger or smaller according to screen resolution?
Maybe somebody knows the answer, some link would be nice :-)
Theres no easy answer...
If it was, i wouldnt post a question about...
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
html, body {margin:0px; padding:0px; background:#eee; font-family:verdana; font-size:12px; color:#000;}
/* The header and footer */
#footer {width:800px;display:block; height:70px; background:#08a; text-align:center; padding:5px;font-size:30px;margin:0 auto;}
#header {width:800px;display:block; height:70px; background:#08a; text-align:center; padding:5px;font-size:30px; margin:0 auto;}
/* This bit does all the work */
#container { background-color:#FFFFFF;width:400px; margin:0 auto;position:relative; display:block; border-left:200px solid #ffcc00; border-right:200px solid #a8a;}
#inner {display:block; margin-left:-200px; margin-right:-200px; padding:5px; }
#left {float:left; position:relative; width:200px; left:0px;}
#right {float:right; position:relative; width:190px; right:0px;}
#center {margin-left:200px; margin-right:200px; position:relative; display:block; height:1%; width:auto; background-color:#FFFFFF;}
.clear {clear:both;}
/* Just to extend each column */
#inner a:visited, a {color:#000; text-decoration:none; cursor:default;}
#inner a span {display:none;}
#inner a:active, #inner a:focus {color:#000; text-decoration:none; background:transparent; cursor:default;}
#inner a:active span, #inner a:focus span {display:block;}
a:visited, a {text-decoration:underline; cursor:pointer;}
a:hover {text-decoration:none; cursor:pointer;}
em {font-weight:bold;}
</style>
</head>
<body>
<div id="header">Header</div>
<div id="container">
<div id="inner">
<div id="left" style="display:block; "><a href="#"><em>CLICK</em> here to make the left column the longesthere to make the left column the longesthere to make the left column the longesthere to make the left column the longesthere to make the left column the longest<span>this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column<br />this is the left column</span></a></div>
<div id="right" style="display:block "><a href="#"><em>CLICK</em> here to make the right column the longest<span>this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br />this is the right column<br /></span></a></div>
<div id="center"><a href="#"><em>CLICK</em> here to make the left col here to make the left col here to make the left col here to make the left col here to make the left column the longesthere to make the left column the longesthere to make the left column the longesthere to make the left column the longesthere to make the middle column the longest<span>this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br /></span></a></div>
<div class="clear"></div>
</div>
</div>
<div id="footer">Footer</div>
</body>
</html>
reason I ask is just out of curiosity.. if the center div is fixed at 800px and the screen res is 800x600 then the left and right would not be visible - are you possibly just asking how to center a div on top of a background effect? ..
Other thing is yes I do believe what you're asking is possible, but there is no links.. I found one test case which meant that the center column was positioned absolutely which of course means that if there is a footer it can't always appear below the longest column.. However I've tweaked the code and have it working to included the "any column longest" scenario
so before I go writing unnecessary explanations about the various solutions perhaps you'd could clarify that you want actual text content in the three columns, if there is need for a footer below any/all three columns and if there is always going to be a constant "longest" column..
gotta go out for a while just now but will try to explain better later
thanks
Suzy
[edited by: SuzyUK at 12:36 pm (utc) on Mar. 8, 2007]
hellboy give me a start and Suzys tips got it working :-)
Ty!
