
A Guide to Basic CSS Layout Structures and Quirks - marknadal
http://db.marknadal.com/css.html
======
sdegutis
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
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
Inline blocks have other issues, like spaces between the elements messing up
the layout.

~~~
sdegutis
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
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.

------
marknadal
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
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
great point! I'll try and remember to keep that in mind for anything else,
and/or update that in the future.

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

------
wbobeirne
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
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
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.

------
thenerdfiles
You can use

    
    
        text-align: justify;
    

on inline-block elements to avoid floats.

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

