473,323 Members | 1,550 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,323 software developers and data experts.

Div on the right wont stretch with the page??

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
9 2500
drhowarddrfine
7,435 Expert 4TB
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
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
7,435 Expert 4TB
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
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
7,435 Expert 4TB
Yes, but a link is preferred if the site is online.
Mar 15 '07 #6
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
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
7,435 Expert 4TB
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
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

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

Similar topics

7
by: Mary Ellen Curtin | last post by:
The client wants the page to have both a left border (purple) and a right border (green). Is there any way to stretch a background image to fit the viewport? Or should I divide the background...
8
by: John Smith | last post by:
In Mozilla/Netscape, is it possible to make a DIV stretch the length of a page ithout resorting to the "repeat background image" trick? Thank you!
26
by: rkleiner | last post by:
Is there a regular expression to find the first unmatched right bracket in a string, if there is one? For example, "(1*(2+3))))".search(/regexp/) == 9 Thanks in advance.
4
by: Dan V. | last post by:
Does anyone have any idea why the right column is not aligned with the left column? It is much lower from the top. Please comment: http://officeactivate.com/newest/test.shtml Is it because...
10
by: Zeez | last post by:
Hello! I'm looking for a way to stretch an HTML page. I found a way to zoom into a web page by using this code: body.style.zoom = 200%. (this piece of code magnifies the page 2 times larger)...
1
by: Ufit | last post by:
I have a problem with displaying controls in placeholder that in turn is place in the mid cell of the table. When I run IE the table doesn't stretch properly even if I set width and ht to 100% Now...
3
by: pavel.orehov | last post by:
Hi, Does anybody knows how to stretch Bitmap in C#. Bitmap b = Bitmap.FromFile("..."); // stretch code ??? Thanks,
6
by: yuiness | last post by:
I have this CSS layout that I'd like to use for a personal site: I want the layout to stretch all the way from the top of the page to the bottom of the page regardless of how little content...
1
by: crazy works | last post by:
hello i was working on design new style for games script called onarcade and i want to stretch it , i mean i want to make the script width full screen in the script one css file and i had a...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.