Posts Tagged ‘width’

Starting to Position with CSS

Tuesday, November 18th, 2008

Once you have a series of

tags in your HTML you can start positioning them on your page. There are many ways to do CSS positioning, but I find using float to be the easiest to manage and get my pages showing up how I want them to.

1. Set a width on your body
You don’t have to do this, but most pages are easier to read if you don’t assume that everyone will have their browser set to the same settings as your browser. I like to design for 1024×768 resolution, with a typical width of around 800px. However, I also have done fluid widths using percentages. It’s all up to you.

2. Float everything
Once you have your maximum width, then you can float everything on the page, and have it line up. For example, if you want your navigation

to be at the top of the page, you would make it have a width of 100% and float left.

But if you wanted it to be on the right side, you’d make it a width of less than 100% and float right.

Then, anything that comes after it would be floated left, and as long as those elements had a smaller width than 600px (800 - 200), they would slide right in to the left of the navigation.

3. Use floats to create margins
One of the great things about floats is that you can use them to create margins without using CSS. For example, if my navigation is on the right and 200px wide and my body content is floated left and 580px wide, there will be a 20px margin between the two elements, without any margin tags at all.

4. Get multiple columns by nesting

elements
If you want three columns, you create two divs that float left and right, and then in the wider div, you create a second set of two columns that float left and right inside it. HTML

CSS (note that the inner divs have a width of 50% because they are half of the outer container, which is the “leftside” div:

5. Test in multiple browsers
While this technique works most of the time, some browsers react strangely to floats. You may have to play with the widths to get your elements to show up correctly.

Tags: , , , , ,
Posted in web designing | No Comments »