[SOLVED] div container wrong height

[Yeodan]

I have some divs on my site, all of them are inside a container div.

I use relative positioning to replace the bottom divs up.

Now I have this problem where my container height remains the same as if all the divs inside the container were not positioned up. Resulting a huge empty space at the bottom of my page.

 

Here's my .css:

 

body {
background-color: #F5FFF5;
color: #000000;
    text-align: center;
}
A {
COLOR: #0000FF; TEXT-DECORATION: none;
}
A:hover {
COLOR: #6969FF; TEXT-DECORATION: none;
}
.input {
BACKGROUND-COLOR: #006600;
COLOR: #CCFFCC;
border-style: solid;
border-color: #66FF00;
FONT-FAMILY: Verdana, Arial;
FONT-SIZE: 9pt;
TEXT-DECORATION: none;
}


#container {
    width: 900px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    background-color: red;
}

#banner {
    width: 900px;
    height: 65px;
    padding: 10px;
    background-color: blue;
}

#avatar {
    width: 120px;
    height: 240px;
    padding: 10px;
    background-color: gray;
}

#link {
    width: 120px;
    padding: 10px;
    background-color: green;
    position: relative;
}

#news {
    width: 390px;
    height: 172px;
    left: 120px;
    top: -279px;
    padding: 10px;
background-color: orange;
    position: relative;
}

#updates {
    width: 390px;
    height: 172px;
    left: 510px;
    top: -451px;
    padding: 10px;
background-color: maroon;
    position: relative;
}

#main {
    width: 780px;
    left: 120px;
    top: -451px;
    padding: 10px;
background-color: purple;
    position: relative;
}

[Ken2k7]

What's with all the position: relative and all the exact values?

[rhodesa]

yeah...i have a feeling you can do this without all the positioning. but try using "position: absolute" instead

[Yeodan]

the container div is centered so I can't use absolute values, I want this to work in diffrent resolutions, and it does

 

but for some reason the container div thinks all the other divs are just under eachother, thus my container div has like 100 empty lines at the bottom

 

can't show you the page yet, but in a few days I can if that helps

[Ken2k7]

the container div is centered so I can't use absolute values, I want this to work in diffrent resolutions, and it does

 

but for some reason the container div thinks all the other divs are just under eachother, thus my container div has like 100 empty lines at the bottom

 

can't show you the page yet, but in a few days I can if that helps

Well if you must use position values, then use position: none;  =]

 

Why does it fail in different resolutions that requires position: relative to fix?

[rhodesa]

on the centered div, put a relative position (but no top/left values)...then the children inside that div with absolute positioning will be relative that centered DIVs top left corner

[Yeodan]

I read some of the other topics around here, and I tried using floats, it seems to work now.

Here's the new working .css

 

html, body {
background-color: #F5FFF5;
    text-align: center;
color: #000000;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    width: 100%;
    height: 100%;
}
A {
COLOR: #0000FF; TEXT-DECORATION: none;
}
A:hover {
COLOR: #6969FF; TEXT-DECORATION: none;
}
.input {
BACKGROUND-COLOR: #006600;
COLOR: #CCFFCC;
border-style: solid;
border-color: #66FF00;
FONT-FAMILY: Verdana, Arial;
FONT-SIZE: 9pt;
TEXT-DECORATION: none;
}


#container {
    text-align: left;
    width: 900px;
    margin: auto;
    background-color: red;
}

#banner {
    width: 900px;
    height: 65px;;
    background-color: blue;
}

#avatar {
    width: 120px;
    height: 240px;
    float: left;
    background-color: green;
}

#news {
    width: 390px;
    height: 115px;
    float: left;
    background-color: purple;
}

#updates {
    width: 390px;
    height: 115px;
    float: left;
    background-color: yellow;
}

#link {
    width: 120px;
    clear: left;
    float: left;
    background-color: orange;
}

#main {
    width: 780px;
    height: 390px;
    float: left;
    background-color: white;
}

[Yeodan]

yay new problem

 

this works 100% in internet explorer 8

it doesn't work in firefox or google chrome =(

 

my avatar div is longer than news and updates

in IE the main div is put next to the avatar div right below news and updates

