Three Col Source-Ordererd and Fluid!!

Discussion in 'CSS' started by wd_2k6, May 30, 2008.

0
  1. #1
    Hi basically what I want is..
    - Three columns, with the middle column coming first in source
    - The middle column also resizes with the page
    - While left and right columns are at fixed width

    So basically this does what I want:
    http://www.positioniseverything.net/sidepages/demo-213.html
    However I can't seem to set it so that only the middle column is resizable!!
     
    wd_2k6, May 30, 2008 IP
  2. Normac

    Normac Peon

    Messages:
    40
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Well if you put something like

    width: 200px;

    That should make the boxes a set width.
     
    Normac, May 30, 2008 IP
  3. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hmmmmmmm maybe it does but who wants that?
     
    wd_2k6, May 30, 2008 IP
  4. X.Homer.X

    X.Homer.X Peon

    Messages:
    290
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #4
    haha there are many questions about three columned layouts here, i always read them get them, then forget them. if you try a search it may yield some results, if not try google.

    I know float:left; works, but not sure if it works with a full page of boxes.
     
    X.Homer.X, May 30, 2008 IP
  5. Normac

    Normac Peon

    Messages:
    40
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    0
    #5

    Didn't you say you wanted the Left and right to be fixed? Unless I misunderstood you and you want them to be fixed in the sense that they will never change while resizing a window.
     
    Normac, May 30, 2008 IP
  6. Rohit007145

    Rohit007145 Peon

    Messages:
    28
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #6
    float will work. Set the main column to fill a container div, then put the sidebars in the div with floats. Fixing the width of the container and the main column should also fix the sidebar widths.
     
    Rohit007145, May 30, 2008 IP
  7. wd_2k6

    wd_2k6 Peon

    Messages:
    1,740
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Ok I had a go at this today, I nearly got there considering i'm **** with layouts, However i can't get the 100% to make way for the sidebars, well i've done it but the content inside is strecthed across 100% and is therefore partly hidden by the sidebars, check it out if you get a minute and give me some help please :(

    
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css" media="screen">
body { 
	min-width: 600px; 
	}
	
#wrap { 
	width: 100%;
	float:left; 
	margin-right: -200px; 
	}
	
#middle { 
	width: 100%;
	margin: 0 0 0 -200px;
	float: right;
	height: 400px;
	background-color:#00FF99;
	}
	
#left {
	float: left;
	background-color:#33CCCC;
	width: 200px;
	height: 400px;
	overflow: hidden;
	}
	
#right { 
	float: left; 
	background-color:#CCFFCC; 
	width: 200px; 
	height: 400px;
	}
	
p { 
	padding: 10px; 
	margin: 0; 
	font: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 18px; 
	letter-spacing: 1px; 
	line-height: 25px; 
	text-align: justify;
	}
</style>
</head>

<body>
<div id="wrap">
<div id="middle">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras ut sem. Nullam eu mauris venenatis magna tempus egestas. Aenean eu augue non sem convallis laoreet. Nulla mattis ligula et augue. Duis a orci. Maecenas lacus. Nunc porta elit sit amet mi eleifend bibendum. Sed lobortis sollicitudin nulla. Donec ligula. Sed ante leo, tempor non, molestie id, fermentum non, diam. Donec posuere. Integer posuere. Suspendisse potenti.Fusce magna quam, mollis vel, semper sed, varius sed, massa. Vestibulum bibendum pede non neque. Nulla facilisi. Nam diam. Morbi id nisl non metus aliquam ultricies. Nulla facilisi. Fusce molestie diam ut purus. Aenean sapien massa, tincidunt sit amet, lobortis eget, hendrerit nec, lectus. Aliquam turpis mauris, adipiscing eget, posuere a, convallis a, lorem. Etiam placerat sollicitudin leo.

</p>
</div>
<div id="left">
<p>This is the Left Sidebar fixed at 200px :)</p>
</div>
</div>
<div id="right">
<p>This is the right sidebar fixed at 200px :)</p>
</div>
</body>
</html>
    Code (markup):
    I guess i shouldn't be giving a width to either the #middle or #wrap div's but can't quite figure it out!!
     
    wd_2k6, Jun 4, 2008 IP