Sun, 2015-12-13 12:13
I have 2 section in my HTML document see Here, now when i reduce the window size to about 820px the 2ns section shrinks , Why does that happen?
now the second section has overflow:auto, if I remove that, everything works fine, Link HERE
But what is really causing the issue, the section element is definitely a block element, so why is it not taking 100% width? Can anybody explain?
Sun, 2015-12-13 20:06
#1
Auto?
I see this
.why-coworking { overflow: hidden; position: relative; text-align: center; }
You're creating a new block formatting context with the {overflow: hidden || auto:}. That does not clear the floats. It only makes the element aware of them, so it narrows the element and doesn't slide under the float element. In this case, the text div of the top section is slightly longer than the image to its right and the second section bumps into it.
When you delete the overflow property, the element slides under the first section, but the text is clear (tested at 800px width; narrower viewports may exacerbate the issue.)
You can simply set the second section to {clear: all || left;}, or set the first section to {overflow: auto || hidden;} which will cause the floats to be enclosed. You do have the article book-marked, don't you? It's old but still applicable.
Why are you using that silly bootstrap junk? Likewise the bug-wrapping, whatever that is? They are junk and using them will lower your IQ.
gary
Wed, 2015-12-16 07:07
#2
Very Very insightful Gary ,
Very Very insightful Gary , thanks 
, but this container collapsing problem is quite an elementary problem , but in this instance i am somehow puzzled at how around 800px the 2nd section wraps.
I have used clearfix on the 1st section , should that contain both its floated elements ? and since it contains both the sections , should't the 1st section take the height of the tallest element inside it ?
I am a bit confused because i have used the fix I.E. clearfix and it still does't work.
Wed, 2015-12-16 15:38
#3
And yet …
The second section does bump into the text div of the first section.
I don't know why the mini clearfix isn't working for you, nor do I see why it should. Simply give the first section a new block formatting context, or add the clear property to the second section.
g