Solved

Cant get Div Elements to algin in the center.

Posted on 2008-10-03
4
469 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

710 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