[Solved] Why does this div change height?

[Russell]

Hello:

I hope this is a simple question related to media queries. I’m modifying Bootstrap to create a site. I have a purple box that should surround a block of text. I’ve given the div the CSS class .container-full-width.open-blurb

When the browser is full-width, the purple box shrinks to about 20px high and doesn’t surround the text box. See here:

http://note.io/1vG3W6s

But when I shrink the browser width down slightly, the purple box suddenly gets taller and surrounds the text, as it should. See here:

http://note.io/1xg2wUn

The URL of this page is:
http://testing002.compoundeyedesign.com/2015/

Any suggestions would be welcome. Happy new year!

Russell

[Senff]

On screens larger than 992 pixels, the contents of .open-blurb are floating, and then you get a situation where the container is not being cleared.

(If a parent container contains child elements that float, then the parent will not take up the children’s total heights.)

To resolve this, you could give .open-blurb an additional overflow:hidden; or give it float;left.

To read more about the theory behind it, do a Google search for “clearing floats css”.

[Russell]

@Senff

Thanks man! That solved it. I was aware of the float issue and the problems with divs, but I don’t know why I didn’t see it in this problem. It makes total sense now.

Thanks a lot and have a good new year.

R

[Author]

Posts