WordPress.org

Ready to get started?Download WordPress

Forums

floated divs are not contained inside post div container (10 posts)

  1. isonychia
    Member
    Posted 1 year ago #

    I made 2 floated div's inside a page. One is floated left the other floated right.

    The problem is the divs no longer exist INSIDE the content div where they should be. So my background color of white which is defined in my post text div css is not as it should be because the content is technically not inside the div because it's floated.

    In other words the floated divs are no longer inside the post div so there is no white background behind my content. Other pages with no floated divs have the white bg color because they exist inside the div.

    Any ideas how I can fix this?

    Thanks
    iso

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you use overflow: hidden; to the white background element?

  3. isonychia
    Member
    Posted 1 year ago #

    That worked but my container is now like 50px wide and floated all the way to the right.

    Was I supposed to contain the floated divs on the page inside another div?

    I hope not because that means I have to go back to every page and add the wrapper div.

    iso

  4. isonychia
    Member
    Posted 1 year ago #

    So something like:

    .container_for_floated_products{

    }

    I just don't know the trick to make this work.
    width?
    Height?

    iso

  5. Andrew
    Forum Moderator
    Posted 1 year ago #

    Check if the page has valid markup first
    http://validator.w3.org/

  6. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @isonychia -- Not sure I'm understanding the problem, but why can't you just apply the white background to the floated elements?

    If you can post a link to your site, it will be much easier for people to offer specific help.

  7. isonychia
    Member
    Posted 1 year ago #

    This is the problem I'm having:

    http://stackoverflow.com/questions/2062258/floating-stuff-within-a-div-floats-outside-of-div-why

    I will try the overflow but I thought I tried that and it didn't work.

    Here's the page:

  8. isonychia
    Member
    Posted 1 year ago #

    I tried overflow hidden and it didn't work.

    If I do this it works but I'm not sure thats right.
    .post-text{
    background-color:#ffffff;
    float:left;

    }

    All I want is to be able to do is float one div left, then float one right next to it, then under those two float another div left WHILE keeping all the content inside the .post-text div

    I never ran into this problem before in wp but I never created floated divs inside the content area.

    It just seems wrong to modify the content div(post-text) which is why I figured I should probably have wrapped those 3 divs inside a wrapper div inside the content div. Hope that made sense.

    What I should have done is stuck to tables, but I didn't want to use tables because I constantly read I shouldn't but then I have to float stuff and then I run into problems. Sometimes this web stuff is so complicated just to do simple things it's really annoying. So many rules/problems just to get 2 boxes lined up next to each other.

    iso

  9. isonychia
    Member
    Posted 1 year ago #

    I currently left the page I posted with the float fix, so thats why it looks like it's fixed.

    iso

  10. isonychia
    Member
    Posted 1 year ago #

    I removed the float and tried this, see below. (this may be an old school hack)I would be open to a better option if one exists.

    --------------
    CSS Container and float DIV

    A common problem with the floating div element is that the floats’ container does not stretch up to accomodate the float. If you set a background image to the container div, you will notice that the float div appears outside of container.

    The solution is to add an extra div element with clear: both after the floating elements. The element with this property doesn’t allow other elements floating upon it and so it will stretch the container to suit the floating div.
    --------------

    iso

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.