Member Avatar for 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;
}
  • 3 Contributors
  • 5 Replies
  • 277 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by safeer008

Dani AI

Generated

A few practical notes and a compact, modern solution that avoids the common float/width/clearing traps ran into. and were right to ask for the HTML — markup order and stray clears are usually the root cause. The simplest, most robust option today is to stop fighting floats and use CSS Grid or Flexbox so column widths, gaps and centering are explicit.

Example semantic markup:

<div id="page">
  <header>Header</header>
  <nav>Navigation</nav>

  <main id="content">
    <article>Primary column content…</article>
    <aside>Sidebar / right column</aside>
  </main>

  <footer>Footer</footer>
</div>

Example CSS using Grid (fixed two-column layout, centered container):

* { box-sizing: border-box; }

#page { max-width: 960px; margin: 0 auto; padding: 0 12px; }

#content {
  display: grid;
  grid-template-columns: 640px 300px;
  gap: 20px;
  align-items: start;
}

article, aside { padding: 12px; }

Practical troubleshooting checklist

  • Don’t hard-code large fixed heights for columns; let content flow or use min-height.
  • Use box-sizing: border-box so padding doesn’t break your math.
  • Make sure container max-width equals the sum of column widths + gap + horizontal padding. Mismatched math causes the sidebar to drop.
  • If you must use floats, remove any clear: both from the floated column (that will force it below other floats) and add a clearfix to the wrapper.
  • Use browser DevTools to inspect computed widths and to see which rule is overriding another.

This approach keeps layout predictable, is accessible (semantic elements are preserved), and makes it easy to switch to a responsive variant later.

Recommended Answers

All 5 Replies

Member Avatar for Member #120589

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.

Member Avatar for 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;    

}
Member Avatar for Member #120589

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.

Member Avatar for andreasbb

Thank you very muck! I solved my problem!

Member Avatar for safeer008

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.