skunkbear
Layout your webpage using divs

You can make a simple web page with just text, pictures, and links. By default, they'll form a nice line on the left side of the browser window like a big list. If you'd rather not have your website look like a list, you can lay it out in a grid like pattern. You can create your grid out of boxes or divisions called divs. A div is similar to a span in that you can change it's background color and set the font size is in it. A span can't be set to be a certain size though or take up a specified spot on your webpage. First we will just make a div and give it a border. To create it we will use a starting <div> tag and a closing </div> tag.

one red div

All that code does it create a div whose height is 12 pixels high, width is 600px wide, and background color is red. Inside the div are the words: "wow it's a div". An average web user has a screen that is at least 1024 pixels wide and 768 pixels tall, unless they are using a tablet, phone, or outdated monitor. Sometimes it might be better to use percentages for the width and height. Let's use two divs.



You can set pixels or percentages, but the divs will just stack up below each other like a list if you let them. What's nice is when you can put a div beside another div like blocks in a line. What you want to do is "display" it as an "inline-block" like in the example below.

inline blocks

We changed the width of the divs so they didn't add up to more than 100%. Then at the end of the where we set our styles, we added "display:inline-block;". If you set one div to be an inline block, and the one after it to be an inline block, then they will both be blocks in a line. That's enough to get you started with divs. You can now set them so that they stack in line going down, or so that they line up as boxes piling to the right.

submit to reddit

More: HTMLdivdisplayinline-block

Source: Seth | 2012-05-25

Recent Posts:

Repeating background image

Don't forget to comment your work

Layout your webpage using divs

Link it together

Images- the img tag