5 ms·

A Guide to Basic CSS Layout Structures and Quirks

68 points by marknadal 13y ago

marknadal 13y ago
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.
- kingnight 13y ago
  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).
  - marknadal 13y ago
    great point! I'll try and remember to keep that in mind for anything else, and/or update that in the future.
- thenerdfiles 13y ago
  It's really fun to read in Firefox's 3D View[0]. — [0]: https://developer.mozilla.org/en-US/docs/Tools/3D_View https://developer.mozilla.org/en-US/docs/Tools/3D_View
  - ibrad 13y ago
    Thank you for sharing this, I didn't even know firefox have this feature
sdegutis 13y ago
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/ 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"
- wil421 13y ago
  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.
  - dsego 13y ago
    Inline blocks have other issues, like spaces between the elements messing up the layout.
    - sdegutis 13y ago
      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 https://github.com/weavejester/hiccup
      - unfunco 13y ago
        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.
wbobeirne 13y ago
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.
the8472 13y ago
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.
- McGlockenshire 13y ago
  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 http://caniuse.com/#feat=flexbox - see the "Known issues" tab for other caveats. This is going to prevent widespread adoption for a while.
- pcwalton 13y ago
  Floats also parallelize badly, unless you clear them. It may be the case that using floats for layout will perform badly as well.
McGlockenshire 13y ago
> 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?
thenerdfiles 13y ago
You can use text-align: justify; on inline-block elements to avoid floats. Use row-based layouts, but without the <table>s.

68 points by marknadal 13y ago

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.

kingnight 13y ago
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).
- marknadal 13y ago
  great point! I'll try and remember to keep that in mind for anything else, and/or update that in the future.
thenerdfiles 13y ago
It's really fun to read in Firefox's 3D View[0]. — [0]: https://developer.mozilla.org/en-US/docs/Tools/3D_View https://developer.mozilla.org/en-US/docs/Tools/3D_View
- ibrad 13y ago
  Thank you for sharing this, I didn't even know firefox have this feature

sdegutis 13y ago

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/ 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"

wil421 13y ago
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.
- dsego 13y ago
  Inline blocks have other issues, like spaces between the elements messing up the layout.
  - sdegutis 13y ago
    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 https://github.com/weavejester/hiccup
    - unfunco 13y ago
      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.

wbobeirne 13y ago

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.

the8472 13y ago

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.

McGlockenshire 13y ago
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 http://caniuse.com/#feat=flexbox - see the "Known issues" tab for other caveats. This is going to prevent widespread adoption for a while.
pcwalton 13y ago
Floats also parallelize badly, unless you clear them. It may be the case that using floats for layout will perform badly as well.

McGlockenshire 13y ago

> 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?

thenerdfiles 13y ago

You can use text-align: justify; on inline-block elements to avoid floats. Use row-based layouts, but without the <table>s.