SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating 3 columns, 20px, 100%, and 20px

    hi!

    i have 3 column divs, the left one set to 20px, and the right one set to 20px, but i want the middle column to fill the remaining space. how do i do this in css?

    the layout is meant to fill your screen, not a specific width, so im running into some problems i havent learned to deal with yet. still a newb to css layout. thanks!

    -steve
    Steve Davis

  2. #2
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    also, the middle column will be my content div, and the left and right divs will be the graphical side borders. how do i get the left and right divs' heights to match whatever the content columns height is?
    Steve Davis

  3. #3
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if it helps, here's my code...

    <div id="content">
    <div id="contentLeft"></div>
    <div id="contentMiddle"></div>
    <div id="contentRight"></div>
    <div class="clearFloats"></div>
    </div>

    div#contentLeft {
    float: left;
    width: 20px;
    }
    div#contentMiddle {
    float: left;
    width: 100%;
    }
    div#contentRight {
    float: right;
    width: 20px;
    }
    .clearFloats {
    clear: both;
    }
    Steve Davis

  4. #4
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    had this boiling, if you need a fixed width or height activate class .w .h

    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>12345 12345 12345 12345 12345 </title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0;/* no margins body */
    	padding:0;/* no padding body */
    	height:100%;
    	width:100%;
    	}
    	
    	*{margin:0;padding:0;}
    	
    	body{font-size:75%;background:#e9e9e9;}
    	
    	div,p{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:1em;
    	color:#000000;
    	margin:0em;
    	padding:0em;
    	text-align:left;/* to get text back to the left*/
    	}
    	
    	.wra{margin:0 auto;}
    	
    	head+body .wra{min-height:100%;overflow:hidden;}
    	* html .wra{height:100%;}
    	
    	.l,.ll{float:left;background:#CC6666;width:20px;}
    	.ll{float:right;}
    	
    	.r{background:#ffffff;width:100%;}
    	
    	.wra .l p,.wra .ll p,.he p,.fo p,.r p{padding:.5em .5em 0 .5em;}
    	head+body .r p{padding:.5em 25px 0 25px;}
    	.wra h1{padding:.3em;font-size:1.5em;}
    	
    	head+body .wra:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility: hidden;
    	}
    	
    	head+body .ex:after{
    	content: ".";
    	display:block;
    	background:inherit;
    	height:0;
    	margin-bottom:-32767px;
    	padding-top:32767px;
    	}
    	
    	head+body .wra:after{
    	content: "."; 
    	display: block; 
    	height:0; 
    	clear: both; 
    	visibility:hidden;
    	}
    	
    	.w{/*  width:64em;*/}
    	* html body .h{/*height:64em;*/}
    	head+body .h{/*min-height:64em;*/}
    	</style>
    	<!--[if IE]>
    	<style type="text/css">
    	* html .ex{padding:0 0 32767px 0;margin:0 0 -32767px 0;}
    	</style>
    	<![endif]-->
    </head>
    <body>
    
    <div class="wra w h">
    
    <div class="r ex">
    
    <div class="l ex">
    <p>l
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    </p>
    </div>
    
    
    <div class="ll ex">
    <p>r
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    </p>
    </div>
    
    
    <p>middle
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
     -->
    end</p>
    
    </div>
    
    <!-- -->
    
    </div>
    </body>
    </html>
    Last edited by all4nerds; Jan 26, 2006 at 16:54.

  5. #5
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    PS On second thought use bgr image 20 px wide on body and 20 px wide
    on wrapper container with proper margins or padding on the content in it

    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>12345 12345 12345 12345 12345 </title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<style type="text/css">
    	html,body{/*html for FF Moz NS7 OP */
    	text-align:center; /*IE 5 IE 5.5*/
    	margin:0;/* no margins body */
    	padding:0;/* no padding body */
    	height:100%;
    	width:100%;
    	}
    	
    	*{margin:0;padding:0;}
    	
    	body{font-size:75%;background:#CCC url('sd.jpg') repeat-y top left;}
    	
    	div,p{
    	font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    	font-size:1em;
    	color:#000000;
    	margin:0em;
    	padding:0em;
    	text-align:left;/* to get text back to the left*/
    	}
    		
    	.wra{margin:0 auto;background: url('sd.jpg') repeat-y top right;}
    	
    	head+body .wra{min-height:100%;overflow:hidden;}
    	* html .wra{height:100%;}
    	
    	.wra p{padding:.5em 25px 0 25px;}
    	</style>
    	<script type="text/javascript">
    
    	</script>
    </head>
    
    <body>
    <div class="wra">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
    </div>
    
    
    </body>
    </html>

  6. #6
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, that's way too confusing for a newb to css layout to understand. can someone put this in more clear layman's terms?
    Steve Davis

  7. #7
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    how do i get the left and right divs' heights to match whatever the content columns height is?

    This is asked almost daily, Yes you can? Is the answer ?, the second example is ezy to do It uses images on the backgrounds

    a faux column
    http://www.alistapart.com/articles/fauxcolumns/


    The first example separates the CSS for IE and FF NS Moz OP, this is at the limits what you can do with CSS allone, only very recently available

    PIE way
    http://www.positioniseverything.net/...ut/equalheight

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    can someone put this in more clear layman's terms?
    If you don't want 100% height then you can make it a lot simpler by using three nested wrappers and applying your image to the 2 outer wrappers in turn.

    This also assumes that the content is the only element that is going to expand and that the border images will just follow suit.

    Here's the basic code:
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    p {margin:0;padding-bottom:10px}
    #outer{border:1px solid #000;background: url(images/left-edge.gif) repeat-y left top;}
    #inner {margin-left:20px;background: url(images/right-edge.gif) repeat-y right top}
    #content{margin-right:20px;}
    </style>
    </head>
    <body>
    <div id="outer">
    <div id="inner">
    	<div id="content">
    	 <p>This is the content : this is the content : </p>
    	 <p>This is the content : this is the content : </p>
    	 <p>This is the content : this is the content : </p>
    	</div>
    </div>
    </div>
    </body>
    </html>
    Here's a live example in caes it's not what you meant.

    http://www.pmob.co.uk/temp/image-border.htm


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
  •