SitePoint Sponsor

User Tag List

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

    Make content to follow the other divs

    Hi
    I need to get my content div to follow my left and right div. Do you know how i can do this.

    I want it to be like this but without setting a height, couse i do not know the height on every page
    http://www3.shellkonto.se/yavari/durus/help/v2.htm

    The code i want to fix is this
    http://www3.shellkonto.se/yavari/durus/help/v1.htm

    And here is the scource code
    HTML Code:
        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
        <html>
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
          <title>Všlkommen</title>
        <style type="text/css">
        *{
        	margin:0px;
        	padding:0px;
        
        }
        body{
        	color:black;
        	background-color:#E5E7E9;
        }
        #wrap{
        	min-height:50px;
        	margin:auto;
        	min-width:790px;
        	background-color:red;
        }
        #header{
        	width:100%;
        	text-align:center;
        	background-color:#B5B5B5;
        	height:60px;
        }
        #content{
        	position:relative;
        	margin: 10px 10px 0 235px;
        	background-color:white;
        }
        #footer{
        	margin: 10px 10px 0 230px;
        	text-align:center;
        	background-color:yellow;
        }
        #content #left{
        	position:absolute;
        	left:0px;
        	right:201px;
        	background-color:#FF00FF;
        }
        #content #right{
        	position:absolute;
        	right:0px;
        	width:200px;
        	background-color:green;
        }
        </style>
        <!--[if lte IE 6.0]>
        /* Place for IE special css
        <![endif]-->
        
        
        </head>
        <body>
        <div id="wrap">
        <div id="header">
        	<h1>Header</h1>
        </div>
        <div id="content">
        	div id=left and id=right should always be in this div with id=content. I want it follow those divs. 
        	<div id="left">
        	This div id=left shoould have a relative width. This div id=left shoould have a relative width.
        	This div id=left shoould have a relative width. This div id=left shoould have a relative width.
        	This div id=left shoould have a relative width. This div id=left shoould have a relative width.
        		</div>
        	<div id="right">
        	This div id=right should always have with=200px;. This div id=right should always have with=200px;.
        	This div id=right should always have with=200px;. This div id=right should always have with=200px;.
        	This div id=right should always have with=200px;. This div id=right should always have with=200px;.
        	</div>
        	<div style="clear: both;"></div>
        </div>
        <div id="footer">
        	<p>Footer</p>
        </div>
        
        </div>
        </body>
        </html>
        
        

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

    Haze not been asked for very long time

    http://www.sitepoint.com/forums/showthread.php?t=339798
    http://www.sitepoint.com/forums/showthread.php?t=340626
    http://www.sitepoint.com/forums/showthread.php?t=340356

    your basic set-up ? PIE way
    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:#eeeeee;}
    	
    	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:-90px auto 0 auto;
    	}
    	head+body .wra{min-height:100%;overflow:hidden;}
    	* html .wra{height:100%;}
    	
    	.he{height:90px;background:#B5B5B5;}
    	
    	.l,.ll{width:200px;}
    	.l{float:left;background:#FF00FF;}
    	.ll{float:right;background:green;}
    	
    	.r{float:left;background:#ffffff;width:100%;}
    	
    	.x{height:90px;}
    	
    	.fo{height:90px;background:#ffff00;margin:0 auto;}
    	
    	.bgr{background: url('sd.jpg') repeat-y top right;}
    	
    	.wra .l p,.wra .ll p,.fo p,.he p,* html .r p{padding:.3em .5em .2em .5em;}
    	head+body .r p{padding:.3em 205px .2em 205px;}
    	.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;
    	}
    	
    	.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="x"></div>
    <div class="he">
    <h1>header</h1>
    <p>Basic 3 column without borders, extended<br /><br /></p>
    </div>
    
    <div class="r ex">
    <div class="l ex">
    <p>left
    <!--
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><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 class="ll ex">
    <p>right
    <!-- 
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br /><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>
    
    <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>
    <div class="fo w"><p>footer</p></div>
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    May 2005
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thx this was what i wanted after som modificuations.
    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>12345 12345 12345 12345 12345 </title>
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
     	<style type="text/css">
     	*{margin:0;padding:0;}
     	.wrap{
     		margin:0px auto 0 200px;
     		overflow:hidden;
     	}
     	.header{height:90px;background:#B5B5B5;}
     	.left{float:left;background:#FF00FF;width:200px;}
     	.right{float:right;background:green;width:200px;}
     	.container{float:left;background:red;width:100%;}
     	.footer{height:90px;background:#ffff00;margin:0 auto;}
     
     	</style>
     </head>
     <body>
     
     <div class="wrap">
     	<div class="header ">
     		<h1>header</h1>
     		<p>Basic 3 column without borders, extended<br /><br /></p>
     	</div>
     	<div class="container">
     		<div class="left">
     			<p>left
     			end asd<br/><br/><br/><br/><br/>asd</p>
     		</div>
     		<div class="right">
     			<p>right
     			end</p>
     		</div>
     		<p>middle end</p>
     	</div>
     
     </div>
     <div class="footer">
     	<p>footer</p>
     </div>
     </body>
     </html>

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

    set your wrap margin to .wrap{margin:0 auto; if you ad a width (also on the footer) it gets a fixed/centered basic set-up

    read the other treads on how to ad a bgr image for faux columns

    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">
    	*{margin:0;padding:0;}
    	
    	.wrap,.footer{margin:0px auto;/*width:770px;*/}
    	
    	.wrap{overflow:hidden;}
    	
    	.header,.footer{height:90px;}
    	.header{background:#B5B5B5;}
    	
    	.container{float:left;background:red;width:100%;}
    	
    	.left,.right{width:200px;}
    	.left{float:left;background:#FF00FF;}
    	.right{float:right;background:green;}
    	
    	.footer{background:#ffff00;}
    	
    	</style>
    </head>
    <body>
    
    <div class="wrap">
    
    <div class="header ">
    <h1>header</h1>
    <p>Basic 3 column without borders, extended<br /><br /></p>
    </div>
    
    <div class="container">
    
    <div class="left">
    <p>left end <br /><br /><br /><br /><br />asd</p>
    </div>
    
    <div class="right"><p>right end</p></div>
    
    <p>middle end</p>
    </div>
    
    </div>
    
    <div class="footer">
    <p>footer</p>
    </div>
    
    </body>
    </html>


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
  •