The last time Hackerfall tried to access this page, it returned a not found error. A cached version of the page is below, or clickhereto continue anyway

Hi, this site will show you the basics of CSS that you need to know to create structured layouts that work on different screen sizes.

First, you want to use min-width and max-width for your DIVs so they resize smaller for mobile phones without forcing viewers to scroll horizontally.

In this example we are going to use 250px as the smallest width, this should look good even on old phones.

Demo #1:

This is really long text that will wrap with the size of the DIV - try resizing your browser window smaller and larger! Notice how if your window size gets too big the DIV stops growing at 500px. But if you try shrinking the window size the DIV will also shrink until it hits 250px.

Next we are going to see how floats work, they are useful for spreading DIVs horizontally out across a page on larger screens. Yet they will still stack on top of each other when the screen size is smaller.

Demo #2:

I am the left floated DIV!

I am the right floated DIV!

We are going to do the same example again, except change the order of the actual HTML - you see that this does not change the results.

Demo #3:

I am the right floated DIV!

I am the left floated DIV!

Now let's do something interesting. Let's compare the behavior of the sizing of floated containers to containers that don't have a float.

Demo #4:

I have a float, yet I expand only to where the text width ends.

I have no float, yet I expand to the max.

Strange, huh? But you might have noticed I snuck in a BR tag! What happens if we remove it?

Demo #5:

I have a float, yet I expand only to where the text width ends.

I have no float, yet I expand to the max.

This behavior is getting weirder all the time! Even worse, if we add overflow: hidden to these elements, their layout flow and structure changes entirely!

Demo #6:

I have a float, yet I expand only to where the text width ends.

I have no float, yet I expand to the max.

Yet ironically, they still stack ontop of each other if you shrink the browser. While overflow: hidden is supposed to have a different purpose, this side effect actually is desirable for layouts.

Next up, if we set DIVs that do not have a float with a margin-left: auto and margin-right: auto we will get a centered div!

Demo #7:

I have no float, am centered, and expanded to my max.

What if we combine this with our previous trick? What result do we get? Check it out.

Demo #8:

I have a float, yet I expand only to where the text width ends.

I have no float, am centered.

The DIV will center itself against the float, till you shrink the window down. Then the DIV will shrink until it hits its min-width and then the DIVs will stack on each other. But since they are stacked, the DIV will still try to center itself. Now what happens if we add the DIV that is floated right?

Demo #9:

I have a float, yet I expand only to where the text width ends.

I am the right floated DIV!

I have no float, am centered, and expanded to my max.

If you have a big enough screen, you'll also notice that the DIV will center itself between the left and right DIVs. But be wary! The order of the HTML is important, the float DIVs must come before the not floated DIV. Here is the wrong ordering:

Demo #10:

I have a float, yet I expand only to where the text width ends.

I have no float, am centered, and expanded to my max.

I am the right floated DIV!

Oops, that does not look good! Now here is a smaller version of the working type, in case your screen was not large enough to see it. Additionally, we are going to add more text to see what happens to the left floated DIV.

Demo #11:

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.

I am the right floated DIV!

I have no float, am centered. Woohoo!

Finally, let's finish this off with an example of what clear: both does, giving us a nice layout structure.

Demo #12:

Header

Left sidebar.

Right sidebar.

Main content.

Footer

I hope that helped. Now that you know the basics, go use them! Try nesting different combinations of these behaviors, see the results, and become familiar with how they work so you become a pro. Try nesting these structures inside of each other, see what happens, debug it and perfect it! Then learn about advanced CSS techniques, like media query break points.

Continue reading on db.marknadal.com