SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Self Expanding three column layout - help

    Hello Guys,

    I would be grateful if someone could write a code for a CSS layout with five regions.

    The five divs to be contained in a div ("wrap" - 960px)

    1. Header - 960px wide, 90px height
    Below header:
    2. Left side bar - div id = "left bar" - 180px wide, 210px height
    3. Middle section (Content) - div id = "content" - 600px wide, 210px height
    4. Right side bar - div id = "right bar" - 180px wide, 210px height
    The above point 2,3 and 4 are all below the header.

    5. Footer - div id = "footer". 960px wide, 100px height
    The footer is below the three columns 2,3 and 4.

    My biggest problem is I don't know how to make the pages to self expand downwards
    if I fill the content or side bars with more information.

    I have spent so many days trying to do it and haven't been able to.
    I would very much appreciate if someone would help me with this.

    Kind regards

    Kofifred

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,819
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    welcome to SitePoint, Kofi

    It's a bad idea to use heights on elements.
    remove that and your regions will naturally expand to fit the content. If for some reason you want those heights to be a starting point then use min-height. instead of height ( if you also wish to support older IE you will need to add a conditional comment<!-- if [ie lt8] <style> your CSS for IE goes here </style>--> with the same values as height ( because old IE interprets height: as min-height anyway.

    Hopefully that helps.

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

    It would have been better if you had posted what you had tried so we could see where you had got to and help you learn how to do it

    Here's the basics but you will need to ask about anything you don't understand otherwise you won't be able to learn form it

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <style type="text/css">
    h1, p {
    	margin:0 0 1em;
    	padding:0 10px;
    }
    .outer {
    	width:960px;
    	margin:auto;
    	border:1px solid #000;
    }
    .header {
    	min-height:88px;
    	background:green;
    	padding:1px 0;/*stop margin-collapse*/
    }
    .main {
    	width:960px;
    	display:table;
    }
    .sidebar, .sidebar2 {
    	width:180px;
    	display:table-cell;
    	background:red;
    }
    .content {
    	width:598px;
    	display:table-cell;
    	border-right:1px solid #000;
    	border-left:1px solid #000;
    	background:blue;
    }
    .footer {
    	clear:both;
    	padding:1px 0;/*stop margin-collapse*/
    	background:yellow;
    	min-height:98px;
    }
    </style>
    <!--[if lte IE 7]>
    <style type="text/css">
    .sidebar, .sidebar2,.content{float:left}
    .footer{zoom:1.0}
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="outer">
    		<div class="header">
    				<h1>Header</h1>
    				<p>Ie8+ get equal columns. IE7 and under get content height columns</p>
    		</div>
    		<div class="main">
    				<div class="sidebar">
    						<p>left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content left column content </p>
    				</div>
    				<div class="content">
    						<p>middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content middle column content </p>
    				</div>
    				<div class="sidebar2">
    						<p>right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column content right column t </p>
    				</div>
    		</div>
    		<div class="footer">
    				<p>footer</p>
    		</div>
    </div>
    </body>
    </html>

  4. #4
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    welcome to SitePoint, Kofi

    It's a bad idea to use heights on elements.
    remove that and your regions will naturally expand to fit the content. If for some reason you want those heights to be a starting point then use min-height. instead of height ( if you also wish to support older IE you will need to add a conditional comment<!-- if [ie lt8] <style> your CSS for IE goes here </style>--> with the same values as height ( because old IE interprets height: as min-height anyway.

    Hopefully that helps.

    Hello,

    I tried but it still didn't work. Text overflowed the footer if I filled the content or side bars with lot of information.

    But thanks for your advice and help.

    Kofifred

  5. #5
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    It worked!

    Hello,

    Thanks for the code you wrote for me. Sorry I didn't send what I had written myself; I had written too many of them trying all sort of things but I must quickly say that your code worked perfectly as I wanted. What is new to me in your code is the "display: table", "display: table-cell" and the hacking of IE. I would study it well and if I don't understand it, I would please write to you hoping to receive your help again.

    Many thanks

    Kofifred

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

    display: table and table-cell are available in IE8+ and allow us to mimic the behaviour of tables with css. It's not a replacement for tables but just allows css layout to mimic certain table behaviours such as equal columns. If you don't need equal columns then the floated version would be just as good and work in older IE which is what the conditional comments are doing for ie7 and under.

  7. #7
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,849
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    display: table and table-cell are available in IE8+ and allow us to mimic the behaviour of tables with css. It's not a replacement for tables but just allows css layout to mimic certain table behaviours such as equal columns. If you don't need equal columns then the floated version would be just as good and work in older IE which is what the conditional comments are doing for ie7 and under.
    Have we reached the stage where display:table is the preferred method of creating a columned layout or are floated divs still the way to go? I was wondering where the state of the art is today. I am creating a new personal site and I intend to support IE8 and up. display:table seems much less hassle than floats and supporting IE7 seems pretty simple as Paul shows. One day we will turn the corner and get away from floated columns and their limitations such as unequal column height. But are we there yet?

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,317
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by cheesedude View Post
    One day we will turn the corner and get away from floated columns and their limitations such as unequal column height. But are we there yet?
    We need as many options as possible, as there will never be 'one method that fits all needs'. One problem with CSS-table layouts is that there is far less flexibility in page structure, which can be a big turn-off. At this point, I'd never consider CSS tables for a whole page layout, It's much more useful for small sections of a page.

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    As Ralph said it does depend on the job in hand but I find I am using display:table a lot more for those awkward equal column scenarios. It's also useful when you need to space blocks apart without the usual column drop when you resize the window. However that can be a drawback as cells never wrap and eventually won't compress anymore but floats will wrap to a new line and allow the element more space.

    Of course you could use media queries and change the layout to floated for smaller screen sizes and get the best of both worlds.

    You have to be careful with display:table in that heights become a minimum and that min-height and max-height are undefined in the specs for table elements.


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
  •