Issue with displaying div

  • Resolved kohaku

    (@kohaku)


    16 years, 4 months ago

    I’m working on a theme and the divs are giving me all sorts of trouble.

    My main issue is after the content area. I’ve done a clear:both; after the content/sidebar area so my footer would have a space in between.

    This is my CSS: https://wordpress.pastebin.ca/1075592

    If I add clear:both; to #info or .column, the div takes on the same color as my main content area (which you can see here: https://infragilis.net/test). Which is not what I want. If I don’t add clear:both;, however, my div doesn’t expand to fit the content. Putting a fixed height on #info isn’t a solution because my quotes database has some exceptionally long quotes in it and I don’t want them cut off/don’t want an ugly scrollbar in the middle of the page.

    I don’t know what I’m missing.

    Thanks!

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

  • Try adding float:left to #info and #below.

    You should be able to nix your empty divs (div.between and also your div#footer). You shouldn’t need these in order to create spaces between your divs.

    Once you’ve applied float:left, you can then apply different background colors to these divs and use margin-top to create the empty space.

    Obviously, all of these divs are inheriting their color from #main, so if you’re trying to separate the background-color of your content and sidebar from the footers, you could wrap these two divs in div#main, give it a background color, and pull the #info and #below divs outside of the main div.

    That way, you won’t see the light blue-green background when you apply margin-top.

    Hope that’s not too confusing, or I haven’t misunderstood what you’re trying to do.

    Thread Starter kohaku

    (@kohaku)

    Obviously, all of these divs are inheriting their color from #main, so if you’re trying to separate the background-color of your content and sidebar from the footers, you could wrap these two divs in div#main, give it a background color, and pull the #info and #below divs outside of the main div.

    It’s odd that they are inheriting their color from #main, but the float:left; trick worked. The color is normal again.

    Thanks!

    Cheers! Glad you got it sorted. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Issue with displaying div’ is closed to new replies.

Tags