I have some questions about basic CSS that I was unable to understand or find an answer for.
First, I tried placing 3 div tags within another div tag. The first main div tag containing the 3 other tags had nothing set for it except a size, which was 400px by 400px. Of the other 3 divs inside, all were 20px by 20px, and 1 was assigned float:left, and the other two were assigned a style that was float right. All attributes were defined within a style, and the two divs that were float:right were assigned the same style. 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.
Here is the code:
<html>
<head>
<style>
#main{
border: red 4px dashed;
width: 25%
height: 25%,
}
#left{
float: left;
width: 20px;
height: 20px,
}
#right{
float: right;
width: 20px;
height: 20px,
}
</style>
</head>
<body>
<div id="main">
<div id="left">1</div>
<div id="right">2</div>
<div id="right">3</div>
</div>
</body>
</head>
</html>
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" ;-)