3 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 8 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 34 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 8 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Very Very insightful Gary ,

Very Very insightful Gary , thanks Smile , 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.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 4 hours 34 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.