CODEWITHSUNDEEP
javascripthtmlcssclass
Eric
Eric

Reputation: 69

CSS Float Question (Strange behaviors found)

Dears,

Below is my simple float program and I also attach a picture of the result. My question is: When the width in class "two" is 300px, the div 2 is moved next to the floated div 1, this is also my expectation. However, when i changed the width in class "two" from 300px to 200px, div 2 is kept under div 1, and div 3 is moved to overlap with div 2 (see the attached picture) Why? enter image description here

<html>
<head>
<style>
.one{
    background: yellow;
    width: 200px;
    height: 50px;
    text-align: center; 
    box-shadow: inset 0 0 10px #000;
    Float: left;
    }

.two {
    background: rgb(55, 0, 255);
    width: 300px;
    height: 50px;
    text-align: center; 
    box-shadow: inset 0 0 10px #000;  
  }

.three {
    background: rgb(255, 0, 76);
    width: 200px;
    height: 50px;
    text-align: center; 
    box-shadow: inset 0 0 10px #000;
   }
 </style>
 </head>
 <body>
    <div class = "one">1</div>
    <div class = "two">2</div>
    <div class = "three">3</div>
 </body>
 </html>

Upvotes: 0

Views: 79

Answers (2)

Yunus Eş
Yunus Eş

Reputation: 267

If you add this style to your blue box;

.two {
  border: 10px solid #0ff;
}

You can see blue box is already under the yellow box. The only thing that is absurd here is; blue box text alignment centered only on the rendered area of the blue box.

Upvotes: 0

pso
pso

Reputation: 523

Alright I think I figured it out. The problem lies in the fact that it just looks like as if the second div is below the first. It actually properly overlaps the first div and just leaves the text behind. You can see this if you add opacity or remove the background-color of the first div.

You can add display: flow-root to your second (and third) div to fix this if needed or use 'float: left' on all of them as suggested.

<html>
<head>
 </head>
 <body>
    <div class = "one">1</div>
    <div class = "two">22222222</div>
    <div class = "three">3</div>
 </body>
 </html>

.one{
    background: transparent;
    width: 200px;
    height: 50px;
    text-align: center;
    box-shadow: inset 0 0 10px #000;
    float: left;
    }

.two {
    background: rgb(55, 0, 255);
    width: 200px;
    height: 50px;
    text-align: center;
    box-shadow: inset 0 0 10px #000;
 }

.three {
    background: rgb(255, 0, 76);
    width: 200px;
    height: 50px;
    text-align: center;
    box-shadow: inset 0 0 10px #000;
    }

Upvotes: 1

Related Questions