How To Divide A Webpage Into Section Using DIV?

Takotsu

Jun 21 2006, 12:45 PM

Hello.

I would describe myself as having a moderately high knowledge of html.
The one thing that eludes me is how to devide the web page into sections.
Not using tables or frames, but making seperate sections. I was told you
could use a DIV tag. But, I can't find anything about it. I'm not even sure
if what the guy was talking about was even html.

Thank you in advance for any help.

Comment/Reply (w/o sign-up)

minnieadkins

Jun 21 2006, 07:36 PM

I'm sure someone will explain better than me, but since I found the post I'll put my $.02 in.

I personally still use tables a lot, but it's possible to use <DIV> tags. Div tags are block elements, but they can be styled with css to do pretty much anything.

CODE

<div> Header goes here </div>
<div style="float: left;width: 100px;"> Menu </div>
<div style="float: left;"> Main Content </div>
<div style="clear: both;"> Footer </div>

I'm not 100% about that, but that's something of how it would work. Obviously there's more than one way to go about it as you could have nested <div>'s encased in a wrapper or whatever you like. The styling is up to you as well. Google a little and I'm sure you'll find plenty of examples. Templates for 3 column, 2 column or what have you. There's lots of different templates designed with div's on the web. It can be done, and is becoming more and more popular.

If you're good with css then I think you should definately try using div's for you layout rather than tables.

Comment/Reply (w/o sign-up)

Arbitrary

Jun 21 2006, 10:23 PM

@minnieadkins, Yep, that works well.

Here's something else that's a bit more decorated and is a three-column template:

<html>
<head>
<title>Example</title>
<style type="text/css">

div.header {
position: absolute;
top: 15px;
padding: 10px;
height: 50px;
width: 100%;
border: 1px dashed orange;
}
div.left {
padding: 10px;
position: absolute;
left: 15px;
top: 100px;
width: 200px;
height: 500px;
border: 1px dashed orange;
}
div.center {
padding: 10px;
position: absolute;
top: 100px;
left: 250px;
height: 500px;
width: 500px;
border: 1px dashed orange;
}
div.right {
padding: 10px;
position: absolute;
right: 15px;
top: 100px;
width: 200px;
height: 500px;
border: 1px dashed orange;
}
div.footer {
padding: 10px;
position: absolute;
right: 15px;
top: 660px;
height: 50px;
width: 100%;
margin: 20px;
padding: 10px;
border: 1px dashed orange;
}
</style>
</head>

<body>

<div class="header">
Header
</div>

<div class="left">
Left Menu
</div>

<div class="center">
Main Content Div
</div>

<div class="right">
Right Menu
</div>
<div class="footer">
Footer
</div>

</body>
</html>

Except that I used absolute positioning...so it's not really a liquid layout, if that's what you wanted. And definitely Google it! Tons of stuff out there. The useful stuff is...colored.

Comment/Reply (w/o sign-up)

sonoftheclayr

Jun 22 2006, 03:29 AM

Arbitrary, I am using something like that for my page but it only works in Mozilla Firefox (as far as I can tell anyway, it's the only browser I use and I checked it out in IE but [surprise!] it doesn't work).

I find it much faster and neater than tablesa and it's easier to work with because you know what DIV does what. Would you be able to use a SPAN for this or not? Just something I might try out later.

Arbitrary, you really should have used id's as they are the current standard and much faster to write!

Comment/Reply (w/o sign-up)

minnieadkins

Jun 23 2006, 02:25 AM

ID's are meant to be for elements that are only going to appear once in the page, so in this case I would say most of those would probably fit that description. The header, footer, and main content are obviously going to appear only once in that page...I would imagine that the left and right menu would be the same.

Div's work fairly well in most browsers. IE is a little more of a hassle to get working. Perhaps it's a problem with your code, and IE is just being picky.

Comment/Reply (w/o sign-up)

How To Divide A Webpage Into Section Using DIV? - how to devide the web page.

How To Divide A Webpage Into Section Using DIV? - how to devide the web page.