Solved

Cant get Div Elements to algin in the center.

Posted on 2008-10-03
4
463 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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

757 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