The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Why does this div change height?

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #191950


    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

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

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

    The URL of this page is:

    Any suggestions would be welcome. Happy new year!



    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”.



    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.


Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.