473,605 Members | 2,734 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Positioning within divs

162 New Member
Hello all. Lets see if i can explain this. I will start from the inside out.

div.Data holds dynamic copy. It lives and is incorrectly spilling out the bottom of div.SiteContain er. Why is this? Shouldn't the container div stretch to fit the data within it? I know that by removing the position:absolu te; in div.Data it works but i need to position the div.

Another issue is that div.PageFooter is incorrectly positioning. I want it directly below div.Data inside of div.SiteContain er.

You can find the example here, http://www.tlcgiftsandbaskets.com/demo/position.htm. This code is stripped from the home page of the URL if you want the whole thing.

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css" title="">
  2. body{ 
  3. margin:0px; 
  4. text-align: center;
  5. }
  6.  
  7. div.SiteContainer{ /* centers to the page.*/
  8. position: absolute;
  9. z-index:1;
  10. width: 960px; 
  11. left: 50%;  
  12. margin-left: -480px;
  13. border: 1px solid green; 
  14. }
  15.  
  16. div.Data{
  17. position: absolute; 
  18. z-index:2; 
  19. width: 600px; 
  20. top:100px; 
  21. left:100px;
  22. border:1px solid yellow;
  23. }
  24.  
  25. div.PageFooter{ border:1px solid red; width:600px; }
  26. </style>
  27.  
Expand|Select|Wrap|Line Numbers
  1. <div class="SiteContainer">
  2.  
  3.     <div class="Data">
  4.  
  5.         Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
  6.         <br />
  7.         Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
  8.         <br />
  9.         Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
  10.         <br />
  11.         Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
  12.         <br />
  13.         Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.<br />
  14.         <br />
  15.  
  16.     </div>
  17.  
  18.     <p>
  19.  
  20.     <div class="PageFooter" style="">Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate. Quote meon an estimate et non interruptus stadium. Sic tempus fugit esperanto hiccup estrogen. Glorious baklava ex librus hup hey ad infinitum. Non sequitur condominium facile et geranium incognito. Epsum factorial non deposit quid pro quo hic escorol. Marquee selectus non provisio incongruous feline nolo contendre Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum.</div>
  21.  
  22. </div>
  23.  
Oct 26 '07 #1
1 1445
drhowarddrfine
7,435 Recognized Expert Expert
Shouldn't the container div stretch to fit the data within it?
No. Parent elements are never to expand to contain floated or absolutely positioned elements. IE will do this but this is a bug in IE.

I'm going to bed so didn't look closely but, in regards to your second problem, remember that absolutely positioned elements are removed from the normal flow and other elements may take their place. This causes things like footers to rise up into the middle of a page, for example.

btw, your doctype is incomplete and puts IE into quirks mode. See the article on doctypes under Articles above. Use html 4.01 strict.
Oct 26 '07 #2

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

Similar topics

13
3036
by: murali | last post by:
Hello everyone, I used absolute positioning with div tag in my website. The page looks cool as long as someone doesn't try to zoom in by increasing the text size (ctrl++ or thru changing font size in browser settings). When someone does that, the layers seem to overlap and the layer with a greater z value pops in front and the other layers are pushed back. The most obvious solution will be to prevent the user from increasing the text...
9
32044
by: Bryan R. Meyer | last post by:
Hello Everyone, The problem of browser resizing has become an issue for me. While redesigning my webpage, I set the left and right margins to be auto so that my content would be centered. However, there are images that I used absolute positioning in order to place them in the appropriate location on my page. When I do a browser resize, these images do not move (obviously). However, the rest of my content is auto centered as...
2
3039
by: Egon Pasztor | last post by:
Hi. I'm new at CSS, so maybe this is obvious, but I've looked around quite a bit looking for a solution. I'm playing with the vertical positioning of elements in a 2-column layout. The prototype "scaffolding" page I'm playing with is here: http://www.eecs.berkeley.edu/~pasztor/test.html It looks right in "Mozilla Firefox", but not in IE 6. In IE 6, the three "nav" blocks are rendered right after one another in a vertical column.
1
1653
by: David Ehmer | last post by:
Within divs my pages are rendering with the 2nd and subsequent elements indented slightly. eg the first paragraph, list item or heading is where it should be, all the rest in the div (whether they are img, h2, p, li etc) are indented a small amount. If you have IE5.2Mac see the link below for an example of this. Note these divs mostly aren't positioned. ie they just sit in the normal flow. Seems to be a problem specific to this...
9
1799
by: Frances Del Rio | last post by:
I have a pg with lots of divs, one of them is a gray bar about 150px down from the top and 20px from the left... this bar (an image) is 767px wide and 1px high.. however, even though all divs are positioned consistently in IE and Netscape, in Netscape (7.1) the bar div ONLY is about 10px ABOVE where it should be.. code: HTML: <div id="bar"> <img src="images/bar.gif" width="768" height="1" border="0"> </div>
1
1847
by: no0bodyhome | last post by:
Why am I having so much trouble positioning divs? Am I in a tables mindset here? Why doesn't content flow below or alongside where it is suppose to? I created the example below to give you some idea of what I mean. Please keep in mind, content is within the specified width and may be images or text. For some reason it just seems to have a mind of its own and always wants to go to the next line and to the left.
3
4657
by: Oddball | last post by:
I have a problem with the positioning of two divisions. They are containined within a content division in which all the page content happens (ie not the menus, etc.). The behavior I would like (and the behavior that happens in IE) is for the content division (from now on 'ConDiv') to resize with the content of either of the sub divisions (MainDiv and NewsDiv). I am trying to get the divisions to position directly next to each other. ...
17
3038
by: George Hester | last post by:
http://tinyurl.com/5uj6w The lower middle icon the "block" should not drop down when the mouse is over it. How can I stop that? Also the navigation divs both top and bottom should follow the scroll right. Both of these issues occur in IE 6 but not in IE 5.5. You can get the horizontal scroll bar for the window by increasing the size of the image wider than the display area of the window. Assumes 600x800 default display size. Thanks...
4
7809
by: TheCeej | last post by:
I'm sorry to post what is ultimately a myspace problem, but I'm sure I'd still be having this problem with any html/css document, so the answer would more than likely be able to help anyone out. I'm pretty sure I know what the problem is already. I just don't know how to fix it. I'd be very grateful of any help. I'll post what I'm trying to do, what keeps happening, what I believe the problem is, the link to my page and the css, and things...
2
3152
by: nonsensitor | last post by:
I'm just learning xhtml & css, primarily from westciv's online tutorials and css guide. I've run into a couple of problems with a page I'm developing that I can't figure out. The first problem is that I would like to display some text on top of an image within the header. I've tried using absolute positioning to specify where the phone number should appear in relation to the parent div (#header). However the text appears to be positioned in...
0
7934
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
0
8424
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...
0
8415
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...
1
5886
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
0
5445
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
0
3912
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
3958
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1537
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1270
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.