SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    3 column layout with fixed content width

    Hi, i have been trying to adapt several 3 column layouts, that normally have a liquid content column in the middle and 2 fixed width columns on the sides, to a layout with 2 liquid columns left and right and a fixed width content column in the middle, that also has to be centered... with no luck anyone have and idea? link? thx in advance,

    ashley

  2. #2
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Theirs no way to have liquid left and right colums And a fixed width center colum that stays centered at different resolutions, without manipulating the DOM to resize the center colum.

    How about a 3 colum layout with fluid left and right colums, and the center colum fixed at 60%?

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <head>
    <title>Put A Title In This Thing!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
     
    html,body {margin:0;
    			 padding:0;
    	 background:gainsboro;}
    #container{width:100%;
    height:400px;
    		 min-hieght:400px;
    background-color:gainsboro;
    text-align:center;}
    #left{position:relative;
    	 width:20%;
    	 background-color:lightsteelblue;
    	 float: left;}
    #center{width:60%;
    background-color:white;
    float:left;}
    #right{position:relative;
    	 width:20%;
    	 background-color:lightsteelblue;
    	 float: right;}
    </style>
    </head>
    <body>
    <div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>
    </div>
    </body>
    </html>
    You could use a table, and do something like this, but it all ends up fluid either way.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <head>
    <title>Put A Title In This Thing!</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
     
    html,body {margin:0;
    			 padding:0;
    	 text-align:center;
    	 overflow:auto;
    	 background:gainsboro;}
    #container{margin:10px auto 0 auto;}
    #left{text-align:center;
    	 width:25%;
    	 background-color:lightsteelblue;}
    #center{width:300px;
    background-color:white;
    text-align:center;}
    #right{text-align:center;
    	 width:25%;
    	 background-color:lightsteelblue;}
    </style>
    </head>
    <body>
    <table id="container" cellspacing="0" border="1">
    <tr>
    	 <td id="left">Left</td>
    	 <td id="center">Center</td>
    	 <td id="right">Right</td>
    <tr>
    </table>
    </body>
    </html>
    Last edited by DocType; Mar 29, 2005 at 19:52.

  3. #3
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh thats really bad :/ maybe i am doing it all wrong. i am trying to implement the following layout: (provisional link) http://ic000016.host.inode.at/test/C_home_2%2Ejpg

    the content column is fixed at around 740px, and this area has to be centered. i have been trying to make it like if i used tables, but maybe i am doing it all wrong and should use a column layout. any suggestions?

    hmm.. maybe fluid center with a min-width hack... thx anyways

  4. #4
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm having a hard time understanding why people think a fluid layout is a bad thing.

    The way I see it, fluid is better.

    Once you learn to design your own sites, you'll realize that.

  5. #5
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    jeje.. the problem is i didnt design it i just have to implement what they give me fluid layout but fixed line length (in em) is what i say

    it probably could go for fluid but i have no idea how to implement the gradient to go all the way if it is fluid.



    this seams to be a solution for fixed width, still testing though, and no idea about different browsers, firefox and IE6 it does fine it seams:

    <html>
    <head>
    <title>3 column css Template - Left/Right Fluid - Center Fixed</title>

    <style type="text/css">
    html,body {padding: 0; margin: 0;}


    body {
    background-color:#cccccc;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    margin: 0; padding: 0;
    font-size: x-small; /* IE5 Win */
    voice-family: "\"}\"";
    voice-family: inherit;
    font-size: small;
    }

    html>body { /* be nice to Opera */
    font-size: small;
    }


    body {text-align: center; /* IE center */}

    #content {
    width: 760px;
    margin: 0 auto; /* compliant browser center */
    text-align: left; /* re align text */
    }

    .column {
    width: 50%;
    position: absolute;
    top: 0;
    text-align: left;
    }

    .wrapper {
    position:relative;
    background: #eee;
    border: 2px dotted #000;
    margin: 0;
    clear: both;
    width: 100%; /*ie requires this or height */
    }


    .header {height:100px;}
    .headerlf {background-color:#fdfdfd;}
    .headerce {background-color:red;}
    .headerri {background-color:


    .left {left: 0; overflow:hidden;}
    .right {right: 0; overflow:hidden;}

    #leftcol {margin-right: 380px;background: #eee; }
    #rightcol {margin-left: 380px; background: #ccc;}






    </style>

    </head>
    <body>





    <div class="left column">
    <div id="leftcol"><div class="header headerlf">test</div></div>
    </div> <!-- left column -->


    <div id="content">



    <div class="header"><h1>Header text here</h1></div> </div>

    <div class="right column">
    <div id="rightcol">
    asdfsdf

    </div>
    </div>

    </body>
    </html>

  6. #6
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ahh, and the designer wants the contentbox+the width of the graphic sticking out to be centered...
    Last edited by ash4stuff; Apr 13, 2005 at 03:10.

  7. #7
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do they want the graphic sticking out like that, or contained in the center div, and the whole deal centered?

    If the former, you could center the div, and position the graphic absolute.

    For a fluid layout, you'd more than likely have to float the image right in another container with a transparent background, and a greater width to allow the image to stick out, and also contain the center div in that container, and allow the text to wrap around the image.

    If the latter, you could simply float the image right in the div, and center it all.

  8. #8
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like this?

    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <head>
     <title>Centered Content With Image Sticking Out</title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
       
      * html,body {margin:0;
    			 padding:0;
    			 border:0;
    			 text-align:center;
    			 background:gainsboro;
    			 overflow:auto;}
     
     #header{width:100%;
    				height:100px;
    		 background:gray;
      }
     #navbar{position:relative;
    				top:66px;
    				height:30px;
      line-height:30px;
    				width:600px;
      margin:0 auto 0 auto;
    				background:darkgray;
      border:solid black 1px;}
     #outerwrap{position:absolute;
    	 top:100px;
    			left:0;
    	 width:100%;
    				   height:300px;
    				   background:#b22222;
    	 z-index:0;
    			border-top:solid black 1px;} 
     #innerwrap{position:relative;
    				   z-indext:1;
    	  width:600px;
    			 background:white;
    	  margin:0 auto 25px auto;
    			 text-align:left;
    					border-top:0;
    	  border-right:solid black 1px;
    	  border-bottom:solid black 1px;
    					border-left:solid black 1px;}
     
     #centerleft{position:relative;
    	  width:270px;
    	  background:white;
    	  float:left;
    	  margin:0 0 0 10px;
    					padding:10px 0 10px 0; /* Only IE Needs The Padding */
    	  padd\ing:0;} 
     #centerright{position:relative;
    	   width:250px;
    	   background:white;
    	   margin:0 10px 0 0;
    	   float:right;
    	   clear:right;
    	   padding:10px 0 10px 0;  /* Only IE Needs The Padding */
    	   padd\ing:0;} 
     #rightimage{position:relative;
    	  left:30px; /* IE Needs Less Left */
    	  lef\t:40px;
    					height:150px;
    					text-align:left;
    					width:300px;
    					background:lightsteelblue;
    	  float:right;}
     #clearer{height:10px; 
      width:100%; 
      clear:both;
      background:white;}
    
    </style>
    </head>
    <body>
      <div id="header">
    	
    	<div id="navbar">
    			Menu Bar Goes Here
    		   </div>
      </div>
    <div id="outerwrap"></div> 
    <div id="innerwrap">
    
      <div id="rightimage">
       Simulated Image Positioned Relative, and Well Hacked For IE
     </div>  
     <div id="centerleft">
     <p>
      Two colums in a container div, this colum of text is floated left, with margins set on the
    		 top, right, and left sides.  The colum to right is floated right.
     </p>
     <p>
      Two colums in a container div, this colum of text is floated left, with margins set on the
    		 top, right, and left sides.  The colum to right is floated right.
     </p>
     <p>
      Two colums in a container div, this colum of text is floated left, with margins set on the
    		 top, right, and left sides.  The colum to right is floated right.
     </p>
     <p>
      Two colums in a container div, this colum of text is floated left, with margins set on the
    		 top, right, and left sides.  The colum to right is floated right.
     </p>
     <p>
      Two colums in a container div, this colum of text is floated left, with margins set on the
    		 top, right, and left sides.  The colum to right is floated right.
     </p>
     </div>  
     
     <div id="centerright">
      <p>
      This colum of text is floated right, with margins set on the top, right, and left sides.
    		 The image above is positioned relative.
      </p>
     <p>
      This colum of text is floated right, with margins set on the top, right, and left sides.
    		 The image above is positioned relative.
      </p>
     <p>
      This colum of text is floated right, with margins set on the top, right, and left sides.
    		 The image above is positioned relative.
      </p>
     </div>
     
     <div id="clearer"></div>
    </div>
    </body>
    </html>

  9. #9
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thx doctype. i will have to play with ur last post a little and compare to what i have until now. my current layout works, although your solution seems to be a lot more cleaner. right now i am fighting trying to implement an accessible dropdown menu

    thx again ash

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by doctype
    Theirs no way to have liquid left and right colums And a fixed width center colum that stays centered at different resolutions, without manipulating the DOM to resize the center colum.
    This must be an illusion then

    http://www.pmob.co.uk/temp/3col-centrefixed.htm

    Don't know what use it will be though

  11. #11
    SitePoint Guru DocType's Avatar
    Join Date
    Feb 2005
    Posts
    827
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That one's not completely fluid Paul, it breaks at about 75%.

    Like you said, "Dont know what use it would be though".

    The way I see it, if it's set up as a fixed width, and you manipulate it so that it's fluid, then it's no longer fixed width.

    So why not just make it fluid from the get go, and save all the extra coding?

  12. #12
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    what does it mean that it breaks at 75? :/

    the problem is that i think in grid mode :/ i know i know. i grew up with tables
    the problem is I wouldnt know anyother way of setting the background colors of all the "sections" and them being liquid at the same time:

    1 row: light grey -- gradient gif background -- dark grey
    2.row: light grew -- white path bar -- dark grey
    3.row: red bar -- white box for content -- red bar

    and so on.
    i wouldnt know how to implement this using layout in post #8.
    and would have to divide the header in two columns for example?

    anyways, now everything breaks when i try and implement an accesible javascript/css dropdown menu

    u guys recommend instead of keeping that fixed width in the middle, that i make all three fluid, but trying to use a maximum width hack?

    thx, ash

  13. #13
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm.. a three column layout with a max-width in em would be ideal
    ill see if i can adapt a couple of templates i have

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ash4stuff
    what does it mean that it breaks at 75? :/
    I think doctype means that the centre content drops down in ie when the screen is at about 550px wide. However that can be fixed simply by giving ie an overflow:hidden on #column 1.

    hmm.. a three column layout with a max-width in em would be ideal
    I've lost track now

  15. #15
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm, this is how the work is going.

    maybe i am mixing things up a little, but until now, this has been the best result.
    but i dont manage to have IE display the drop down menu correctly but almost hehehe, after fighting a lot, at least the menu appears on top it hasnt been easy for me

    http://ic000016.host.inode.at/test/layout/alt/test.html

    any ideas?

    i am also open to any recommendations about the site in general, or the approach of how i am implementing it in CSS. but I am a very behind schedule hehe

    thx again everyone

  16. #16
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    If you are talking about the first menu item in the drop down where the background doesn't go all the way then you will need to add a class to that list item which i assume is the current item.

    Code:
    	  <li><a href="index.html">SERVICES</a> 
    		<ul>
    		  <li style="width:100%;text-align:center;font-weight:bold">Our Services</li>
    		  <li><a href="test2.html">Engineering & Economics</a></li>
    I've put the styles inline just to show but you should remove them to the stylesheet and give the list a class instead.

    You should also remove the other inline styles that you have in the page and put them in the stylesheet also.

    Other than that you seem to have got it working how you want .

    The drop down menu is quite heavy on code and the suckerfish menus would be a good alternative but obviously wouldn't have the timed delays that your menu does.

    When using floats there are a couple of bugs to be aware of and there is a section in the faq that you may want to read. One that might affect your layout is the double margin bug on the side of a float nearest the containers edge. the margin is doubled in IE in error. Adding display:inline to the float will fix it (see faq for a full explanation).

  17. #17
    SitePoint Member
    Join Date
    Mar 2005
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    know its been awhile for a replym but i wanted to thank you two for your help
    here is how its going so far: http://ashtree.xthought.org/svnwork/ic/current/
    and soon will be replacing: http://www.ic-group.org


  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,545
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Looking good


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •