Solved

Cant get Div Elements to algin in the center.

Posted on 2008-10-03
4
464 Views
Last Modified: 2013-11-19
I'm having an issue getting 3 div elements to align in the center above the CSS tableless table that i built.  The 3 elements should look llike table headers for the 3 columns.
Im basicly trying to reconstruct a table using a CSS tabless design.

This needs to work in IE 7, FF3, and Chrome.

Thanks
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

	

	html, body {

		padding: 0;

		margin: 0 auto;

		font-family: Arial, Helvetica, sans-serif;

		font-size: 12px;

		color: #000000;

		background: #FFFFFF;

		text-align: center; /* center things in pre-IE6 */

	

	}

	

	/* Info Header */

	#InfoHeader {

		color: #000000;

		font-family: Arial, Helvetica, sans-serif;

		font-size: 13px;

		font-weight: bold;

		padding: 4px 0px 4px 0px;

		width: 155px;

		margin: 0 auto;

		text-align: center;

		background-color: #E2E2E2;

		border: 1px solid #999999;

		float: left;

	}

	

	/* Options Header */

	#OptionsHeader{

		color: #000000;

		font-family: Arial, Helvetica, sans-serif;

		font-size: 13px;

		font-weight: bold;

		padding: 4px 0px 4px 0px;

		width: 155px;

		margin: 0 auto;

		text-align: center;

		background-color: #E2E2E2;

		border-top: 1px solid #999999;

		border-bottom: 1px solid #999999;

		float: left;

	}

	

	/* Tags Header */

	#TagsHeader {

		color: #000000;

		font-family: Arial, Helvetica, sans-serif;

		font-size: 13px;

		font-weight: bold;

		padding: 4px 0px 4px 0px;

		width: 155px;

		margin: 0 auto;

		text-align: center;

		border: 1px solid #999999;

		background-color: #E2E2E2;

		float: left;

	}
 

	/* Stats Outer Container */

	#StatsContainer {

		padding: 0px 0px 0px 0px;

		margin: 0 auto;

		width: 465px;

		border: 1px solid #999999;

		background-color: #F7F7F7;

		text-align: center;

		clear: both;

	}

	

	/* Inner Container - Holds first 2 columns */

	#InfoOptionsContainer {

		width: 310px;

		float: left;

	}

	

	/* Inner Container - Holds 3rd column */

	#TagsContainer {

		color: #000000;

		font-family: Arial, Helvetica, sans-serif;

		font-size: 12px;

		width: 153px;

		text-align: left;

		float: left;

	}

	

	/* Info Column Cell */

	#InfoColumn {

		color: #000000;

		font-family: Arial, Helvetica, sans-serif;

		font-size: 12px;

		padding: 2px 0px 0px 3px;

		width: 151px;

		text-align: left;

		float: left;

	}

	

	/* Options Column Cell */

	#OptionsColumn {

		color: #000000;

		font-family: Arial, Helvetica, sans-serif;

		font-size: 12px;

		padding: 3px 0px 1px 10px;

		width: 144px;

		text-align: left;

		border-right: 1px dashed #CCCCCC;

		border-left: 1px dashed #CCCCCC;

		float: left;

	}
 

</style>

</head>
 

<body>

	<br>

    <div id="InfoHeader">

        Info

    </div>

    <div id="OptionsHeader">

        Options

    </div>

    <div id="TagsHeader">

        Tags

    </div>

    

    <div id="StatsContainer">

        <div id="InfoOptionsContainer">

            <div id="InfoColumn">

                <b>Rating:</b>&nbsp;xxxxxxxxxx

            </div>

            <div id="OptionsColumn">

                Text

            </div>

            <div id="InfoColumn">

                <b>Hits:</b> xxxxxxxx

            </div>

            <div id="OptionsColumn">

                Email Us

            </div>

            <div id="InfoColumn">

                &nbsp;

            </div>

            <div id="OptionsColumn">

                Phone Us

            </div>

            <div id="InfoColumn">

                &nbsp;

            </div>

            <div id="OptionsColumn">

                xxxxxxxxxx

            </div>

            <div id="InfoColumn">

                &nbsp;

            </div>

            <div id="OptionsColumn">

                &nbsp;

            </div>  

        </div>

                

        <div id="TagsContainer">

            <ul>

            <li>xxxxxx</li>

            <li>xxxxxx</li>

            </ul>

        </div>  

    </div>

   	<br>

</body>

</html>

Open in new window

0
Comment
Question by:maddhacker24
4 Comments
 
LVL 6

Expert Comment

by:trickyidiot
ID: 22636187
Most people are against HTML tables as they are widely misused in design and layout.

However, tables have a purpose: tabular data, hence the name.

I would use a table for the data.
0
 
LVL 1

Accepted Solution