in firefox and google chrome the main div is put below the avatar and it leaves a whole open space between news, updates and the main div

 

how can I fix this? =)

[rhodesa]

it's pretty much impossible to tell you what is wrong without the html. is there a link to the site you can provide?

[Yeodan]

no sorry, but there's nothing in the html that would help you, well at least nothing you shouldn't be able to see in the css

 

here's an example of what I want to do: (image)

 

the blue part is where my banner goes

the green part is an image the size of the green box

the orange part is my linktable

the purple part is a news box

the yellow part is an update box

the white part is my main div where my content goes

the remaining red part is a part of the container still showing

 

this image shows how I want my site to look

the entire page as to be centered and every box needs it's own div

 

 

am I doing everything totally wrong? what method(s) should I use to accomplish this?

[Ken2k7]

Well you can do this with a lot of DIVs and CSS work or you can use a table. Though most people don't like using table for styling.

[Yeodan]

obviously I'm trying to do it with divs

but what kind of divs should I use cuz I can't figure it out?

 

it's supposed to be centered on all resolutions, that excludes absolute positioning as far as I know

relative positioning screws up my page

floats screw up my page in firefox

 

so what now?

[Ken2k7]

I can't tell you all that. What do you mean by centered? The image you just attached, that's how you want it to look? If that's the case, then just set an outer DIV with margin: 0 auto;

[Yeodan]

oh you mean like in the css I posted earlier? 

I took that screenshot in IE8, it's working with divs perfectly

the problem I have, using floats and clear: left; is that in firefox it puts the white box EXACTLY next to the orange box so you get an empty space between the purple/yellow and the white boxes

 

here's how it looks in firefox:

[Yeodan]

here's the html too if that helps

 

<html>
    <head>
        <STYLE TYPE="text/css" media="screen">
            <!--
            @import url(layout/standard.css);
            -->
        </STYLE>
        <title>Immortal Slayer</title>
    </head>
    <body>
        <div id="container">
            <div id="banner">
                <?php
                    require "includes/banner.php";
                ?>
            </div>
            <div id="avatar">
                <?php
                    require "includes/avatar.php";
                ?>
            </div>
            <div id="news">
                <?php
                    require "includes/news.php";
                ?>
            </div>
            <div id="updates">
                <?php
                    require "includes/updates.php";
                ?>
            </div>
            <div id="link">
                <?php
                    require "includes/link.php";
                ?>
            </div>
            <div id="main">
                <?php
                    require "includes/login.php";
                ?>
            </div>
        </div>
    </body>
</html>

[rhodesa]

<html>
  <head>
    <style type="text/css">
      html, body {
        background-color: #F5FFF5;
        text-align: center;
        color: #000000;
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }
      a {
        color: #0000FF;
        text-decoration: none;
      }
      a:hover {
        color: #6969FF;
        text-decoration: none;
      }
      .input {
        background-color: #006600;
        color: #CCFFCC;
        border-style: solid;
        border-color: #66FF00;
        font-family: Verdana, Arial;
        font-size: 9pt;
        text-decoration: none;
      }
      .clear {
        clear: both;
      }
      #container {
        text-align: left;
        width: 900px;
        margin: auto;
        background-color: red;
      }
      #banner {
        height: 65px;
        background-color: blue;
      }
      #leftColumn {
        float: left;
        width: 120px;
      }
      #rightColumn {
        float: left;
        width: 780px;
      }
      #avatar {
        height: 240px;
        background-color: green;
      }
      #links {
        height: 140px;
        background-color: orange;
      }
      #news {
        float: left;
        width: 390px;
        height: 115px;
        background-color: purple;
      }
      #updates {
        float: left;
        width: 390px;
        height: 115px;
        background-color: yellow;
      }
      #main {
        clear: both;
        width: 780px;
        height: 390px;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <div id="container">
      <div id="banner"></div>
      <div id="leftColumn">
        <div id="avatar"></div>
        <div id="links"></div>
      </div>
      <div id="rightColumn">
        <div id="news"></div>
        <div id="updates"></div>
        <div id="main"></div>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

[Yeodan]

YAYYYY!!!!!!

it works

 

thx for all the help, love you guys

and I'm sorry for being a terrible css newbie