CODEWITHSUNDEEP
htmlcss
Eriasu
Eriasu

Reputation: 59

Background can't position right

hi guys i'm new to html and css i wanted to create 4 backgrounds one at top one at left one at bottom and one at right... but somehow the one at right doesn't show up and the other work fine can you help me?

HTML:

    <div class="header">
    </div>

    <div class="leftheader">
    </div>

    <div class="rightheader">
    </div>

    <div class="bottomheader">
    </div>

CSS

body {
    background-color: #efefef;
    margin: 0px auto;
    font-family: arial

}


.header{
    background: #cccccc;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 0px solid #000000;
    width: auto;
    height: 60px;
}

.leftheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left;
    border: 0px solid #000000;
    width: 100;
    height: 590;
}

.rightheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right 10px top 10px;
    border: 1px solid #000000;
    width: 100;
    height: 590;
}

.bottomheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    border: 0px solid #000000;
    width: auto;
    height: 60px;
}

Upvotes: 2

Views: 57

Answers (1)

adriancarriger
adriancarriger

Reputation: 3000

The key to getting this to work is using float: left and float: right on your .leftheader and .rightheader elements. Then you need to clear your floats by putting clear: both on the .bottomheader.

body {
    background-color: #efefef;
    margin: 0px auto;
    font-family: arial
}
.header {
    background: #cccccc;
    background-position: top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    border: 0px solid #000000;
    width: auto;
    height: 60px;
}
.leftheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: left;
    border: 0px solid #000000;
    width: 100px;
    height: 590px;
    float: left;
}
.rightheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right 10px top 10px;
    border: 1px solid #000000;
    width: 100px;
    height: 590px;
    float: right;
}
.bottomheader {
    background: #cccccc;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: bottom;
    border: 0px solid #000000;
    width: auto;
    height: 60px;
    clear: both;
}
<div class="header">header</div>
<div class="leftheader">leftheader</div>
<div class="rightheader">rightheader</div>
<div class="bottomheader">bottomheader</div>

Upvotes: 3

Related Questions