CSS floated button jumps out of the wrapper division

Question

The problem i am facing with floated div is i have written this piece of code:

but whenever i try add the class ;right' ,that makes it float to the right, to the button it jumps out of the wrapper div as

How can i keep the left floated button inside the wrapper div rather then it being out of the wrapper div as in case of the second code.

score 4 · Accepted Answer · answered Jan 15 '12 at 16:44

4

Add overflow: hidden to the #buttonWrapper.

answered Jan 15 '12 at 16:44

My Head Hurts

Thanks a lot.Can you please explain it too. – deXter Jan 15 '12 at 16:46
1

floated elements don't have a fixed location so parent elements can be unsure what to do with them. setting overflow to hidden forces the element to work out what size it is, therefore including the location of floated child elements, fixing your problem – MDEV Jan 15 '12 at 16:48
2

@deXter Here is an StackOverflow answer that explains it better than I ever could: http://stackoverflow.com/a/3416217/681807 – My Head Hurts Jan 15 '12 at 16:51
isn't overflow:hidden supposed to hide content overflowing out of the div block? – deXter Jan 15 '12 at 16:53
@deXter It does, but as mentioned by SmokeyPHP it also forces the element to extend to an appropriate size to fit the floating child elements. You can use `overflow: auto` if you wish but I find that sometimes causes scroll bars to appear. Check out [this link](http://css-tricks.com/the-css-overflow-property/) about the CSS Overflow property and navigate down to the "Float Clearing" section. – My Head Hurts Jan 15 '12 at 17:04
Thanks - A lifesaver for a CSS noob :-) – Morten Mar 20 '15 at 14:19

score 2 · Answer 2 · answered Jan 15 '12 at 16:43

2

Add the style:

overflow:hidden;

to #buttonWrapper or #updateWrapper

answered Jan 15 '12 at 16:43

MDEV

2 Answers2