Grow your CSS skills. Land your dream job.

DIV not respecting height of floated sibling elements.

  • # September 16, 2011 at 12:48 pm

    This is actually ironic because had a conversation with @WolfCry911 not more than 20 hours ago about using


    to have a parent div respect the dynamically changing content (height) of a child div. So today I’m faced with that very issue and my way (the crappy way listed above) is not working. LEARNING TIME!

    http://how-do-i-find-peace.com/sole

    All the elements are positioned as I would like them to be, however the primary container, #container is not adjusting to the heights of the divs floated within it. Anyone care to drop a knowledge bomb on me?

    Thanks,
    Tanner

    # September 16, 2011 at 2:36 pm

    Anyone?

    # September 16, 2011 at 3:03 pm

    The elements you’re trying to clear are not floats and so the ‘evil extraneous clearing element’ will not work. Although you’ve set them to float, you’ve also set them to position: absolute which overrides the float. There’s no way to contain AP elements. I’d suggest removing the positioning properties.

    # September 16, 2011 at 3:08 pm

    fuck that. haha. I can’t get them positioned without APing them. I’m going to make a background with a 960px width of white space and center it on the page. BAM! QUICK FIX!

    # September 16, 2011 at 3:18 pm

    SHAZAAM! http://how-do-i-find-peace.com/sole

    GRAPHICHAX

    # September 16, 2011 at 3:48 pm

    Seems like there’s a lack of a grid here. http://i51.tinypic.com/1568qjq.png

    # September 16, 2011 at 3:57 pm

    tanner, the layout breaks with only a single increase in font-size. And what happens when the content changes? – it breaks again. You stated in the other thread that you needed fluid height – AP is not what you want here.

    Although, the white background isn’t a bad idea. You could still use it with floats ;)

    # September 16, 2011 at 5:08 pm

    Ah CRAP. Dammit @Wolfcry911, you’re keeping me honest. @ChristopherBurton you’re correct, I’ll make a not of that, thank you.

    I can’t get them to position correctly using floats. Have a look now and you’ll see what I mean.

    http://how-do-i-find-peace.com/sole

    Also, I never know what people mean when they say “increase font size”. Do you mean if I ctrl+ and zoom? Or if I were to change the font size in the css from 12px to 14px?

    # September 16, 2011 at 6:04 pm

    Yes, I meant with cmd + or ctrl + , which is not an unreasonable expectation. I like to design for a minimum of two increases with three (or more) preferred.

    You need to answer a few questions before knowing the best way to style. Could the sidebar potentially run the full length of the page (along side the blog section)? Can the source order be changed or is it established in the specific order you want?

    The very first thing to do is get rid of those large margins you’ve previously established for the AP elements (now floats).

    # September 17, 2011 at 3:00 pm

    @WolfCry I will be revisiting this on Monday (this job is for the company that employs me not a freelance client). Hope you’ll be available to talk. Thanks.

    # September 19, 2011 at 9:03 am

    @Wolfcry911 happy Monday.

    Yes, the side bar will have widgets so it could potentially run longer or shorter than the blog content area. In most cases I believe it will be shorter of course.

    I’ve gotten rid of the APing.

    I like the order the source is in now, but I suppose I’m early enough along that I could change it. Do you have a suggestion?

    T.

    # September 19, 2011 at 9:31 am

    I’m a little better off now. http://how-do-i-find-peace.com/sole

    You’ll notice the sidebar is pushing the Recent Blog down.

    CSS:

    #container {width: 960px; margin: 0 auto 0 auto; height: auto;}
    #recentNews {width: 400px; margin: 20px 0 0 10px; height: auto; float: left;}
    #galleryFront {width: 250px; margin: 20px 0 0 20px; height: auto; float: left;}
    #recentBlog {position: relative; top: 0; width: 650px; height: auto; float: left; margin: 20px 0 0 10px;}
    #sidebar {position: relative; top: 0; width: 250px; height: auto; float: left; margin: 20px 0 0 20px;}

    HTML:



    NEWSLorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.




    GALLERYLorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.





    BLOGLorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.




    # September 19, 2011 at 10:00 am

    Did the source order change from last week (I thought the sidebar came last)? Anyway, if it’s not too late to change the order I’d group the news, gallery, and blog sections together in a div (column 1) and the sidebar separately (column 2). That’s essentially what you have – a 2 column layout, with the first column containing 2 columns within it.

    So the div wrapping the first three sections would float left and then the sidebar could float left next to that.

    # September 19, 2011 at 10:02 am

    So you’re suggesting:

    Left div contains News and Gallery
    Right div contains Sidebar

    What about the Recent Blog post? It spans two columns. Can I include it in Left div? I’m going to try.

    # September 19, 2011 at 10:18 am

    Got it @Wolfcry911 ! Any criticisms? Besides the crappy br? haha.

    http://how-do-i-find-peace.com/sole

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".