CSS float and HTML questions

Question

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>

you probably shouldn't have two DIVS with an id of "right" -- ids are supposed to be unique. — Jeff Atwood
– Jeff Atwood, Commented Nov 17, 2008 at 14:02
agreed - change the 'id="left/right"' to 'class="left/right"' (arguments about semantics aside), and change your css to ".left" and ".right" — nickf
– nickf, Commented Nov 17, 2008 at 14:07
Can I suggest separating out your questions? It'll make it easier for people to give specific answers :) — Sam Murray-Sutton
– Sam Murray-Sutton, Commented Nov 17, 2008 at 14:11

Falco Foxburr · Accepted Answer · 2008-11-17 14:04:46Z

6

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" ;-)

answered Nov 17, 2008 at 14:04

Falco Foxburr

7461 gold badge7 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

nickf Over a year ago

+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.

Toon Krijthe · Accepted Answer · 2008-11-17 14:08:07Z

1

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 ; */
}

answered Nov 17, 2008 at 14:08

Toon Krijthe

53.6k38 gold badges151 silver badges204 bronze badges

Comments

Graeme Perrow · Accepted Answer · 2008-11-17 14:05:35Z

0

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.

answered Nov 17, 2008 at 14:05

Graeme Perrow

57.6k24 gold badges87 silver badges126 bronze badges

3 Comments

nickf Over a year ago

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

Graeme Perrow Over a year ago

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.

nickf Over a year ago

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

Winston Smith · Accepted Answer · 2008-11-17 14:06:01Z

0

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)

answered Nov 17, 2008 at 14:06

Winston Smith

22k10 gold badges63 silver badges75 bronze badges

Comments

score 0 · Accepted Answer · 2019-09-10 08:53:37Z

0

you can use this code

<div id="main">
        <div id="left">1</div>
        <div id="right">3</div>
        <div id="right">2</div>
    </div>

edited Sep 10, 2019 at 8:53

answered Sep 6, 2019 at 8:51

user11978918

Comments

Kunal Raut · Accepted Answer · 2019-12-05 19:41:08Z

0

You cannot use the same id for more than one time.

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

Better way you can do it with assigning class.

answered Dec 5, 2019 at 19:41

Kunal Raut

2,6042 gold badges14 silver badges25 bronze badges

Comments

Oladetoun Gbemi · Accepted Answer · 2023-08-28 22:55:27Z

0

Try this:

   <!DOCTYPE html>
<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 class="left">1</div>
    <div class="right">3</div>
    <div class="right">2</div>
</div>
</body>
</html>

Changes made:

Replaced commas with semicolons in the CSS properties. Changed duplicate IDs to classes. Changed the order of the last two divs within the main div to control their appearance order.

answered Aug 28, 2023 at 22:55

Oladetoun Gbemi

203 bronze badges

Comments

Mohit Ranpura · Accepted Answer · 2015-04-22 11:49:04Z

-1

<html>
<head>
<style>
#main {
    border: 4px dashed red;
    display: block;
    overflow: hidden;
}
#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">3</div>
  <div id="right">2</div>
</div>
</body>
</head>
</html>

answered Apr 22, 2015 at 11:49

Mohit Ranpura

11 bronze badge

1 Comment

Andrew K. Over a year ago

The answer, while valid code, does not explain WHY you changed what you changed.

Collectives™ on Stack Overflow

CSS float and HTML questions

8 Answers 8

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related