SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    May 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need help with 100% Height

    Hi, im lost. And have been for a about a week now on how to get 100% to work on my website. I Just learned Div this month so im not to good at it but i have been reading and testing everything i find and cant figure out this problem.


    Here is the test page i made

    Code:
    <style>
    				/* Here we go! */
    body 
    	{
    	text-align:	center; 
    	padding:	0px;
    	font-family:	arial, sans-serif;
    	font-size:	11px;
    	color: Black;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	background-color: #666666;
    	}
    
    				/* Top Left Image */
    div.Control
    	{
    	position:absolute; 
    	z-index:2; 
    	left:50%; 
    	top:0%;
    	margin-left:-375px; 
    	margin-top:28px; 
    	text-align:center;
    	visibility:visible;
    	width: 500px; 
    	border: 8px Solid #333333 ;
    	background-color: #ffffff;
    	height:300px;
    
    	}
    					/* Bottem left Content Box */
    div.Content
    	{
    	padding: 0px;
    	position:absolute;
    	z-index:2;
    	left:50%; 
    	top:0%;
    	margin-left:-375px; 
    	margin-top:340px; 
    	text-align:center;
    	visibility:visible;
    	background-color: #ffffff;
    	border-top: 8px Solid #333333 ;
    	border-right: 8px Solid #333333 ;
    	border-left: 8px Solid #333333 ;
    	border-bottom: 8px Solid #333333 ;
    	width: 500px ;
    	
    	}
    					/* Right Menu Bar */
    div.Sidebar
    	{
    	background: white url();
    	text-align: center;
    	width: 220px;
    	position:absolute; 
    	z-index:2; 
    	left:50%; 
    	top:0%;
    	margin-left:145px; 
    	margin-top:28px; 
    	visibility:visible;
    	border: 8px Solid #333333 ;
    	}	</style>
    
    <body>
    <div class="Control">
    	<h1> Banner Image</h1>
    </div>
    
    
    <div class="Content">
    
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    Menu<br>
    News<br>
    News<br>
    </div>
    
    
    <div class="Sidebar"> 
        <div class="Right_Bar" id="Right_Bar">
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
        </div>
    </div>
    My Style sheet is sloppy, Sorry. But the question i have is, How do i get my div class="Sidebar" and div class="Content" to stay the same Hight. So if my Content is longer then my Sidebar my sidebar will stretch down. or if my Sidebar is longer then my content, my content will stretch down. Thank you.
    Last edited by thatismeeee; Jan 1, 2007 at 10:03.

  2. #2
    SitePoint Member
    Join Date
    Oct 2006
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    If I've understood your question correctly, have a quick look at this article from A List Apart.

    It uses a technique whereby you use a repeating background image to give the impression of equal length columns.

    Kind Regards

    Robin

  3. #3
    SitePoint Member
    Join Date
    May 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i just tryed the thing with the backround from the link you gave me. I think it has something to do with how my tables are set up in the style sheets but when i make the window smaller the backround comes from behind the tables and you can see it is off centerd

    Code:
    <style>
    				/* Here we go! */
    body 
    	{
    	text-align:	center; 
    	padding:	0px;
    	font-family:	arial, sans-serif;
    	font-size:	11px;
    	color: Black;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 0px;
    	background: #666666 url(http://img78.imageshack.us/img78/5995/2ps2.gif) repeat-y 50% 0;
    	}
    
    				/* Top Left Image */
    div.Control
    	{
    	position:absolute; 
    	z-index:2; 
    	left:50%; 
    	top:0%;
    	margin-left:-375px; 
    	margin-top:28px; 
    	text-align:center;
    	visibility:visible;
    	width: 500px; 
    	border: 8px Solid #333333 ;
    	background-color: #ffffff;
    	height:300px;
    
    	}
    					/* Bottem left Content Box */
    div.Content
    	{
    	padding: 0px;
    	position:absolute;
    	z-index:2;
    	left:50%; 
    	top:0%;
    	margin-left:-375px; 
    	margin-top:340px; 
    	text-align:center;
    	visibility:visible;
    	background-color: #ffffff;
    	border-top: 8px Solid #333333 ;
    	border-right: 8px Solid #333333 ;
    	border-left: 8px Solid #333333 ;
    	border-bottom: 0px Solid #333333 ;
    	width: 500px ;
    	
    	}
    					/* Right Menu Bar */
    div.Sidebar
    	{
    	background: white url();
    	text-align: center;
    	width: 220px;
    	position:absolute; 
    	z-index:2; 
    	left:50%; 
    	top:0%;
    	margin-left:145px; 
    	margin-top:28px; 
    	visibility:visible;
    	border-top: 8px Solid #333333 ;
    	border-right: 8px Solid #333333 ;
    	border-left: 8px Solid #333333 ;
    	border-bottom: 0px Solid #333333 ;
    	}	</style>
    
    <body>
    <div class="Control">
    	<h1> Banner Image</h1>
    </div>
    
    
    <div class="Content">
    
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    News<br>
    Menu<br>
    News<br>
    News<br>
    </div>
    
    
    <div class="Sidebar"> 
        <div class="Right_Bar" id="Right_Bar">
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
    Menu<br>
        </div>
    </div>

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

    Please read the faq on 100&#37; height as there is a lot to digest before you can accomplish this. The three col demo sticky thread at the top of the forum is full of examples of how to do this but it is no easy matter.

    You will not accomplish this with absolute positioning either unless you use the background image route (as mentioned by Robin above) but this will mean that you can never have an element such as footer spanning the bottom of both columns.

    Absolute elements are removed from the flow and will not produce usable fluid layouts unless the layout is relatively simple. Most layouts are achieved using a mixture of floats, static content and some absolute positioning if necessary.

    If you are just migrating to css from tables then try not to copy the behaviour of table-cells with css because css cannot mimic tables exactly. Things like equalising columns are something that tables do easily and css only does when forced with a crowbar.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Here is an example of a 3 column layout (although the techniques are the same for 2 columns) where the columns are created using a background image.

    http://www.pmob.co.uk/temp/3col-centred-template6.htm

    As you see it does not use absolute positioning for any structural use other than for the 100&#37; high footer technique.

    In your example the page will just slide off the left side because you have used an absolute centering method which is not really any good for structural layout. You have also not taken into account any box model issues so I suggest you also read the FAQ on the broken box model before you continue further as this will have great implication's on your layout.

    There are also implications in what doctype you are using and as you haven't shown the code then I'm guessing that you haven't addressed this issue either.

    Take a few minutes break and read through the faq especially the sections on the broken box model, 100% height and floats .

    There is no point rushing forward until you understand these issues and then things will start to get clearer

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Here is your code tidied up a bit using the techniques I already mentioned.

    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=iso-8859-1">
    <title>Untitled Document</title>
    <style type="text/css">
    * {margin:0;padding:0;}
    p,h1,h2,h3,h4,h5,h6,ul,ol{margin:0 0 1em 0}
    ol,ul{margin-left:16px;}
    body 
        {
        text-align:    center; 
        font-family:    arial, sans-serif;
        font-size:    11px;
        color: #000;
        min-width:760px;
        background: #666 url(http://img78.imageshack.us/img78/5995/2ps2.gif) repeat-y 50&#37; 0;
    }
    #outer{
        width:760px;
        margin:auto;
        text-align:left;
        min-height:100%;
    }
    .Control    {
        text-align:center;
        border-bottom:8px solid #333;
        background: #fff;
        height:300px;
        }
    .Content     {
        text-align:center;
        background-color: #fff;
        border-top: 8px Solid #333;
        width: 484px ;
        float:left;
        margin-left:13px;
        display:inline;/* ie bug*/
    }
    .Sidebar    {
        width: 204px;
        float:right;
        margin:0 23px 0 0; 
        border-top: 8px solid #333;
        display:inline;/* ie bug*/
    }
    .clearer{
        height:1px;
        overflow:hidden;
        margin-top:-1px;
        clear:both;
    }
        
    </style>
    <!--[if IE ]>
    <style type="text/css">
    body{padding-left:1px;}/* IE bug*/
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="outer">
        <div class="Content">
            <div class="Control">
                <h1> Banner Image</h1>
            </div>
            <p>News</p>
            <p>News</p>
            <p>News</p>
            <p>News</p>
            <p>News</p>
            <p>News</p>
            <p>News</p>
            <p>News</p>
            <p>News</p>
            <p>News</p>
            <p>News</p>
            <p>News</p>
            <p>News</p>
        </div>
        <div class="Sidebar">
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
                <p>Menu</p>
        </div>
        <div class="clearer"></div>
    </div>
    </body>
    </html>

    Hope it helps

  7. #7
    SitePoint Zealot Wynnefield's Avatar
    Join Date
    Sep 2005
    Location
    North Texas
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    there are so many friendly, helpful members here ... i love this place!

    Happy New Year to All ...

  8. #8
    SitePoint Member
    Join Date
    May 2006
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, its been intresting and fun trying to learn div this past month. ill try and read threw the links you posted. its just been kinda hard figuring stuff like that out going from 100&#37; tables to 0 tables.


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
  •