1

My goal is to get the article in the middle of the leftnav and rightnav. My current syntax is allowing for the leftnav and aside to "smash" into one another. I've added the margin-left and padding left to my article and that does not seem to work. How would I get the article in the center of the page without "smashing" into the leftnav? Thanks everyone.

CSS

/* CSS Document */

body{
 background-color:#9F6;
}

section{
 width:960px;
 /*padding:15px;*/
}

header{
 height:150px;
 outline:#000 dotted;
}

nav{
 position:relative;
 outline:#000 dotted;
}

nav ul{
 padding:15px;
}

nav ul li{
 /* Moves the nav in a horizontal fashion */    
 display:inline;
}

nav ul li a{
 list-style-type:none;
 text-decoration:none;
 text-transform:capitalize;
 padding:15px;
}

nav ul li a:hover{
 background-color:#F00;
 color:#0FF;
}

#leftnav{
 float:left;    
 width:160px;
 outline:#000 dotted:
 /*margin-right:15px; */
 /*padding:15px;*/
 /*padding-right:2cm;*/
}

#rightnav{
 float:right;   
 width:160px;
 outline:#000 dotted:
}

aside, article{
 min-height: 550px;
 /*background-color: #F96;*/
 outline:#000 dotted;
 /*padding: 1px;*/
}   

article{
 width:750px;
 /*margin-left:15px;*/
 /*padding-left:65px;*/
}

footer{
 width:960px;
 outline:#000 dotted;
 margin-top:15px;
 text-align:center;
}

HTML

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="another-css.css">
<title>Another Test</title>
</head>

<body>
    <section>
        <header>
         <h3>This Is The Header</h3>
        </header>

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Cars</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </nav>

        <aside id="leftnav">
        aside left
        </aside>

        <aside id="rightnav">
        aside right
        </aside>

        <article>
        article
        </article>

        <footer>
        Copyright 2013
        </footer>

    </section>
</body>

</html>

3 Answers 3

6
margin-left: auto;
margin-right: auto;

Have you tried to use the above code on the article

0
3

set margin:0 auto; for article class:

article{
 width:600px;    /*   decreased to 600px  */
    margin:0 auto;          /* added  */
 /*margin-left:15px;*/
 /*padding-left:65px;*/
}

jsfiddle

1
  • Thanks for your help. Appreciate it
    – msc msc
    Oct 13, 2013 at 0:04
1

it is a margin problem. add this to your article css

margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;

the widths are defined by px, so probably you have to adjust them to your resolution

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.