Jump to content
xisto Community
takotsu

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

Recommended Posts

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 youcould use a DIV tag. But, I can't find anything about it. I'm not even sureif what the guy was talking about was even html.Thank you in advance for any help.

Share this post


Link to post
Share on other sites

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.

<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.

Share this post


Link to post
Share on other sites

@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. :(

Edited by Arbitrary (see edit history)

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.