I working on a page that has two nested DIV elements. The child DIV is
absolutely positioned within the parent DIV. The contents of the child
DIV are dynamic, but no matter how large it get, I want the child to be
rendered totally within the parent DIV. As things stand, as the child
DIV grows, it overflows and sticks out. How can I style the parent so
that it always is larger than the child?
4  2529 
CSS question, but never mind ...
On 14 Oct 2005 16:19:37 -0700, Vi************* **@gmail.com wrote: I working on a page that has two nested DIV elements. The child DIV is
absolutely positioned within the parent DIV. The contents of the child
DIV are dynamic, but no matter how large it get, I want the child to be
rendered totally within the parent DIV. As things stand, as the child
DIV grows, it overflows and sticks out. How can I style the parent so
that it always is larger than the child?
There is not really any such thing as "absolutely positioned within the
parent DIV". Once you absolutely position something, you take it out of
the flow, and it is no longer within anything (except the document).
I suspect that what you are asking for is not possible without
scripting. You might consider using floats rather than absolute
positioning, along the lines of http://www.xs4all.nl/~sbpoley/webmatters/layout3.html
--
Stephen Poley http://www.xs4all.nl/~sbpoley/webmatters/
thanks a lot for the advice. i'll check it out on monday.
On Saturday 15 October 2005 06:10, Stephen Poley wrote: CSS question, but never mind ...
On 14 Oct 2005 16:19:37 -0700, Vi************* **@gmail.com wrote:
[...]
There is not really any such thing as "absolutely positioned within
the parent DIV". Once you absolutely position something, you take it
out of the flow, and it is no longer within anything (except the
document).
Is 'parent DIV' not the same as containing block?
<quote specs>
absolute
The box's position (and possibly size) is specified with the 'left',
'right', 'top', and 'bottom' properties. These properties specify
offsets with respect to the box's containing block. Absolutely
positioned boxes are taken out of the normal flow. This means they have
no impact on the layout of later siblings. Also, though absolutely
positioned boxes have margins, they do not collapse with any other
margins.
</quote specs>
Does this not mean you could absolutely position a child within it's
parent div?
--
Robert
Robert wrote:
Is 'parent DIV' not the same as containing block?
No. The containing block is the first ancestor that is positioned
(absolute, relative or fixed). That may be the parent, grandparent, or
some other element up the tree. If no ancestors are specifically
positioned, body becomes the containing block.
Does this not mean you could absolutely position a child within it's
parent div?
If the parent is positioned, you can absolutely position a child within
it by setting top, left, etc. on the child. Those properties are now
relative to the parent, not body.
Just be careful what you wish for and use absolute positioning wisely.
I've seen way too many sites that attempt pixel-perfect layouts using
absolute positioning, but only end up terribly broken with my
larger-than-average text size. :(
--
Reply email address is a bottomless spam bucket.
Please reply to the group so everyone can share. This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics | |
by: LoserInYourFaceEngineer |
last post by:
Hello All:
I'm having trouble with a recursive function.
The function is supposed to identify nested folders in a hierarchical
folder structure.
The function "searchForFolders()" is supposed to traverse sibling
nodes in each iteration, and for each sibling node, it calls itself
again, to see if there are child nodes of the current sibling.
|
by: AGChandler |
last post by:
Hi,
I have a div (class = "brands") containing other divs, each of which
contains an image. I'm trying to set padding around the images, and my
style seems to work okay on all but Explorer (I'm using v.6). The style is
worded as follows:
..brands img {margin-left: 200px; padding: 10px;}
It looks great on Netscape, but there's no padding on Explorer. What can I
|
by: Philip |
last post by:
I am trying to make a bunched of left-floated divs that will be
contained in a larger div. the floated divs all contain a left-floated
img and text of varying sizes. If I don't set a height (or height:auto)
the larger div doesn't seem to see the nested divs, and they spill out
the bottom.
IE seems to automatically resize the larger div as long as I set the
height to 100% or any pixel size.
Mozilla doesn't recognize the percent, and...
|
by: deko |
last post by:
Is there any way to work around the blank space created by hidden divs? I'm
trying to use a relatively postioned divs with show/hide behaviors to
annotate an image. The divs show/hide onMouseOver/onMouseOut but leave a
blank space on the page when hidden (the space where the divs would normally
be). Is it possible to use z-indexing to put regular content where the
hidden divs would be? When I try to do this, the layers don't unhide as...
|
by: drdeadpan |
last post by:
Hi,
Being a newbie, pardon me if this question has been answered. I was
finding it difficult to search for my problem on Usenet 'cos I was
having a tough time describing it.. Here gow.
I have a <div> within which I have another <div> ( i.e nested divs). I
find that Firefox gives me the result I want but IE 6 does'nt. IE six
chops out the title. WHat suggestions/recommnedations can you guys
| | |
by: Guadala Harry |
last post by:
Please follow my thinking here and tell me if I'm nuts or if this is a
reasonable thing to do given the objective:
I'd like to present 3 data values on an aspx page - each styled uniquely,
and the total width to be limited to some arbitrary value (400px or so).
Given that I'd like to limit the total width, I can't use a <td> because the
width specified for a <td> specifies a minimum and not a maximum.
Consequently I'll use a DIV...
|
by: Graeme |
last post by:
Hi all.
This is driving me mad!
What I am after is a page header that will look roughly like: (the dots and
arrows would be centered and are graphics)
.............> page header text <..............
I'd hoped to to this by having three background images that would display
|
by: esteuart |
last post by:
I need to get the right combination for a div to clip any text inside and allow vertical alignment. I only have this problem in FireFox. I have 3 divs nested within each other. The outer div has display of table, the first inner div has display of table-cell and the inner-most div has the text. The outer div has a set width and height.
So here's the problem:
Without the inner divs having a width and height set, the overflow:hidden doesn't...
|
by: Ben C. |
last post by:
Hi
If I have a container div and inside the container div I float two divs
(one left and one right), the containting div will collapse as the
floated divs will no longer prop it up, meaning that any background
colour or image on the containing div will not be visible.
Now, suppose I put left and right padding on the containing div. How
come, if the containing div has collapsed, does the padding of the
container still apply to the two...
|
by: Steve |
last post by:
Hi;
I'm working on a demo of using a timer on a web site that is made
visible by making a div visible.
My "PopIn Box" div is empty on the page. Before making it visible I
used javascript to get the content from another hidden div. I'm
doing it this way to make it easier to add in more messages by simply
putting more hidden divs on the page.
|
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,...
| | |
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...
|
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...
|
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,...
|
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...
|
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();...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
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
|
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...
| |
