HTMLHelp Forums > How to make child elements always stay within a parent element?

nmduc073

Jun 26 2007, 08:32 PM

Hi,
We have an example

CODE

When I design it, I hope that label, d2 and s1 is always within d1 whatever widths of those elements are. In fact, if d2's width is 300px, it overflows d1 what I don't want.

Is there any way to do it?

Darin McGrew

Jun 26 2007, 08:57 PM

BTW, a label cannot contain a block-level element.

But if you specify a width for the parent div.d1, then it is going to be that width, and (except for browser bugs), making its child elements wider than that will not cause it to stretch.

pandy

Jun 26 2007, 09:04 PM

You mean d1 should act as a table cell and shrink-fit? There's 'display: table-cell' but it isn't supported by IE. 'float' (without a width) and 'position: absolute' (w/o width - and offset if you don't want it) also do that, but they may upset your layout.

lavazza

Jun 26 2007, 09:09 PM

QUOTE(nmduc073 @ Jun 27 2007, 01:32 PM)

When I design it, I hope that label, d2 and s1 is always within d1 whatever widths of those elements are. In fact, if d2's width is 300px, it overflows d1 what I don't want.

Is there any way to do it?

Yes, and it looks like you're pretty much on the right track

It's quite common to see what your d1 being called wrapper - but, a rose is a rose...

As long as you keep the nesting of your divs in order, it's fairly straightforward

Note: if d2.width > d1.width then d2 WILL 'overflow'

One solution:
set d2's width as a percentage (eg width: 80%;) and, although only a child by virtue of being nested within d1, it will inherit (from d1) a divisor value of 200px;
i.e.
d2 = 80% * 200px

= 160px

nmduc073

Jun 26 2007, 09:27 PM

I hope lavazza's solution is correct. I will try it.

lavazza

Jun 26 2007, 10:02 PM

QUOTE(nmduc073 @ Jun 27 2007, 02:27 PM)

I hope lavazza's solution is correct. I will try it.

I wouldn'ta posted it without first making sure it worked

nmduc073

Jun 26 2007, 11:04 PM

I am afraid it does not work.

CODE

lavazza

Jun 26 2007, 11:10 PM

edit: posted reply too soon
whoops!

nmduc073

Jun 26 2007, 11:18 PM

Here might be a solution. But I wonder if there is any better solution or not.

CODE

lavazza

Jun 26 2007, 11:39 PM

That long, contiguous string of zeroes didn't have any code to tell it to 'wrap', so it didn't!

I have put your styles into the <head> section... and one day, when your ready, you can save them as a separate file

I have used some (perhaps garish) colours hust so you can see what's what

#FFFFFF; is white
#0000FF; is blue
#999999; is grey

What's below is 'valid' html - and it does what I think you want

CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en-GB">
    <head>
        <meta     http-equiv="Content-Type"
                content="text/html; charset=UTF-8">
        <title>

            Div test

        </title>
        <style type="text/css">
            #d1{
            max-width: 600px ! important;
            margin-left:auto;
            margin-right:auto;
            color:#FFFFFF;
            background-color:#FFFFFF;
            border:5px dotted #0000FF;
            color:#000000;
            }

            #d2 {
            width: 80%;
            color:#000066;
            background-color:#999999;
            }

        </style>
    </head>

    <body>

        <form id="form1" action=" ">
            <div id="d1">
                <label></label>
                <div id="d2">
                    000000000000000 0000000000000000 000000000000000 000000000000 00000000000000000
                    0000000000 000000000 0000000 0000 00000000000 0000000000 000000000000 00000000000000000
                    0000 00000000
                </div>
                <span id="s1">...........
                </span>
            </div>
        </form>

    </body>

</html>

Oh, and I changed runat server to action=" " ... seeing as though, at least in testing mode, there's no need