CSS/HTML – <div> not expanding with content

  • Resolved theone85ca

    (@theone85ca)


    15 years, 5 months ago

    Hey All,

    Let me start by by saying thanks for any help, I’m tearing my hair out.

    Ok, so, this seems like a fairly easy problem to solve but I just cant seem to find out where the damn code is.

    The website is … https://www.nickwood.ca
    CSS File is … https://www.nickwood.ca/wp-content/themes/overstand_en/style.css

    This being my first attempt at using WordPress I’m tearing apart an existing template, the Overstand theme. There’s a bunch of code in the CSS file I’m not using right now so please excuse the mess. I’m not completely new to CSS though it certainly feels like it today.

    I’m trying to have the various content blocks just stretch with the content applied to it. My understanding this is what div’s should be doing by default. This is however not what is happening. There’s a ‘min-height: 400px;’ property applied to the ‘headlinefull’ div, which is the div that is not expanding.

    So basically, I need the ‘headlinefull’ div to expand with the content placed in it.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Your problem is floats. headlinefull needs a float: left on it. Its that missing float that is causing it to not expand its height. However, when you add that float, its going to shift the inner content around in ways you won’t want.

    The issue is, the total width of all sections you want contained within headlinefull, adding in the left and right padding of those sections also, can not be wider than the width of headlinefull. You may need to make them a bit narrower than they are now defined.

    Thread Starter theone85ca

    (@theone85ca)

    Ok, awesome, thanks!

    Forgive my … stupidity, but why would a float effect the div in that way?

    A float gets taken out of the normal stream of document flow. The reason the container div was 400 pixels tall was only because of the 400 pix minimum. If you didn’t have that it would be been 0 pixels tall. because the content within it was floated thus that content in a way was not really in its container because the floats were taken out of the normal document flow.

    By floating the container it forces the content to remain within it.

    Floats are confusing until you understand the concept and until you’ve worked with them for a while. Once you have one section of a design floated, the solution to problems like that is often to keep floating the inner sections also. You might want to Google for something like float tutorial and learn about what they are and why they work as they do.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS/HTML – <div> not expanding with content’ is closed to new replies.