by:
downtap earned 50 total points
ID: 22637062
I'll avoid the whole tabular data debate, as I don't think there's enough info to determine if the content is tabular data. Nonetheless, to basically center your headers above your content, the easiest solution would be to encase those in a container div, and give that div auto margins and define a width. I came up with the width by adding the width of your three header divs and all the 1px borders.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

        

        html, body {

                padding: 0;

                margin: 0 auto;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                color: #000000;

                background: #FFFFFF;

                text-align: center; /* center things in pre-IE6 */

        

        }

        

        /* Info Header */

        #InfoHeader {

                color: #000000;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 13px;

                font-weight: bold;

                padding: 4px 0px 4px 0px;

                width: 155px;

                margin: 0 auto;

                text-align: center;

                background-color: #E2E2E2;

                border: 1px solid #999999;

                float: left;

        }

        

        /* Options Header */

        #OptionsHeader{

                color: #000000;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 13px;

                font-weight: bold;

                padding: 4px 0px 4px 0px;

                width: 155px;

                margin: 0 auto;

                text-align: center;

                background-color: #E2E2E2;

                border-top: 1px solid #999999;

                border-bottom: 1px solid #999999;

                float: left;

        }

        

        /* Tags Header */

        #TagsHeader {

                color: #000000;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 13px;

                font-weight: bold;

                padding: 4px 0px 4px 0px;

                width: 155px;

                margin: 0 auto;

                text-align: center;

                border: 1px solid #999999;

                background-color: #E2E2E2;

                float: left;

        }

 

        /* Stats Outer Container */

        #StatsContainer {

                padding: 0px 0px 0px 0px;

                margin: 0 auto;

                width: 465px;

                border: 1px solid #999999;

                background-color: #F7F7F7;

                text-align: center;

                clear: both;

        }

        

        /* Inner Container - Holds first 2 columns */

        #InfoOptionsContainer {

                width: 310px;

                float: left;

        }

        

        /* Inner Container - Holds 3rd column */

        #TagsContainer {

                color: #000000;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                width: 153px;

                text-align: left;

                float: left;

        }

        

        /* Info Column Cell */

        #InfoColumn {

                color: #000000;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                padding: 2px 0px 0px 3px;

                width: 151px;

                text-align: left;

                float: left;

        }

        

        /* Options Column Cell */

        #OptionsColumn {

                color: #000000;

                font-family: Arial, Helvetica, sans-serif;

                font-size: 12px;

                padding: 3px 0px 1px 10px;

                width: 144px;

                text-align: left;

                border-right: 1px dashed #CCCCCC;

                border-left: 1px dashed #CCCCCC;

                float: left;

        }

 

#container{

margin-left:auto;

margin-right:auto;

width:471px;

}

</style>

</head>

 

<body>

<div id="container">

    <div id="InfoHeader">

        Info

    </div>

    <div id="OptionsHeader">

        Options

    </div>

    <div id="TagsHeader">

        Tags

    </div>

</div>

    

    <div id="StatsContainer">

        <div id="InfoOptionsContainer">

            <div id="InfoColumn">

                <b>Rating:</b> xxxxxxxxxx

            </div>

            <div id="OptionsColumn">

                Text

            </div>

            <div id="InfoColumn">

                <b>Hits:</b> xxxxxxxx

            </div>

            <div id="OptionsColumn">

                Email Us

            </div>

            <div id="InfoColumn">

                 

            </div>

            <div id="OptionsColumn">

                Phone Us

            </div>

            <div id="InfoColumn">

                 

            </div>

            <div id="OptionsColumn">

                xxxxxxxxxx

            </div>

            <div id="InfoColumn">

                 

            </div>

            <div id="OptionsColumn">

                 

            </div>  

        </div>

                

        <div id="TagsContainer">

            <ul>

            <li>xxxxxx</li>

            <li>xxxxxx</li>

            </ul>

        </div>  

    </div>

        <br>

</body>

</html>

Open in new window

0
 
LVL 44

Expert Comment

by:scrathcyboy
ID: 22639804
Well a table design works FLAWLESSLY for 3 column layout -- all you do is specify the width of each TD in the table structure to match what you want, and make the total add up to 800 or whatever screen resolution you want to display the table at.  Best of all, tables will render essentially identical on all browsers.

If you want to go table-less, as everyone is convinced they have to do today, then here are some links to help you through the quagmire of getting a 3 column table-less design to render the same in all browsers

articles.techrepublic.com.com/5100-10878_11-5268973.html
www.codeproject.com/KB/HTML/Using_DIV_tags.aspx
techpatterns.com/web_design/tables_div/div_problems.php
http://www.strictlycss.com/examples/three-column-rounded-corners-100-percent-height-and-width.asp
http://www.strictlycss.com/articles/article/46/three-column-fluid-css-layout-with-rounded-content-corners-and-100-height
http://www.positioniseverything.net/guests/3colcomplex.html
www.nimaheydarian.com/2007/01/css-div-100-height-problem-solved/
http://bonrouge.com/3c-hf-fixed.php
http://www.pmob.co.uk/temp/3colfixedtest_4.htm
http://blog.corunet.com/english/three-column-layout-with-full-page-height
0
 

Author Closing Comment

by:maddhacker24
ID: 31502812
Thank you. It worked
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Safari SVG Image Problem 1 41
CSS Font Arial Narrow 1 26
Divi Them Help with Full Width header 20 24
push logos in footer up higher 5 12
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn how to count occurrences of each item in an array.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

867 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now