CODEWITHSUNDEEP
htmlcss
Ahsan Rafiq
Ahsan Rafiq

Reputation: 111

Why float property does not work if width of elements is set?

Here is HTML Code

<!doctype html>
<html>


<head>
    <title>Float</title>
    <link rel="stylesheet" type="text/css" href="Font Sizes.css">
</head>



<body>

    <div class="First">
        <img src="firstImage.png" alt="First Image of Article" class="FirstImage">
        <p> Picture No.1</p>
    </div>

    <div class="Second">
        <img src="secondImage.png" alt="Second Image of Article" class="SecondImage">
        <p>Picture No.2</p>

    </div>

</body>

Here is CSS 

.First{
  width:430px;
  
  background-color: Red;
  float: left;
  
}
.Second{
   width:330px;
  
  background-color: Blue;
   
 
}

I tried different tricks but failed. Please Explain it in detail. I searched a lot but could not found my answer.The second element not arrange it self to the right side of first element. When i remove the width property from second element then it arranged at right. With Width property: enter image description here

Without Width Property on second element: enter image description here

Upvotes: 0

Views: 32

Answers (1)

Shan Robertson
Shan Robertson

Reputation: 2742

div's are block level elements and you have only supplied a float on First. Putting a float on Second will give you the effect you desire IF the browser is wider than 760px;

Upvotes: 1

Related Questions