Floating Elements

[enjay]

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?

[TheDoc]

You forgot the link ;)

[Paulie_D]

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.

[enjay]

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…

[Paulie_D]

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.

[enjay]

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

[Author]

Posts