centering content in nav bar and in footer

StackOverflow https://stackoverflow.com/questions/21962601

  •  15-10-2022
  •  | 
  •  

Question

I am using a liquid layout I found online. I for the life of me can not get the links in the nav and the content in the footer to center. Any help would be appreciated.

I am adding a lot of css because each id is relevant for the fluid layout. I am not sure what can be changed at this point without causing the page to align.

Thanks!

jsfiddle

http://jsfiddle.net/nichodiaz/DKs9t/

html

<body>
<div id="header">   
<ul>
    <li>nav</li>
    <li>nav</li>
    <li>nav</li>
    <li>nav</li>
</ul>
</div><!-- CLOSING HEADER DIV -->

<div class="colmask threecol"><!-- colmask threecol start -->
    <div class="colmid"><!-- colmid start -->
        <div class="colleft"><!-- colleft start -->

            <div class="col1"><!-- col1 start -->
                <h2>Hola senior bienvenidas a la web</h2>           
                <p>Aperiri deleniti efficiendi cu usu, pro brute tollit ut. Duo fierent splendide deterruisset in, nullam reprehendunt te vix. Ne his assum vitae aliquam. Vitae offendit oportere te eum, in sea audire praesent efficiendi. No harum democritum usu, vim vero nostrud verterem ut.
</p>        </div><!-- col1 end -->

            <div class="col2"><!-- col2 start -->               
                <h2>Hola senior bienvenidas a la web</h2>           
                <p>Semper volumus ei vel, quo albucius adipisci ut. Nec cu adipiscing definiebas. Vel habeo eripuit at, aeterno suscipit splendide usu et, etiam utamur impetus has cu. Has decore suscipiantur te. Vel at semper quaestio, per no viris accusamus intellegebat.</p>                
                </div><!-- col2 end -->

            <div class="col3"><!-- col3 start -->               
                <h2>Hola senior bienvenidas a la web</h2>           
                <p>Aperiri deleniti efficiendi cu usu, pro brute tollit ut. Duo fierent splendide deterruisset in,
                <h3>Hola senior bienvenidas a la web</h3>
                <p>Aperiri deleniti efficiendi cu usu, pro brute tollit ut. Duo fierent splendide deterruisset in, nullam reprehendunt </p>             
            </div><!--  col3 end -->

        </div><!-- colleft end -->
    </div><!-- colmid end -->
</div><!-- colmask threecol end -->

<footer>
    <p><strong>THIS IS THE FOOTER</strong></p>
</footer>

</body>
</html>

css

body {
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:100%;
    background:#fff;
    min-width:600px;        /* Minimum width of layout - remove line if not required */
                    /* The min-width property does not work in old versions of Internet Explorer */
    font-size:90%;
}
a {
    color:#369;
}
a:hover {
    color:#fff;
    background:#369;
    text-decoration:none;
}
h1, h2, h3 {
    margin:.8em 0 .2em 0;
    padding:0;
}
p {
    margin:.4em 0 .8em 0;
    padding:0;
}
img {
    margin:10px 0 5px;
}
#ads img {
    display:block;
    padding-top:10px;
}


/* Header styles */ /* Header styles */ /* Header styles */ /* Header styles */ /* Header styles */ /* Header styles */
#header {
    clear:both;
    margin: 0 auto;
    width:100%;
    border-bottom:1px solid #000;

}

#header ul {
    clear:left;
    float:left;
    width:100%;
    list-style:none;
    margin:10px 0 0 0;
    padding:0;
}
#header ul li {
    display:inline;
    list-style:none;
    margin:0;
    padding:0;
}
#header ul li a {
    display:block;
    float:left;
    margin:0 0 0 1px;
    padding:3px 10px;
    text-align:center;
    background:#eee;
    color:#000;
    text-decoration:none;
    position:relative;
    left:15px;
    line-height:1.3em;
}
#header ul li a:hover {
    background:#369;
    color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
    color:#fff;
    background:#000;
    font-weight:bold;
}
#header ul li a span {
    display:block;
}

/* column container */ /* column container */ /* column container */ /* column container */ /* column container */ 
.colmask {
    position:relative;  /* This fixes the IE7 overflow hidden bug */
    clear:both;
    float:left;
    width:100%;         /* width of whole page */
    overflow:hidden;        /* This chops off any overhanging divs */
}

/* common column settings */ /* common column settings */ /* common column settings */ /* common column settings */ 
.colright,
.colmid,
.colleft {
    float:left;
    width:100%;         /* width of page */
    position:relative;
}
.col1,
.col2,
.col3 {
    float:left;
    position:relative;
    padding:0 0 1em 0;  /* no left and right padding on columns, we just make them narrower instead 
                    only padding top and bottom is included here, make it whatever value you need */
    overflow:hidden;
}

/* 3 Column settings */ /* 3 Column settings */ /* 3 Column settings */ /* 3 Column settings */ /* 3 Column settings */
.threecol {
    background:#eee;        /* right column background colour */
}
.threecol .colmid {
    right:25%;          /* width of the right column */
    background:#fff;        /* center column background colour */
}
.threecol .colleft {
    right:50%;          /* width of the middle column */
    background:#f4f4f4; /* left column background colour */
}
.threecol .col1 {
    width:46%;          /* width of center column content (column width minus padding on either side) */
    left:102%;          /* 100% plus left padding of center column */
}
.threecol .col2 {
    width:21%;          /* Width of left column content (column width minus padding on either side) */
    left:31%;           /* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
    width:21%;          /* Width of right column content (column width minus padding on either side) */
    left:85%;           /* Please make note of the brackets here:
                    (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}

/* Footer styles */ /* Footer styles */ /* Footer styles */ /* Footer styles */ /* Footer styles */ /* Footer styles */
footer {
    clear:both;
    position: absolute;
    bottom: 0;
    width:100%;
    height: 100px;
    border-top:1px solid #000;

}

footer p {
    padding:10px;
    margin: 0 auto;
    width: 100%;

}
Was it helpful?

Solution 

#header ul {
  text-align: center;
}

footer p {
  text-align: center
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top