Anonymous
Anonymous asked in Computers & InternetProgramming & Design · 1 decade ago

CSS - why my layout is wrong?

I'm a bit confused - how to make #content to the right of #menu, instead of below it... Any help is appreciated. Thanks!

#heading{

background: url(bgimage.jpg) no-repeat top #ffc;

background-color: darkred;

height: 55px;

margin: 0px;

padding: 0px 0px;

border-bottom: 1px solid #cccccc;

width: 100%;

text-align: center;

}

#mainmenu { /*navigation menu*/

width: 210px;

height: 400px;

margin: 0;

margin-top: 0px;

border-right: 1px solid #C6EC8C;

font-weight: normal;

background-color: gray;

}

#content {

padding: 0 0 20px 30px; /*top right bottom left*/

margin-top: 0px;

margin-left: 210px;

border: 4px solid #C6EC8C;

background-color: white;

}

2 Answers

Relevance
  • 1 decade ago
    Favorite Answer

    Make sure that in the HTML code, the mainmenu div comes before the content.

    Next set the content float property to left. I have also removed the left margin of the content.

    #mainmenu { /*navigation menu*/

    width: 210px;

    height: 400px;

    margin: 0;

    margin-top: 0px;

    border-right: 1px solid #C6EC8C;

    font-weight: normal;

    background-color: gray;

    }

    #content {

    padding: 0 0 20px 30px; /*top right bottom left*/

    margin-top: 0px;

    float:left;

    border: 4px solid #C6EC8C;

    background-color: white;

    }

  • 1 decade ago

    For the content section, instead of margin-top and margin-left, try:

    position: absolute;

    top: 60px;

    left: 210px;

Still have questions? Get your answers by asking now.