Basic Div Layout (Part 2)

Creating Simple four-part div layouts with HTML and CSS(3).

The first part of a div based layout should be some sort of wrapping div. Although I don't use this method, it can still make good practice. The Second part, but not always, is your header. Mine is labeled "header" with an ID attribute. The third, and most important, is your body, or main content area, div. Last would be your footer.

Category:

Education

Tags:

• html
• html5
• css
• css3
• tutorial
• div
• divs
• attma92
• web
• design
• development
• layout
• rounded
• borders

[dyleet]

A few questions: How do I add another div for a navigation bar to the left of the body, but underneath the header and on top of the footer. Essentially splitting the body in two I guess. Also, how/where do I set the font style for my written content?

Any help is much appreciated, I come from a print design background, so I don't know a lot about web.

[attma92]

@dyleet So you just want to add an area for your navigation?

You would set all of your styling in your CSS document.

Sprry for such a bland comment ^__^

[richardlipp21]

very nice thanks

[90cdowns]

Is it possible to position a div column on the page to a side like, say i wanted a column on the left side and to add content there as well, if so how.

[fabmkk]

your tutorial helped so much, thanks.

[yucaroo]

Excellent tutorial - thank you...

[kevingarywilkes]

Great video. I used to work with tables, and I'm just beginning to learn Div tags. Thanks for the help with the CSS too. If you would like to post anymore videos on CSS, I'd appreciate it. I am interested in building horizontal menu bars in the header as well.

[dyleet]

It's really nice to see someone making a basic page that doesn't look absolutely disgusting.