473,836 Members | 1,407 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Div doesn't expand for content, help?

10 New Member
Hello,

I see this is a well known thing and have seen many answers but none have worked for me. It's just a test page I'm making and I've ran into this so I thought I'd ask how to fix it - inline & embedded CSS just now as It's just a quick test page I'm working on. Basically I've got my container div, two other div columns inside with fixed widths. In the 2nd column I have 2 divs, one is under the other, which exceeds the size of the browser. Anyway, that's fine, but the containerdiv doesn't expand by the browser size. I want it to go right down and expand to whatever, but it won't.
Some solutions I've tried:

. Adding an extra div with clear:both
. Adding overflow:hidden in the container (It hides the rest of the browser and doesn't let me scroll down)
. Taking the height:100% attribute out of the body, the container and html selectors to see if it extends automatically

No luck on all costs. The container div is just stoppping at the size of the browser, doesn't go underneath when i scroll.


Here's my code:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>sfkdgbgdsf</title>
  6. <style type="text/css">
  7. html {
  8. height:100%;
  9. }
  10.  
  11. .funkybox {
  12. background-color:black; 
  13. color:gray; 
  14. border-style:thin solid; 
  15. border-width:1px; 
  16. border-color:red;
  17. }
  18.  
  19. .boxbg {
  20. background-color:black;
  21. color:gray;
  22. }
  23. </style>
  24.  
  25.  
  26. </head>
  27.  
  28. <body style="height:100%; margin-top:0px; margin-bottom:0px; background-color:#262626; text-align:center; color:white;">
  29.  
  30.  
  31.  
  32. <div id="container" style="width:900px; height:100%; margin-left:auto; margin-right:auto; background-color:black; background-position:center;">
  33.  
  34.  
  35.  
  36. <div style="height:6px;"></div>
  37.  
  38.  
  39. <div id="heading" style="font-family:'times roman', arial, verdana; font-size:1.5em; width:886px; height:50px; border-style:solid; background-position:center; margin-left:auto; margin-right:auto;  border-color:gray; border-width:1px; background-color:#262626; color:yellow; filter:alpha; opacity:60%; font-weight:normal; text-align:center; margin-bottom:10px; x; text-decoration:underline; padding-top:8px;">Andrew's CSS Test Page</div>
  40.  
  41. <div id="left column" style="width:125px; float:left; margin-left:14px;">
  42.  
  43.   <div id="menu" style="width:125px; height:267px; background-color:black;          filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC;  border-width:1px; ">
  44.  
  45. Content
  46.  
  47.  
  48.   <div style="width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">
  49.  Content
  50.   </div>
  51.  
  52.   <div style="width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">
  53.     Content
  54.   </div>
  55.  
  56.    <div style="width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">
  57.   Content
  58.    </div>
  59. </div>
  60.  
  61. <div id="middle column" style="width:700; margin-left:10px; margin-bottom:0px; float:left; text-align:left;">
  62.  
  63.   <div style="width:590px; background-color:black; color:white; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; padding:5px; line-height:25px;">
  64.  Content
  65.   </div>
  66.  
  67.   <div style="width:200px; height:200px; background-color:white;">
  68.   </div>
  69.  
  70.  
  71.  
  72.  </div>
  73.  
  74.  
  75. </div>
  76. </body>
  77. </html>
  78.  
Aug 21 '08 #1
6 12825
David Laakso
397 Recognized Expert Contributor
Assuming I understood the question:
Among other things, the markup was invalid, you neglected to enclose the floats, and closed the divisions in the wrong order.
Corrections on the file below. Cursory checked local IE/6, IE/7, and compliant browsers.
FWIW, it's a lot easier to de-bug a file that has all the styles embedded in the head of the document.


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3.  
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6. <meta name="generator" content=
  7. "HTML Tidy for Linux/x86 (vers 11 February 2007), see www.w3.org" />
  8. <meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
  9.  
  10. <title>sfkdgbgdsf</title>
  11. <style type="text/css">
  12. /*<![CDATA[*/
  13.  
  14.       html {
  15.  
  16.       /*height:100%;*/
  17.  
  18.       }
  19.        .funkybox {
  20.  
  21.       background-color:black;
  22.  
  23.       color:gray;
  24.         border-style:thin solid;  
  25.       border-width:1px;
  26.       border-color:red;
  27.         }
  28.  
  29.       .boxbg {
  30.        background-color:black;
  31.        color:gray;  
  32.       }
  33.  
  34.  
  35.  
  36. /*]]>*/
  37. </style>
  38. </head>
  39.  
  40. <body style=
  41. "/*height:100%;*/ margin-top:0px; margin-bottom:0px; background-color:#262626; text-align:center; color:white;">
  42. <div id="container" style=
  43. "border:1px solid #fff; width:900px; height:100%; margin-left:auto; margin-right:auto; background-color:black; background-position:center;overflow:hidden">
  44. <div style="height:6px;"></div>
  45.  
  46. <div id="heading" style=
  47. "font-family:'times roman', arial, verdana; font-size:1.5em; width:886px; height:50px; border-style:solid; background-position:center; margin-left:auto; margin-right:auto; border-color:gray; border-width:1px; background-color:#262626; color:yellow; filter:alpha; opacity:60%; font-weight:normal; text-align:center; margin-bottom:10px; x; text-decoration:underline; padding-top:8px;">
  48. Andrew's CSS Test Page
  49. </div>
  50.  
  51. <div id="left-column" style=
  52. "width:125px; float:left; margin-left:14px; border: 1px solid red;overflow:hidden">
  53. <div id="menu" style=
  54. "width:125px; /*height:267px;*/ background-color:fuchsia; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px;">
  55. Content
  56.  
  57. <div style=
  58. "width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">
  59. Content
  60. </div>
  61.  
  62. <div style=
  63. "width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">
  64. Content
  65. </div>
  66.  
  67. <div style=
  68. "width:125px; height:96px; background-color:black; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; margin-top:10px; padding-top:4px;">
  69. Content
  70. </div>
  71. </div>
  72. </div>
  73.  
  74. <div id="middle-column" style=
  75. "width:700; margin-left:10px; margin-bottom:0px; float:left;text-align:left;">
  76. <div style=
  77. "width:590px; background-color:black; color:white; filter:alpha; opacity:0.8; border-style:inset; border-color:#CCCCCC; border-width:1px; padding: 5px; line-height:25px;">
  78. Content
  79. </div>
  80.  
  81. <div style="width:200px; height:200px; background-color:white;"></div>
  82. </div>
  83. </div>
  84. </body>
  85. </html>
  86.  
  87.  
Aug 21 '08 #2
AJM Project
10 New Member
Hi,

Sorry I'm quite new so bare with me. What do you mean by enclose the floats?

It seems when I posted the code (as I took content out to keep it down) I accidently took out one of the closing divs (the menu one), otherwise, the divs are in the wrong order, how?

Also, why have you put css quotes on the height attributes? I don't understand. Do I need them or not? and what actually fixed the problem?

ps. All the right side of the borders of the divs in the left column have now dissapeared.

Thank you for helping, I appreciate you taking the time to look through it. :D
Aug 23 '08 #3
David Laakso
397 Recognized Expert Contributor
If this valid online page [1] is not what you are looking for, then I misunderstood the question(s) and someone else will help you out.

[1] http://www.chelseacree kstudio.com/ca/cssd/test-30.html

overflow: hidden; was used on several containers to clear (enclose) the floats.
The goofy colors and borders were used to see if the floats were indeed cleared-- and so we both could see the selectors targeted.

Your columns were out of order because you opened the right column before you closed the sidebar.

I don't have time to list the other changes -- that's why I provided the file -- I sort of hoped you would compare my file with yours to see exactly what changed. Use the above online file for comparison.
Aug 23 '08 #4
AJM Project
10 New Member
Hello,

I did look and see what was changed. And as I said the closing div not being there was a mistake. I know what overflow does but as I am still pretty new to CSS I hadn't heard the term enclose before when relating to this.

You fixed my problem but what I just asked you was were the height attributes that you highlighted required? ie. why were they highlighted?

Basically to enable the container div to expand all the way in the future, I need to make the height attribute 100% and make sure all floated divs are enclosed?

Thanks
Aug 24 '08 #5
David Laakso
397 Recognized Expert Contributor

...but what I just asked you was were the height attributes that you highlighted required? ie. why were they highlighted?

Highlighted? I deleted them if that's what you mean?

Basically to enable the container div to expand all the way in the future, I need to make the height attribute 100% and make sure all floated divs are enclosed?
Yes the floats need to be cleared.
Normally height is not set on content bearing containers. It's ok in your little demo. But in a real world page, the height of the container(s) is determined by the amount of content. Put enough content in any container and it could expand vertically, even with text-scaling employed, from here to the Equator (if not further) without breaking out the bottom.

Most stuff will be a lot clearer for you if you embed all the styles in the head of the document. Put real content or "lorum ipsum" set at default in the containers And check the page in IE/6, IE/7 at text-size "largest"; and at least +2 font-scaling in a pre 3.0 Firefox browser, Safari, and Camino-- and with font zoom in Opera. The floats should not drop, and the text should not shoot out the bottom of any container. Coping with long words breaking out horizontally from narrow containers is yet another matter...
Aug 24 '08 #6
AJM Project
10 New Member
Excellent, I feel I understand a lot more now. Thank you David. :D
Aug 24 '08 #7

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

Similar topics

1
2255
by: ma bel | last post by:
I need help. The problem occurrs when the browser is too small to view the content. It shows a scrollbar, but when you slide the scrollbar over, the header and the footer aren't as wide as the content. site of problem: http://torr0101.home.comcast.net/ts.htm Resize the browser so that you cannot see the last input box, then scroll to the right. See what I mean? Do I need to revert back to tables for layout? I like css, but I'm...
7
15473
by: red | last post by:
This page shows 3 divs side by side surrounded by a wrapper, but the wrapper thinks there's nothing in it, so its collapsed at the top. How do I get the wrapper to expand around the divs ? http://www.cardini.tv/test/test.htm #p1{float:left;width:25%;border:solid 1px;} #p2{float:left;width:25%;border:solid 1px;} #p3{float:left;width:40%;border:solid 1px;} #w{border:solid;width:90%; margin:auto;}
7
17227
by: peter | last post by:
I use the click-to-expand menu at http://javascript.internet.com/navigation/click-to-expand-menu.html This works fine, but is there a way to expand or collapse all the menus? An example of how I use this is here: http://www.cod.edu/people/faculty/chenpe/PRAIRIE/index.html Thanks!
3
6733
by: ImageAnalyst | last post by:
I'm trying to have the user browse to a folder, once they click a button, using the standard FolderBrowserDialog tool, System.Windows.Forms.FolderBrowserDialog. I'm using VB.Net 2005. There is a property, SelectedPath, that you're supposed to be able to set that will initialize the folder browser window so that the tree structure is already opened at that folder. The problem is that it doesn't seem to work. No matter what I put, it has...
5
7887
by: Bob Imperial | last post by:
Hi folks! In need of some enlightenment here, I'm trying to get my wrapper div to expand to accommodate height-wise, to whatever content is placed in it, no luck yet and I realize it's probably something simple, I just don't see it yet. I have the following: <div style="width:600px; border:1px solid #999933;"><!-- wrapper --> <div style="width:150px;float:left;padding-left:4px;">Title</
12
5728
by: amygdala | last post by:
Hi there, | div A \|/ ------------------------------- | | | | | | div B \|/ | | __________ | --|__________|--------------
4
2810
by: ge5talt | last post by:
Longtime reader, 1st time poster :) I am in the process of overhauling a website and replacing an old table-based quirksmode layout with a standards-mode tableless one. I am currently working on pop-up webpages which used to be liquid and proportionally resizable (including input fields on them), something I have found to be tough to reproduce without tables and quirksmode. My current layout (below) actually behaves the way I'd like it to...
3
17261
by: Simon van Beek | last post by:
Dear reader, What can be wrong in my ComboBox, the property "Auto Expand" is set to Yes, but by typing in the ComboBox it doesn't expand. Is this because the source of the ComboBox is a query.
0
9820
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
0
10845
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
1
10592
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
0
9376
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
0
5650
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
0
5828
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
4456
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
2
4019
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
3
3116
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

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.