CSS3 AND HTML5 LAYOUT WITH DIVS

[andreasbb]

Hi to everyone. I am new in CSS and I want to make the layout of a website. I want under the navigation to the section, to put an aside element on the right. I want fixed 2 column layout but i have problem fixing it. Please anyone that can help!

article, aside, footer, header, main, nav, section{
    display: block;

}

body{
 background-image: url("c.png");

}

#wrapper {
         margin:0 auto;
        overflow:auto;
         width: 96%; /* Holding outermost DIV */
    }
#header {
    margin-left:auto;
    margin-right:auto;

    width:1000px;
    color:white;

    padding:5px;


}

#nav {
font-size: 1.143em;

    margin-left:auto;
    margin-right:auto;
    line-height:10px;
    background-color:#0b3f00;
    width:1000px;
    text-align:right;
    padding:10px;     

}
#nav ul li{display :inline;}
#nav a:link, #nav a:visited {
    color: #fff;
    display: inline-block;
    height: 15px;
    padding: 5px 1.5em;
    text-decoration: none;
  }
  #nav a:hover, #banner nav a:active,
  #nav .active a:link, #banner nav .active a:visited {
    background: #C74451;
    color: #fff;
  }




#section {
    margin-left:156px;

    font-family: Sans-Serif;
    background-color:white;
    height:1900px;
    width:1000px;
    padding:10px;   
    text-align: justify;    
}
#footer {
    color:black;
    clear:both;
    text-align:center;
   padding:10px;     
    background-color:#A52A2A;  
width:1000px;   
margin-left:auto;
    margin-right:auto;
}

[diafol]

You should provide your markup too, otherwise we're just assuming what it will look like.

Try a fiddle: https://jsfiddle.net/

ALthough it's primarily aimed at JS, it works well for just CSS/HTML too.

[andreasbb]

Thank you! I want only to look like! I tried this code but still something wrong with the properties!

#wrapper {
         margin:0 auto;

         width: 1000px; /* Holding outermost DIV */
    }
    #section {

    float:left;
    font-family: Sans-Serif;
    background-color:white;
    height:1900px;
    width:700px;
    padding:10px;   
    text-align: justify;    
    clear: both;
}
#aside {

float:right;    
    font-family: Sans-Serif;
    background-color:red;
    height:1900px;
    width:25%;
    padding:10px;   
    text-align: justify;    

}

[diafol]

If you show your markup it may actually help. In addition, for prototyping, you can give your various element different background-color which is often easier than using a console tool or a browser plug-in to label elements. Just a thought.

So from this CSS, you have a <div id = 'aside'> element. ALthough this isn't mentioned in your original post. Your originaal post mentions the <aside> element. This is why we need your HTML so we can see exactly what's going on.

[andreasbb]

Thank you very muck! I solved my problem!

[safeer008]

Yes without looking at the HTML no body will be able to answer it properly.