SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Evangelist artcoder's Avatar
    Join Date
    Aug 2005
    Location
    Planet Earth
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    sourced ordered three-column layout

    Do anybody know how to accomplish a three-column layout with the following characteristics?

    1) The design (container of the three column) take up 100% width of browser.
    2) The left column is fixed width at say 240px;
    3) The right column is fixed width at 160xp;
    4) The middle column is fluid and takes up the remainder of the screen real estate.
    5) And here is the tricky part... The content of the middle column must come before the left and right content in source order.

    I have yet to find this layout. If you believe this is impossible, let me know too. Because I am curious to see how close to impossible this is.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Not impossible at all.
    HTML Code:
    <div id="content">Middle column with content</div>
    <div id="left">Left column</div>
    <div id="right">Right column</div>
    Code CSS:
    #content {
      margin:0 160px 0 240px;
    }
    #left, #right {
      position:absolute;
      top:0;
    }
    #left {
      left:0;
      width:240px;
    }
    #right{
      right:0;
      width:160px;
    }
    If you are going to want borders or padding in your columns, then you will need to adjust the margins in the container accordingly. And the container for these three is just the BODY. No need for a containing DIV.

  3. #3
    SitePoint Evangelist artcoder's Avatar
    Join Date
    Aug 2005
    Location
    Planet Earth
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Gee, thanks. That's "absolutely" right (pun intended).

    I was so busy thinking about "floats", I forgot all about absolute positioning.

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually it can be done with floats and negative margins.

    Hang on a sec and I'll show you.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And here we go:

    HTML Code:
    <!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>
    	<title>3 Column Content First Float Based Layout</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<meta http-equiv="imagetoolbar" content="no" />
    	<style type="text/css">
    	
    	* {
    		margin: 0;
    		padding: 0;
    	}
    
    	#container {
    		background: #CFC;
    		height: 1&#37;;			/* fixes IE hasLayout bug */
    		overflow: hidden;	/* this allows the greenish background to show behind all the columns */
    	}
    
    	#content {
    		float: left;
    		width: 100%;
    	}
    		#content .wrapper {
    			background: #FC6;
    			margin: 0 160px 0 240px;
    			padding: 0.25em 0;
    		}
    	
    	#left {
    		background: #FCF;
    		float: left;
    		margin-left: -100%;
    		padding: 0.25em 0;
    		width: 240px;
    	}
    
    	#right {
    		background: #CCC;
    		float: left;
    		margin-left: -160px;
    		padding: 0.25em 0;
    		width: 160px;
    	}
    
    	p {
    		padding: 0.25em 0.5em;
    	}
    
    
    	</style>
    </head>
    <body>
    <div id="container">
    	<div id="content">
    		<div class="wrapper">
    			<p>
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean vitae dolor quis diam
    				sodales sodales. Quisque massa leo, sagittis sed, rhoncus vitae, convallis nec, orci.
    				Fusce lorem. Nullam ac dui. Mauris quis risus. Mauris volutpat. Ut sollicitudin magna
    				ac arcu. Aliquam velit. Donec commodo tempus urna. Mauris mi purus, rutrum vel, aliquet
    				ut, faucibus eget, purus. Phasellus tellus libero, iaculis ut, tempor malesuada,
    				elementum et, urna. Proin vehicula viverra sapien. Integer eleifend, tortor et
    				hendrerit vulputate, lectus enim pharetra risus, quis blandit nibh dui sed neque. Nunc
    				nec odio vel odio porta fermentum. Sed quis arcu. Donec tristique scelerisque nibh. Nam
    				lacinia libero a sem. Nunc volutpat, dui rutrum euismod sodales, ipsum dui accumsan
    				libero, id consequat quam lorem vitae orci.
    			</p>
    			<p>
    				Cras eu justo. Duis ornare ultrices urna. Integer eros. Nulla sagittis viverra purus.
    				Sed massa quam, eleifend hendrerit, laoreet vel, auctor sit amet, nunc. Donec
    				scelerisque. Cras sodales. Nulla facilisi. Ut molestie. Quisque rhoncus, nulla non
    				auctor tincidunt, lectus sapien laoreet metus, non laoreet elit purus sollicitudin
    				nulla. Praesent eget lacus sit amet sem elementum molestie. Etiam mattis eros quis
    				libero.
    			</p>
    			<p>
    				Vestibulum et massa. Cras pharetra metus ut quam. Fusce ac lectus. Nunc quis nibh ut
    				tellus placerat mattis. Duis mi dolor, pharetra at, consectetuer in, aliquet eget,
    				lacus. Ut malesuada mi sed ipsum. Integer tristique libero et lacus. Duis hendrerit,
    				lectus sit amet porta rhoncus, ipsum quam placerat nunc, ac porta quam turpis ut erat.
    				Vestibulum molestie, metus sit amet malesuada eleifend, lorem est dignissim nibh, a
    				imperdiet turpis mauris a tortor. Nam porttitor lacus sed tellus. Phasellus tempus. In
    				hac habitasse platea dictumst. Vivamus magna. In in sem. Morbi tristique metus at magna.
    				Sed luctus laoreet turpis. Curabitur egestas varius nibh. Fusce condimentum pretium
    				augue. Nam sollicitudin rutrum turpis. Quisque imperdiet.
    			</p>
    		</div>
    	</div>
    	<div id="left">
    		<p>
    			Some left sidebar content goes here.  Keep it simple, yet appropriate.  Do not go
    			on an ego trip.
    		</p>
    		<p>
    			Some left sidebar content goes here.  Keep it simple, yet appropriate.  Do not go
    			on an ego trip.
    		</p>
    	</div>
    	<div id="right">
    		<p>
    			Some right sidebar content goes here.  Keep it simple, yet appropriate.  Do nott go
    			on an ego trip.
    		</p>
    		<p>
    			Some right sidebar content goes here.  Keep it simple, yet appropriate.  Do nott go
    			on an ego trip.
    		</p>
    		<p>
    			Some right sidebar content goes here.  Keep it simple, yet appropriate.  Do nott go
    			on an ego trip.
    		</p>
    	</div>
    </div>
    </body>
    </html>

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Or even simpler

    Code:
    <!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>
    <title>3 col content first</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    *{padding:0;margin:0;}
    body{padding:0 160px 0 240px;}
    #left{
        width:240px;
        margin-left:-240px;
        background:#ccc;
        float:left;
        display:inline;
    }
    #right{
        width:160px;
        margin-right:-160px;
        float:right;
        background:#ffffcc;
        display:inline;
    }
    #middle{
        width:100&#37;;
        background:#ffcccc;
        display:inline;
        margin-right:-100%;
        float:left;
    }
    #footer,#header{
        clear:both;
        border:1px solid #000;
        background:red;
        padding:25px 0;
        margin:0 -160px 0 -240px;
    }
    
    </style>
    </head>
    <body>
    <div id="middle">
        <p>Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : </p>
        <p>Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : Center content first in source : </p>
    </div>
    <div id="left">
        <p>left content goes here : left content goes here : left content goes here : left content goes here : left content goes here: left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : left content goes here : </p>
    </div>
    <div id="right">
        <p>right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : right content goes here : : </p>
    </div>
    <div id="footer">Footer</div>
    </body>
    </html>
    Quote Originally Posted by artcoder
    I have yet to find this layout.
    Well you didn't look very far then The sticky at the top of the forum has examples of this and has been up there for about 4 years

    http://www.pmob.co.uk/temp/3colfixedtest_sourcenone.htm

  7. #7
    SitePoint Evangelist artcoder's Avatar
    Join Date
    Aug 2005
    Location
    Planet Earth
    Posts
    598
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow. What at first I thought might be impossible, all three of you have proven me wrong. I knew I would get answers from sitepoint.

    margin-left: -100%; That is a new one for me. I'll have to remember that.

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just remember that you can use negative values for margins, but not padding.

  9. #9
    SitePoint Zealot
    Join Date
    Feb 2007
    Location
    East of Ottawa, ON
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul,

    The display: inline; is that to prevent the The IE Doubled Float-Margin Bug?

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    The display: inline; is that to prevent the The IE Doubled Float-Margin Bug?
    Yes that's right (but in the example I posted it seems that only the right float needs it.)

  11. #11
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Cool, this was another thing I was trying to research along w/ displaying #header then #content

    It only gets sticky when there's margin-right on those columns (i.e. #left #right #center). I think it took me some time to display correctly on IE after using OTL's calculator. In my case it was tough because I have the following:

    Code:
    .container {width:1000px; margin:0 auto;}
    .column {float:left; margin-right:10px;}
    #content-primary {
        margin-left:240px;
        width:440px;
    }
    #content-secondary {
        margin-right:0;
        width:300px;
    }
    #content-tertiary {
        margin-left:-980px;
        width:220px;
    }
    
    (then using an IE filter w/ #content-primary { display:inline; })
    Algo for markup:
    Code:
    <div class=container>
    <div id=content>
    
    <div id=content-primary class=column>...</div>
    <div id=content-secondary class=column>...</div>
    <div id=content-tertiary class=column>...</div>
    
    </div>
    </div>
    The design called for 10px on the inside of .container, so I tried doing:

    Code:
    .container {margin:0 10px;}
    But I think IE kept on messing up, so I went w/ what I have above. Anyways, just wanted to say it can get sticky =)

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by piku
    The design called for 10px on the inside of .container, so I tried doing:

    Code:
    .container {margin:0 10px;}
    That doesn't make sense . Your container is 1000px wide so a 10px margin on either side will do nothing.

    In a fixed width design then content first is simple and I have a very old example here.

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

    If you wanted 10px space inside your container space then just adjust the positive and negative margins to suit. It's exactly the same thing unless i misunderstand you

    OTL's calculator
    What's that?

  13. #13
    SitePoint Addict piku's Avatar
    Join Date
    Oct 2003
    Location
    Alameda, CA
    Posts
    239
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops, it should be

    Code:
    #content {margin:0 10px;}
    But like you said, its the same thing if we use pos/neg margins w/ the #content-X divs

    In terms of OTL's calc, that should be PIE's One True Layout example-calculator... http://www.fu2k.org/alex/css/onetrue...le/interactive. Aaaah internet technology and acronyms =)

    Meanwhile, thanks for the example Paul, I'll take a look and see how it compares to what I have done.

    `Sherwin

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,343
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Aaaah internet technology and acronyms
    lol - IC the OTL was a TLA


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
  •