SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast rash's Avatar
    Join Date
    Dec 2004
    Location
    Earth
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question boxs design with nested divs

    Im trying to make dynamics divs. I have on container (#container) div thats wraps the whole content. What i would like to do is having 2 divs inside of the main div. One of the inner div should display all info (#content) The last div (#border) should work like an border fading out (using background-image) to the default background. I have mange to get inner div to dynamiclly change the size of the outer div (#content). However the second inner div (#border) dosent get the same height as ther first one. I have also tried to insert i border-div into the content div but not getting the right look because of the title image. I need help with this one...

    Cheers

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>Boxes</title>
    	<style type="text/css">
    	body { 
    		width: 100%;
    		height:100%;
    		margin:0;
    		padding:0;
    		clear:both;
    	}
    	#container {
    		position:relative;
    		float: left;
    		height:100%;
    		width: 100%;
    		background:url(bg.jpg) repeat; 
    		top:0px;
    		left:0px;
    		right:0px;
    
    	}
    	#content {
    		width: 650px;
    		position:relative;
    		float: left;
    		height:100%;
    		background-color:#FFE6F2;
    	}
    	#menu { 
    		width: 150px;
    		position: relative;
    		float: left;
    		padding-left: 5px;
    		background-color:#009966;
    
    	}
    	#substance {
    		width: 490px;
    		padding-right: 5px;
    		position:relative;
    		float: left;
    		background-color:#006666;
    
    	}
    	#border {
    		left: 650px;
    		width: 10px; 
    		position:absolute; 
    		background:url(shade.jpg);
    		background-repeat: repeat-y;
    		float: left; 
    		height:100%;
    	}
    	#fillout {
    		width: 50px; 
    		position:relative; 
    		background-color: #abc673; 
    		float: left; 
    		height:100%;
    	}
    
    	</style>
    </head>
    <body>
    <div id="container">
    	<div id="content"><img src="title.jpg"  />
    		<div id="menu">some menu</div>
    		<div id="substance"><h2>This is my world</h2><p>Welcome! Fill out this text with what ever you like to, just. It has to be alot otherwise the page height wont be over the default 100%...</p></div>
    	<div id="border"></div>
    	
    </div>
    </body>
    </html>

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2000
    Location
    Chico, Ca
    Posts
    1,125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try adding <div style="clear:both;"></div> right after the border div.
    "Happiness doesn't find you, you find happiness" -- Unknown
    www.chuckknows.com

  3. #3
    SitePoint Enthusiast rash's Avatar
    Join Date
    Dec 2004
    Location
    Earth
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Red face solved that problem created another one.

    I solved that problem by removing the border-div and adding the border as a background-image in the content-div. But now Im having another problem. My div height 100% dosent work in Mozilla FF. Works fine in IE so I supose my syntax is incorrect. If I add html {height: 100%;} the divs will be 100% even if the div conatians no data. But if the there is to much data the inner div wont expand the outer div.

    Dose any got a clue? Try it your self, here is the code, just cut n paste to get into the action

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    	<title>Boxes</title>
    	<style type="text/css">
    	body { 
    		width: 100%;
    		height:100%;
    		margin:0;
    		padding:0;
    		clear:both;
    	}
    	#container {
    		position:relative;
    		float: left;
    		height:100%;
    		width: 100%;
    		background:url(bg.jpg) repeat; 
    		top:0px;
    		left:0px;
    		right:0px;
    	}
    	#content {
    		width: 650px;
    		position:relative;
    		float: left;
    		height:100%;
    		background-color:#FFE6F2;
    	}
    	#menu { 
    		width: 150px;
    		position: relative;
    		float: left;
    		padding-left: 5px;
    		background-color:#009966;
    	}
    	#substance {
    		width: 490px;
    		padding-right: 5px;
    		position:relative;
    		float: left;
    		background-color:#006666;
    	}
    	</style>
    </head>
    <body>
    <div id="container">
    	<div id="content"><div style="width:650px; height:150px; background-color:#00FF99; float:left; position:relative;"> actually this will be replaced by a picture</div>
    		<div id="menu">some menu</div>
    		<div id="substance"><h2>This is my world</h2><p>Welcome! What i would like to do is getting the pink-div to strech out the whole height. And if there is as much data in the darkgreen, that area should expand the pink div..</p>
    	</div>
    </div>
    </body>
    </html>
    Thanks for your time!

    Cheers

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Doesn't anybody read the FAQ

    Hi,

    If you read the FAQ on 100% height then all your problems will be explained.

    You can't inherit 100% into further nestings than the first nesting from the body as mozilla resets then to zero.

    Therefore you need to use the main outer container as the basis for the 100% height. I suggest you move the background image into the body and get rid of one nesting altogether leaving the 100% height intact.

    The secon problem is that you need to specify min-height for mozilla and height for ie. Read the FAQ for a thorough explanation.

    here is your code amended.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Boxes</title>
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
     
    body { 
    width: 100%;
    height:100%;
    margin:0;
    padding:0;
    clear:both;
    background:url(bg.jpg) repeat; 
    }
     
    #content {
    width: 650px;
    position:relative;
    min-height:100%;
    background-color:#FFE6F2;
    }
    * html #content{height:100%}
    #menu { 
    width: 150px;
    position: relative;
    float: left;
    padding-left: 5px;
    background-color:#009966;
    }
    #substance {
    width: 490px;
    padding-right: 5px;
    position:relative;
    float: left;
    background-color:#006666;
    }
    .clearer{
    height:1px;
    overflow:hidden;
    margin-top:-1px;
    clear:both;
    }
    </style>
    </head>
    <body>
    <div id="content">
    	<div style="width:650px; height:150px; background-color:#00FF99; float:left; position:relative;"> 
    	 actually this will be replaced by a picture</div>
    	<div id="menu">some menu</div>
    	<div id="substance">
    	 <h2>This is my world</h2>
    	 <p>Welcome! What i would like to do is getting the pink-div to strech out 
    		the whole height. And if there is as much data in the darkgreen, that 
    		area should expand the pink div..</p>
    		 <p>Welcome! What i would like to do is getting the pink-div to strech out 
    		the whole height. And if there is as much data in the darkgreen, that 
    		area should expand the pink div..</p>
    </div>
    <div class="clearer"></div>
    </div>
    </body>
    </html>
    Hope that helps.

    Paul

  5. #5
    SitePoint Enthusiast rash's Avatar
    Join Date
    Dec 2004
    Location
    Earth
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Quote Originally Posted by Paul O'B
    Doesn't anybody read the FAQ
    Thanks for your time, when my next problem shows up the well-built FAQ will be my first stop. For sure. Thats an really good FAQ.

    Once again thanks, your tip did the trick!


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
  •