DIV, isn't it a full width element?

[1DMF]

I'm a bit confused, I have a form, however one of the label texts falls onto two lines, this of course is messing up the line up, so i have put a DIV round the label/input to keep them together and make the next label/input drop down to the next line.

Now I understood that a DIV was 100% wide, yet the enclosing DIV is only as wide as the input field, why?

I have place a border round it so you can see what i mean.

http://dev.justlifecover.co.uk/quote_notqual.html

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

ok I've found if I change the float:left to position:absolute, it behaves as expected.

Though the label still doesn't expand the div to the correct height, so I have added a height, i've also applied vertical-align:middle, but the input field is not middle aligning.

Why is the div behaving like this?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Foamcow]

#webForm3 is floated and so will not be full width but rather the width of its content.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[1DMF]

you've lost me #webform3 div isn't floated?

in the end position:absolute , a fixed height and applying a top margin to the input gave the desired result.

not sure why margin:auto 0; applied to the input didn't vertical align it!

but there you go, I don't get alot of this CSS stuff ;-)

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[monksnake]

Now I understood that a DIV was 100% wide, yet the enclosing DIV is only as wide as the input field, why?

An element can not be larger than the container holding the element. KOOLAID OH YEAH

<.

 

[Foamcow]

Duh, you're right. I didn't read the CSS properly <blush>

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Foamcow]

First off... a typo

#natlab {
    position:ab[COLOR=red][b]os[/b][/color]lute;
    height:35px;
}

You don't need to do that. Try this instead:

#natlab {
    float:left;
}   

#natlab input {
    margin-top:8px;
    margin-left:10px;
}

The reason is that if an element is floated inside a non floated container then the container's height is not effected by the floated element.
However, if you also float the container it's height will be effected by the floated element(s) within.

So, since the label is floated it will not change the height of the div you put around it and the input element.

The solution therefore is to float the div too!



Finally, an element can be larger than it's container if that element is floated. That's normal, and correct behaviour.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[monksnake]

You are correct Mr. Foamcow I am mistaken

<.

 

[1DMF]

that doesn't work foamy, the div doesn't go 100% wide, that was how I had it in the first place!

You were right about the typo! so all I now use is the height:35px; and it seems fine.

I don't know why floating the div stops it being 100% wide, but expand in height.

If you don't float it, it is 100% wide but doesn't expand in height.

I understand floating takes the element out of the normal document flow, but surely the div should still be 100% wide.

So would you float it and give it a fixed width or do what i've done and not float it but give it a fixed height.

Is there really any difference?



"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Foamcow]

Think of floated elements as being in their own little world.

Say you have element B inside element A.
You float element B - it now exists outside the normal flow, so it won't affect element A in any way.
Now if you also float B, it goes into the same 'special place' as A, so A can affect it again.


I misunderstand what it is you want to do.
The fix I provided will make the div around the label and input box the width of the form/div container, will keep them together and will make the next label/input start below.


If the element is outside the document flow, then how does it determine what 100% is? 100% of what?

If you set a height then the browser (and I don't mean IE6) will keep the element at that height regardless of what is inside it. So if your type size changes it will either disappear or poke out of the container. You could try setting the height in ems to get around this, since ems are proportional to font size.


Which div are you talking about? I thought you mean #natlab

Try this, which works in FF. Can't test in IE at the mo.

#natlab {
    height:35px;
    float:left;
    width:100%;
}   

#natlab input {
    margin-top:8px;
}

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Foamcow]

I re-read your post and you mention the border around the div.
So do you mean the one around the entire form?

The only border I see is around a fieldset, which is set to 350px wide.

The div, #quote_notqual, which surrounds the form is 100% wide (at least in FF)


<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[1DMF]

If you set a height then the browser (and I don't mean IE6) will keep the element at that height regardless of what is inside it. So if your type size changes it will either disappear or poke out of the container.

hmm this is very true, fixed height no good if font size changes, I guess I could use min-height. but i'm gonna float it and try width 100% and see what happens.

Yes we are talking #natlab


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

sorry i removed the border, it was a testing border tro see how big the div was, the border was applied to #natlab

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[1DMF]

yup that works, float:left, width:100% , so again I don't understand why I have to apply width 100% to #natlab, when it should be 100% by default.

You say that elements floated go into their own little world outside the document flow and are not affected by their parent elements.

but surely they are still contained and effected by their parent elements, else they wouldn't be contained within them , such as the fieldset or form tags or containing div.

the fieldset has this...

#quote_notqual fieldset {
    width: 350px;
    padding: 3px 0px 3px 0px;  
    margin: 0 auto; 
}

so everything in the fieldset has a width of 350 and aligns all containing labels and inputs (even though they are floated) -> so why, if a floated element is removed from the normal document flow.

What makes a floated element decide what it will or won't adopt, take notice from parent/containing elements?

is float like saying go to another dimension but still hang out with ya close buddies, like a ghost haunting you?.

there but not there!


"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.

 

[Foamcow]

but surely they are still contained and effected by their parent elements, else they wouldn't be contained within them , such as the fieldset or form tags or containing div.

Yes, they are, but they don't affect their container and can protrude out of it.

so everything in the fieldset has a width of 350 and aligns all containing labels and inputs (even though they are floated) -> so why, if a floated element is removed from the normal document flow.

Because they are all floated.
Your original problem was that the one surrounded by the div wasn't making the div's height expand to accomodate it.

And the style rule you quote there sets the fieldset to be 350px wide, not it's contents. The content's will be 350px wide if they are block level elements and they are not floated.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[1DMF]

nothing is ever simple is it

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you.