Grow your CSS skills. Land your dream job.

Floating Elements

  • # August 28, 2012 at 8:42 pm

    I think this may be a common issue, but I can’t put my finger on it.

    As you can see in this CodePen, I have two “section” elements which are floated left, and an “aside” element that is floated right. For some reason, the “aside” element is getting “pushed” down, and isn’t staying at the top of the page.

    Anyone have an idea?

    # August 28, 2012 at 9:26 pm

    You forgot the link ;)

    # August 29, 2012 at 6:21 am

    Your section widths etc don’t work.

    You have two sections both 65% PLUS an aside at 15% PLUS right-margins. You’re up to 145% of the available space even without the margins.

    I think you’ll either need to change those widths or re-structure your code.

    Finally, it’s not a good idea to mix & match percentage widths and pixels. Stick to one or the other.

    # August 29, 2012 at 9:36 am

    Thank you. I think I understand now, didn’t realize that elements that are floated so that they are vertically aligned contribute to overall width. A bit counter intuitive… I fixed with with some markup.
    As far as mixing % and pixels, I think I’ve seen a variety of opinions on the matter…

    # August 29, 2012 at 9:46 am

    I’m not saying you can’t mix and match % and px it’s just that it’s generally not a good idea (for layout) unless you have coded around it.

    Media queries will fix a lot of problems.

    As for what you are after, until I/We see a mock-up image then we don’t really know the ‘best’ way to code your chosen design.

    # August 29, 2012 at 4:19 pm

    This is how I am planning to do it for now: http://codepen.io/enjay43/pen/FspwA

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

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