Floating left or Right


#1

Hiya. I keep looking at this and wonder why I get the error "DId you remember to float .left to the left?" Please help.

HTML

<div id="header"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer"></div>

CSS
.left {
border-radius: 5px;
background-color: blue;
height: 25px;
width: 20%;
float: left;
}

.right {
border-radius: 5px;
background-color: green;
height: 25px;
width: 20%;
float: right;
}


#2

Could you post your full css code? float doesn't work on fixed elements, but that is just a guess. I need to see your full code to confirm this


#3

It seems to be working now, strangely enough! Here's the css

body {
    background-color: ivory;
}
    
#header {
    border-radius: 5px;
    background-color: red;
    height: 25px;
    width: 25%;
    position: fixed;
    z-index: 1;
}

.left {
border-radius: 5px;
background-color: blue;
height: 25px;
width: 20%;
float: left;
}

.right {
border-radius: 5px;
background-color: green;
height: 25px;
width: 20%;
float: right;
}


#footer {
    border-radius: 5px;
    background-color: grey;
    height: 25px;
    width: 25%;
    position: fixed;
}

#4

What did you change to get it working? It looks fine now


#5

I think I may have been missing a " { "


#6

you did not do .left you put in right but it had to be .right

    <div id="header"></div>

    <div class=".left"></div>

    <div class=".right"></div>

    <div id="footer"></div>

#7

the full stop (.) is used in css to indicate we deal with a class, don't use it in html


#8

I'm having an issue with this challenge.

My code is:
div {
border-radius: 5px;
}

header {

height: 3px
width: 50px
background-color: blue;
position: fixed;
z-index: 1;
{

.right {
height: 3px
width: 50px
background-color: grey;
float: right;
}

.left {
height: 3px
width: 50px
background-color: orange;
float: left;
}

footer {

height: 3px
width: 50px
background-color: yellow;

}

But I keep getting this message when I try to complete the challenge.

(Oops, try again. Did you remember to float .left to the left?)

I don't know what I did wrong. Can someone help or explain it to me? Thank you.


#9

#header {

height: 3px
width: 50px
background-color: blue;
position: fixed;
z-index: 1;
{ // wrong one

see comment in above code


#11