By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,739 Members | 1,059 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,739 IT Pros & Developers. It's quick & easy.

Div on the right wont stretch with the page??

P: 21
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 :)
Mar 14 '07 #1
Share this Question
Share on Google+
9 Replies


drhowarddrfine
Expert 5K+
P: 7,435
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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4.   <head>
  5.     <title></title>
  6.     <meta http-equiv="content-type" content="text/html;charset=utf-8">
  7.     <style type="text/css">
  8.         html,body{
  9.             height:100%;
  10.         }
  11.         #outer{
  12.             height:100%;
  13.             background-color:#eee;
  14.         }
  15.         #left{
  16.             height:100%;
  17.             width:400px;
  18.             float:left;
  19.             background-color:#ddd;
  20.         }
  21.         #right{
  22.             height:100%;
  23.             float:left;
  24.             width:200px;
  25.             background-color:#ccc;
  26.         }
  27.     </style>
  28.   </head>
  29. <body>
  30.  
  31. <div id="outer">
  32.     <div id="left">
  33.         left
  34.     </div>
  35.     <div id="right">
  36.         right
  37.     </div>
  38. </div>
  39.  
  40. </body>
  41. </html>
Mar 14 '07 #2

P: 21
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 :)
Mar 14 '07 #3

drhowarddrfine
Expert 5K+
P: 7,435
Then other factors in your code are playing into it and I can't help without a link or the complete code.
Mar 14 '07 #4

P: 21
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
Mar 15 '07 #5

drhowarddrfine
Expert 5K+
P: 7,435
Yes, but a link is preferred if the site is online.
Mar 15 '07 #6

P: 21
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
  1. </head>
  2.  
  3. <body>
  4.  
  5. <div id="outline">
  6.  
  7.     <div id="left">
  8.  
  9.     <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,
  10.     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 
  11.     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 
  12.     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>
  13.  
  14. </div>
  15.  
  16.     <div id="right">Here
  17.  
  18.     <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,
  19.     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 
  20.     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 
  21.     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>
  22.     </div>
  23. </div>
  24.  
  25. </body>
  26. </html>
  27.  
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2. <!--
  3.  
  4. body {
  5.     height: 100%;
  6.     margin: 0px;
  7.     padding: 0px;
  8. }
  9. #outline {
  10.     position: relative;
  11.     height: 100%;
  12.     width: 900px;
  13.     padding: 0px;
  14.     margin-top: 0px;
  15.     margin-right: auto;
  16.     margin-bottom: 0px;
  17.     margin-left: auto;
  18. }
  19. #left {
  20.     width: 500px;
  21.     float: left;
  22.     height: 100%;
  23.     position: relative;
  24.     font-size: 25px;
  25.     margin: 0px;
  26.     padding: 0px;
  27.     background-color: #00CCFF;
  28. }
  29. #right {
  30.     width: 300px;
  31.     float: right;
  32.     height: 100%;
  33.     margin: 0px;
  34.     padding: 0px;
  35.     position: relative;
  36.     top: 3px;
  37.     background-color: #33CC99;
  38. }
  39.  
  40. -->
  41. </style>
  42.  
Mar 16 '07 #7

P: 21
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!!!
Mar 16 '07 #8

drhowarddrfine
Expert 5K+
P: 7,435
Change your css to this:
Expand|Select|Wrap|Line Numbers
  1. * {
  2.     margin:0;
  3.     padding:0
  4. }
  5.  
  6. html,body {
  7.     height: 100%;
  8. }
  9. #outline {
  10.     height: 100%;
  11.     width: 900px;
  12.     margin:0 auto;
  13. }
  14. #left {
  15.     width: 500px;
  16.     float: left;
  17.     height: 100%;
  18.     font-size: 25px;
  19.     background-color: #00CCFF;
  20. }
  21. #right {
  22.     width: 300px;
  23.     float: right;
  24.     height: 100%;
  25.     background-color: #33CC99;
  26. }
Mar 16 '07 #9

P: 21
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 :)
Mar 16 '07 #10

Post your reply

Sign in to post your reply or Sign up for a free account.