SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Possibly impossible layout

    I'm looking for a three column fluid layout as follows
    sidebar[20%] - main-content[60%] - sidebar[20%]
    Which in itself is very simple, however I want to specify a max-width on the two sidebars, yet allow the main-content to continue stretching.
    I've had various attempts, but as yet no success.
    Can anyone point me in the direction of a solution?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,107
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    You could use @media queries to switch styles from percentages to fixed widths at a different resolutions.
    Code css:
    .aside { width: 20% }
    @media only screen and (max-device-width: 480px) {
      .aside { width: 100%; float: none}
    }
    @media only screen and (max-width:1024px) {
      .aside { width: 300px }
    }

    overflow: hidden; on the content can also achieve what you want. Something about the overflow property makes an elements margins but up against those around it. In the case of floats either side it will make the content always fit between them.
    Code html5:
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>I  HTML</title>
    <style>
     
    .aside {
    	float: left;
    	width: 20%;
    	max-width: 200px;
    	background: red
    }
    .aside.right { float: right }
    .aside p {
    	padding: 20px;
    	margin: 0
    }
    #content {
    	overflow: hidden;
    	padding: 20px;
    	background: green
    }
     
    </style>
    </head>
    <body>
     
    <div class="aside right">
    	<p>Content</p>
    </div>
    <div class="aside">
    	<p>Content</p>
    </div>
    <div id="content">
    	<p>Content</p>
    </div>
     
    </body>
    </html>

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    This would be a far simple solution:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title></title>
    		<style type="text/css">
    		#cont { width:80%; margin:0 auto; /*this is optional, I just wanted to make the layout pretty by centering the layout and giving it breathing room*/}
    			#sidebar1,#sidebar2{width:20%; max-width: 250px}
    			#sidebar1 {float:left; background: orange}
    			#sidebar2 {float:right; background: silver}
    			#main{overflow: hidden; background: pink}
    		</style>
    	</head>
    	<body>
    		<div id="cont">
    		<div id="sidebar1">sidebar1</div>
    		<div id="sidebar2">sidebar2</div>
    		<div id="main">this is content</div>
    		</div>
    	</body>
    </html>

  4. #4
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    You can also Holy Grail it, if you need the middle to be first in source.

    So long as you don't float or display: inline-block the middle part, it'll grow with the page as needed.

  5. #5
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks to Dresdon it's sorted, all I was missing was the overflow: hidden.
    Thanks to everyone else for assisting too.
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  6. #6
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    Just out of curiosity, may I ask if there is content in the sidebars or is it just a placeholder for a background image?

  7. #7
    Pedantic Semantic blain's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    528
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There will be content in both sidebars, why do you ask?
    Technology is dominated by two types of people:
    those who understand what they do not manage,
    and those who manage what they do not understand.

  8. #8
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    There's techniques to have images show up on the sides of a single-column main-page content, which if that's what you needed, could semantically be better. Or, if they only hold ads and the such, they're content but you wouldn't necessarily want that content to be the first thing in source code after your header content.

  9. #9
    Chopped Liver bronze trophy imaginekitty's Avatar
    Join Date
    Aug 2007
    Location
    Pennsyltucky
    Posts
    1,494
    Mentioned
    3 Post(s)
    Tagged
    0 Thread(s)
    What Stomme poes said was what I was getting at. If there is no content—and a background image is not content—then there would be a better way. I have a serious aversion to empty DIVs or any so-called placeholder tags.

    The reason I asked was when this question comes up 90% of the time the sidebars are just there to keep the actual content from allowing the background image to show through. Carry on.


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
  •