ansaurus

Question

Why aren't these styles resulting in a single-line header and centered page contents?

Answer 1

+2 A:

.container{margin:0 auto;}

As long as you have defined an explicit width. You should also probably replace

<div class = "container">

with

<div class="container">

cpharmston 2009-07-28 21:18:51

container is a class and not an Id.

CD 2009-07-28 21:20:27

Answer 2

A:

.container
{
    width:900px;
    margin:0 auto;
}

CD 2009-07-28 21:19:42

Answer 3

A:

Try this:

#topbar { margin: 0 auto;}

2009-07-28 21:20:36

Answer 4

+1 A:

Should center container. Make sure you don't float it.

.container{
 width: /* must specify a width */
 margin-left:auto;
 margin-right:auto;
}

This should fix the alignment

.logo{
float:left;
padding-left: 20px;
padding-top: 4px;
width: 15%;
height:27px;
}

.tbar-right{
float: right;
padding-right: 10px;
color: #FFF;
padding-top: 7px;
width: 85%;
}

And you may need to rearrange the HTML a bit by putting the .tbar-right before the .logo

Vian Esterhuizen 2009-07-28 21:21:07

Answer 5

A:

The logo isn't aligning with the other stuff because it has a different padding-left. Change to

.logo {
    padding-left: 0px; //or don't even list a padding-left,
    padding-top: 4px;
    width: 15%;
    height:27px;
    }

OH if you wanted it on the same line horizontally float them both to the left or right, and make sure there's enough space. ;D

CrazyJugglerDrummer 2009-07-28 21:21:22

ansaurus

tags:

views:

answers:

Why aren't these styles resulting in a single-line header and centered page contents?

related questions