How To make Layout with CSS , without using tables or frameset ?

#1
Heaven1977

Posted 05 April 2011 - 06:07 AM

Newbie

Members
10 posts

How To make a page Layout with CSS , without using tables or frameset ?

#2
WingedPanther

Posted 05 April 2011 - 10:42 AM

A spammer's worst nightmare

Moderators
16,831 posts

Location:Upstate, South Carolina
Programming Language:C, C++, PL/SQL, Delphi/Object Pascal, Pascal, Transact-SQL, Others
Learning:Java, C#, PHP, JavaScript, Lisp, Fortran, Haskell, Others

div tags.

Programming is a branch of mathematics.
My CodeCall Blog | My Personal Blog

#3
agnl666

Posted 13 April 2011 - 03:48 AM

Programmer

Members
173 posts

Programming Language:C, Java, C++
Learning:Python, Assembly

I was wondering if div tags were used to create the border/divisions on either side of most websites. I see that a lot of sites have left and right borders and I am not sure if that is the result of div tags or if that was just a centered table with left and right borders. In general I was just wondering how that worked?

#4
Root23

Posted 13 April 2011 - 08:30 AM

Programmer

Members
144 posts

agnl666 said:

Think of the opening & closing div tag as a container. The borders you see aren't really the result of a div tag, but the result that the coder specified that the div tag's have a left & right border in the CSS.

<html>
    <head>
        <title>Div Example</title>
        <style type="text/css">
            * {
                margin: 0;
            }
            html {
                background-color:#FFFFFF;
            }
            #container {
                margin-right:auto;
                margin-left:auto;
                padding-left:10px;
                border-right-style:solid;
                border-left-style:solid;
                min-height:100%;
                height:100%;
                width:90%;
            }
        </style>
    </head>
    <body>
        <div id="container">
            <h2>Div Container Test</h2>
        </div>
    </body>
</html>

In the example above I set any div with the id of 'container' (set by the #container area in the css) to have only a left & right border. There are a few other things added to remove margins and such, but you can get an idea of whats going on by looking through the code.

If you want to learn some more about borders, try CSS Border.
By default there are no borders on a div tag.

Note: Looking at the above code in IE9 will not show the div as centered, but it does in FireFox and Chrome. Adding the appropriate doc-type could fix that problem. I just through the above together really quick for sake of this post.

#5
agnl666

Posted 13 April 2011 - 09:23 AM

Programmer

Members
173 posts

Programming Language:C, Java, C++
Learning:Python, Assembly

Thank you very much. That is awesome. I was previously attempting to set up everything with table and such and it was a pain.

I have another question though. When writing a paragraph out is there a way to make it reference another file that way I may write the paragraph in another file and simply point the <p> tag or <td> tag at it. How would I go about doing that/is there a tag for that?

Edited by agnl666, 13 April 2011 - 01:30 PM.