Problems fitting tables into centered css div container...

Status
Not open for further replies.
ImagesAndWords

ImagesAndWords

StayblCam.com
Nov 7, 2006
2,326
90
0
Scottsdale, Arizona
www.stayblcam.com
I think I'm about to pull my hair out in frustration..

I'm setting up a new landing page template with a css I built from scratch, but I'm having a hell of a time getting the margins right.

It's a fairly simple looking page, with one main container div which contains three other sub-divs for things like header, content, and footer.
The content div has some left-aligned text and a table inside of it.

I can either:
a) get everything to look nice, with the table fitting nicely within the divs - BUT then everything is aligned to the left of the screen :(

b) get everything to align nicely centered on the screen - BUT then the table inside the content div looks like shit because it extends too far out on the right side of the div. :(

The problems occur in both FF and IE.
I looked around for some threads on this, but they only partially solved my centering and table-fitting issues.

Here is what I have used:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Code: 
body{
text-align: center;
}
When I use this, everything is centered but the table is messed up:
Code: 
.container{ 
width: 600px;
margin: 0 auto;
text-align: left;
display: block
}
When I use this, the table fits nicely but everything is left-aligned on screen:
Code: 
.container{ 
width: 600px;
margin: 0 auto;
text-align: left;
display: table-cell
}
+Rep to the one who posts a working solution! :)
 


Maybe create an HTML table within a <div> and assign attributes to the table so it behaves as you wish:

Code: 
<table height="xxx" width="xxx" align="xxx" cellspacing="xxx" cellpadding="xxx" border="x">
Of course you would need to add the appropriate tags depending on rows and columns you wish to display. Play with the values and tweak it until you get something presentable.
 
  • Like
Reactions: ImagesAndWords
*
{
margin: 0;
padding: 0;
}
body
{
text-align: center;
}
.container
{
width: 600px;
margin-left: auto;
margin-right: auto;
text-align: left
}
there shouldn't be any difference with margin: 0 auto;

I've been centering layouts this way for years and it always worked, if your page looks screwed the error might be somewhere else

try removing everything, starting from an empty layout and adding an element per time
 
I agree that posting the complete html/css would make it easier for people to help

I just threw this together as a solution for what I think you are trying to do. Hope it helps.

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style type="text/css" media="all">
/*
boo on the body definitions, imo
*/

.container {
    width: 600px;
    margin: 0 auto;
    text-align: center; /* satisfy older browser versions */
    }
.header {
    width: 100%; /* redundant */
    background-color: #000;
    color: #FFF;
    text-align: right;
    }
.content {
    width: 100%;
    text-align: left;
    }
    .content table {
    width: 90%;
    margin: 0 auto; /* shorthand = top left bottom right */
    }
    .content table td {
        width: 25%;
        }
.footer {
    width: 100%;
    background-color: #000;
    color: #FFF;
    }

</style>

</head>

<body>

<div class="container">

    <div class="header">
        <h1>this is a header right aligned</h1>
    </div>
    <div class="content">
        <p>this is the content div</p>
        <table cellpadding="1" border="1" cellspacing="1">
            <tr>
                <td>this</td>
                <td>is</td>
                <td>a</td>
                <td>row</td>
            </tr>
            <tr>
                <td>this</td>
                <td>is</td>
                <td>a</td>
                <td>row</td>
            </tr>
        </table>
    </div>
    <div class="footer">
     <p>this is a footer centered</p>
    </div>

</div>

</body>
</html>

On a completely side note, I am new to affiliate marketing and wickedfire.com. The community seems to be fun and beneficial. I hope I can contribute on the html/css/php/javascript side of things as I soak up the knowledge here.
 
Status
Not open for further replies.
Top Bottom
Back