Home/ Questions/Q 8993321
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T23:10:10+00:00

I was wondering why my Right-nav div isn’t responding to anything in the CSS.

  • 0

I was wondering why my Right-nav div isn’t responding to anything in the CSS.

HTML:

<body>
    <div id="header">Header</div>
    <div id="main-wrap">
        <div id="sidebarwrap">
        <div id="nav">Left Nav</div>
            advertisment pictures
        </div>
    <div id="content-wrap">
        <div id="picture-wrap">
        <div class="info">Picture</div>
        </div>
            <div id = "Content"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p></div>
            <div class ="Right-nav"><p>right-nav</p></div>
        </div>
    </div>
    <div id="footer">Footer</div>
</body>

CSS:

/**
 * custom layout
 */

#header,
#footer {
    background-color: #f1f1f1;
    width: 60%;
    margin: 0 auto;
}

#main-wrap {
    background-color: #D9D9D9;
    width: 60%;
    margin: 0 auto;
}

#sidebar {
    background-color: #d2d2d2;
}

#content-wrap {
    background-color: #c5c5c5;
}

.info {
    background-color: #DDD;
}
.info + .info {
    background-color: #e6e6e6
}


/* sizes */
#main-wrap > div {
    min-height: 450px;
}


#header,
#footer {
    min-height: 40px;
}

.info {
    min-height: 80px;
}

/* layout */

#main-wrap {
/* overflow to handle inner floating block */
    overflow: hidden;
}

#sidebarwrap {
    float: left;
    width: 30%;
    overflow:hidden;
    background-color:blue;
}

#nav{
    min-height: 80px;
    background-color: red;
}

#content-wrap {
    float: right;
    width: 70%;
    overflow:hidden;
    background-color:blue;
}

#Content{
    float:left;
    width:40%;
    min-height:370px;
    background-color:red;
}

#Right-nav{
    background-color:red;
}

#picture-wrap {
/* overflow to handle inner floating block */
    overflow: hidden;
}

.info {
    width:100%;
    float: left;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s because you’ve given the right div a class in the HTML but an id in the CSS, change both to one or the other and the problem should be resolved.

    • 0