Div on the right wont stretch with the page??

MarGera332

Hey Everyone

I have a problem, that just wont seem to go away. Here is the setup, i has one outer div with two divs inside, one large on the left and a small div on the right, i need the div on the right to meet the bottom of the outer div, and to always flow with it. No matter what i seem to do, the div just wont flow with the outer div, and just stay at the top of the right div.

So i thought i would ask here, see if anyone has an idea's that i can try??

Thanks for any help :)

drhowarddrfine

The height must be specified for a parent element and then the div can reference that and expand to 100% of the parent. iow, set your outer/parent div to the height you wish. If you want it to be 100% of the body, set both html and body to 100%. So body references html and "outer" references body. Now you can have your inner divs ref the outer one and set them to 100% of the outer div.

Expand|Select|Wrap|Line Numbers

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

   "http://www.w3.org/TR/html4/strict.dtd">

<html>

  <head>

    <title></title>

    <meta http-equiv="content-type" content="text/html;charset=utf-8">

    <style type="text/css">

        html,body{

            height:100%;

        }

        #outer{

            height:100%;

            background-color:#eee;

        }

        #left{

            height:100%;

            width:400px;

            float:left;

            background-color:#ddd;

        }

        #right{

            height:100%;

            float:left;

            width:200px;

            background-color:#ccc;

        }

    </style>

  </head>

<body>
 
<div id="outer">

    <div id="left">

        left

    </div>

    <div id="right">

        right

    </div>

</div>
 
</body>

</html>

MarGera332

Hi drhowarddrfine

Thanks for the detailed reply. I have tried what you has said but it still will not flow with the page. I don't have a clue why it wont work, i have tried taking different line of code out, to make sure that there isn't any conflict, but nothing seem to make a difference, do you have any other idea's what it could be??

Thanks for your help :)

drhowarddrfine

Then other factors in your code are playing into it and I can't help without a link or the complete code.

MarGera332

Then other factors in your code are playing into it and I can't help without a link or the complete code.

So would you need me to post the html code and the CSS code??

Thanks

drhowarddrfine

Yes, but a link is preferred if the site is online.

MarGera332

Yes, but a link is preferred if the site is online.

Hey drhowarddrfine

Ok i put together a test page, to see if it is something to do with my code, but i got the same result, below is the HTML and the CSS.

If you could take a look that would be much appreciated.

Thanks

Expand|Select|Wrap|Line Numbers

 
</head>
 
<body>
 
<div id="outline">
 
    <div id="left">
 
    <p>Here is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,

    Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here 

    is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is 

    some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,</p>
 
</div>
 
    <div id="right">Here
 
    <p>Here is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,

    Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here 

    is some text, Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is 

    some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,Here is some text,</p>

    </div>

</div>
 
</body>

</html>

Expand|Select|Wrap|Line Numbers

 
<style type="text/css">

<!--
 
body {

    height: 100%;

    margin: 0px;

    padding: 0px;

}

#outline {

    position: relative;

    height: 100%;

    width: 900px;

    padding: 0px;

    margin-top: 0px;

    margin-right: auto;

    margin-bottom: 0px;

    margin-left: auto;

}

#left {

    width: 500px;

    float: left;

    height: 100%;

    position: relative;

    font-size: 25px;

    margin: 0px;

    padding: 0px;

    background-color: #00CCFF;

}

#right {

    width: 300px;

    float: right;

    height: 100%;

    margin: 0px;

    padding: 0px;

    position: relative;

    top: 3px;

    background-color: #33CC99;

}
 
-->

</style>

MarGera332

Ok i see that i didn't style the html, body just the body on that last example!

So i tried that again on my other web page, and sort of got the result i was after, the only problem that i had, is that i have two divs below the main outline div, and it pushed them over to the right, and extended to the bottom of the page!!!

drhowarddrfine

Change your css to this:

Expand|Select|Wrap|Line Numbers

 * {

    margin:0;

    padding:0

}
 
html,body {

    height: 100%;

}

#outline {

    height: 100%;

    width: 900px;

    margin:0 auto;

}

#left {

    width: 500px;

    float: left;

    height: 100%;

    font-size: 25px;

    background-color: #00CCFF;

}

#right {

    width: 300px;

    float: right;

    height: 100%;

    background-color: #33CC99;

}

MarGera332

Hey

I don't know why but that code will just not work on my main page, i got it working on my test page fine.

So i have found another way around it on the net. Basically you give the padding bottom a valve of say 2500 and you then give the margin bottom a negative value which is the same -2500, and then set the outer divs overflow to hidden, and fingers crossed it has worked a charm so far!!

Thanks for all your efforts with trying to help me on this matter, it is really appreciated :)

Div on the right wont stretch with the page??

Post your reply

Similar topics