A Guide to Basic CSS Layout Structures and Quirks | Hacker News Reader

A Guide to Basic CSS Layout Structures and Quirks

db.marknadal.com

68 pointsmarknadal16 comments

On a related note, the other day a colleague linked me to his simple guide[1] on doing responsive design in CSS. Rather than being an in-depth guide like this one, it complements it by providing a high-level overview of some simple tricks you can (should probably?[2]) use for accomplishing basic/common layout tasks.

[1]: http://www.adamkaplan.me/grid/

[2]: All except the "float: left" stuff; I'm still on the fence between that and "display: inline-block; vertical-aling: top"

I tend to stay away from floats when I can use display:inline-block. Floats tend to cause me more heartache than they solve.

Especially if its a list I always use inline-block but they each have their drawbacks.

Inline blocks have other issues, like spaces between the elements messing up the layout.

Are there other issues than the spaces-issue? This one is a non-issue for me, since I use Hiccup[1] for Clojure, which collapses all whitespace for me.

[1]: https://github.com/weavejester/hiccup

If you're intending to target < IE7 then inline-block only works on elements where the default display type is inline. It's less of an issue now of course, but despite float having certain issues (example: having to use a clear:both with frequency) it's the preferred route.

Then again, you might just want to look at a grid system which will handle all the quirks for you.

Hi, I made this quick guide to help my father-in-law with learning the basics of CSS quirks. I hope newbies find this useful, and it would make for a great share with your aunt/uncle/mom/dad/friend whom is just getting into HTML and CSS wand wants to learn basic layout.

Very nice.

I might suggest pagination, and individual pages for each example, since as you get further down the story and are resizing to see behavior, the page scrolls horizontally and you lose your vertical position (on Chrome, at least).

great point! I'll try and remember to keep that in mind for anything else, and/or update that in the future.

It's really fun to read in Firefox's 3D View[0].

— [0]: https://developer.mozilla.org/en-US/docs/Tools/3D_View

Thank you for sharing this, I didn't even know firefox have this feature

> I have a left float. And I am overflowing with text! But wait, if I am overflowing with text why is my text still visible if I have an overflow: hidden property? Weird, I guess that does not apply to text, but other HTML that could be in me, like images.

It's not applying because there's no height / max-height set, so the text is free to wrap and grow the element vertically.

I suppose it says a lot that these aren't so odd, but only because we've gotten used to the behavior. Stockholm syndrome, anyone?

One thing that bugs me about the final example is the markup is not indicative of the layout, which is something I try to adhere to. Screen readers will jump to content in the order of left sidebar -> right sidebar -> main content, while most frameworks float everything left and fill the space, so that a screen reader and the markup would read from left to right.

Using floats for anything but actually floating boxes/images in running text should be a thing of the past. We have flexbox and media-queries for those purposes now.

I wait for the day that float-based layouts will be seen as antiquated as table-based layouts.

Unfortunately flexbox wasn't present in IE versions prior to 10, and then it was prefixed until 11.

Firefox also only has partial support.

http://caniuse.com/#feat=flexbox - see the "Known issues" tab for other caveats.

This is going to prevent widespread adoption for a while.

Floats also parallelize badly, unless you clear them. It may be the case that using floats for layout will perform badly as well.

You can use

    text-align: justify;

on inline-block elements to avoid floats.

Use row-based layouts, but without the <table>s.

Reply on news.ycombinator.com