0

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?

see screenshot below:

browser bug

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?

Alexander Solonik
  • 9,838
  • 18
  • 76
  • 174

3 Answers3

0

You should delete section element's margin-top: -1px; style or set .intro-lpoo element's style: overflow: auto. The reason what I thought is here: BFC

JMwill
  • 1
-1

enter image description here

Your floating elements on the top section cause the issue. If you use clearfixes , you will not have any problems!Also use the following property for responsive images.

img{
 max-width:100%;
 height:auto;
}
Nasco.Chachev
  • 666
  • 6
  • 22
  • @NascoChachev , i want to know why the problem is happening. – Alexander Solonik Dec 13 '15 at 11:15
  • @AlexanderSolonik , you've set max-width:66% to your container. that's the first problem. You'r telling that u want the 100% width but in the same time , you are setting max-width property with 66%... , you are also using floating elements. Instead of setting overflow:auto , you can use clearfixes , much better. Sometimes when you float something , it totally ruins everything on the page , exactly like right now. – Nasco.Chachev Dec 13 '15 at 11:16
  • @nNasco , nope . 66% width is applied on the child of the sectio , not the section itself. – Alexander Solonik Dec 13 '15 at 11:22
  • @AlexanderSolonik Jesus man , that happens because of the floating elements on the top section bro.. that float property ruins your things... just use clearfix... add clear:both to the 2nd section man!!!!! .... – Nasco.Chachev Dec 13 '15 at 11:25
  • i have used clerfixes ! :) – Alexander Solonik Dec 13 '15 at 11:28
  • see how overflow:auto functions here http://stackoverflow.com/questions/10244927/input-text-auto-width-filling-100-with-other-elements-floating , i think thats the issue , but want to know why , check the answer ! this has nothing to do with floats and clearfixs . check the answer . – Alexander Solonik Dec 13 '15 at 11:29
-1

Ok, let's think about it. You have intro-lpoo section with height: 100% and 2 divs into it with float. And 1 of this divs have height: 0 because in that you place absolute positioned img. The reason why your why-coworking not shrinks from the very beginning is height: 100% of intro-lpoo. But when you make your browser resolution smaller - height: 100% of intro-lpoo getting smaller, and because your right div (which contain absolute positioned img) have height: 0 and your left div ( intro-wrpr ) have float: left thats why why-coworking shrinks and fills available space next to intro-wrpr.

I hope to able to explain

Narek-T
  • 1,898
  • 10
  • 20
  • Why do u think i've used clearfix ? the bug is with the behavior of `overflow:auto` . – Alexander Solonik Dec 13 '15 at 11:37
  • Your clearfix doesnt work. because there is nothing in your right div (absolute positioned img is out from page, think that). You can verify this, just remove `float: left` from `lpoo-info-graphic` and test it. Thanks for downvote) – Narek-T Dec 13 '15 at 11:42
  • see here http://i.imgur.com/FWzwSDv.jpg , i have removed the absoluting positiong for the image , which means the height `lpoo-info-graphic` is no longer zero , also tried with absolute positioning the image , both ways does't make a difference . also the image proves , the width of the 1st section is 100% ! – Alexander Solonik Dec 13 '15 at 11:56