ansaurus

Question

Answer 1

+5 A:

My problem is that out of the 2 divs, the one that came last in the code, would appear first in a browser, and I did not understand the reasoning for this.

I think that You misunderstood a "appear first". You set Your divs to be floating right. So a "2" div, which is FIRST in Your code, is FIRST to be floated right, so it goes first to the right side. A "3" div is then floated, so i goes to the left side of the "2" div - because "2" was first, it took first place at the right side of the browser window, and div "3" took second place at the right side of the window.

In this case "second place at the right side of the window" means "first, looking from the left" ;-)

Falco Foxburr 2008-11-17 14:04:46

+1 this is correct - the other answers are pointing out some other issues with the code sample, but they don't address the problem. this answer explains what's going on.

nickf 2008-11-17 14:10:15

Answer 2

+1 A:

I don't know about the layering problem, but you can't have two elements with the same ID. You probably want:

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

and change #right to .right in the CSS.

Graeme Perrow 2008-11-17 14:05:35

that won't change his situation though. though it's not valid HTML, the browser still will render the CSS "correctly"

nickf 2008-11-17 14:09:03

Perhaps, but I assumed that if you're doing something "illegal", the browser is free to interpret it whatever way it wants, which may not give you what you expect depending on the browser. I figure the best way to *start* is to have correct HTML.

Graeme Perrow 2008-11-17 14:13:44

you're correct in general, but in this case, it doesn't change anything.

nickf 2008-11-17 14:18:51

Answer 3

+1 A:

I think your problem is that you are using id instead of class. An ID is supposed to be unique, so the second div with id="right" is the only one with that id.

You could change your code such that you have:

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

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

(instead of id="right")

And in the css you would have:

.right {

float: right;       

width: 20px;

height: 20px,

}

(instead of #right)

Winston Smith 2008-11-17 14:06:01

Answer 4

+1 A:

At first, I would use class and not id for the divs. But there are also some typo's in the css:

#main{ 
    border: red 4px dashed;
    width: 25%;  /* <-- Missing ; */
    height: 25%; /* <-- change , to ; */
}
#left{ 
    float: left;        
    width: 20px;
    height: 20px; /* <-- change , to ; */
}
#right{ 
    float: right;       
    width: 20px;
    height: 20px; /* <-- change , to ; */
}

Gamecat 2008-11-17 14:08:07

ansaurus

tags:

views:

answers:

CSS float and HTML questions

related questions