CODEWITHSUNDEEP
csshtml
Jon2713
Jon2713

Reputation: 49

Div won't float left

I have added a picture to my div and with the picture I used position:absolute to position the blocks I inputted. But when I float it left, it goes on the picture but, it doesn't float left. It just stays behind the other. How can i make it float left without using position: relative

Code:

#knowledge-div {
  height: 50%;
  width: 100%;
  width: 0 auto;
}
#knowledge-div img {
  height: 100%;
  width: 100%;
  float: left;
}
.blocks {
  width: 498px;
  height: 50%;
  float: left;
  position: absolute;
}
#green {
  background-color: green;
}
#orange {
  background-color: orange;
}
<div id="knowledge-div">
  <img src="Pictures/biganswer.jpg">
  <div class="blocks" id="green"></div>
  <div class="blocks" id="orange"></div>
</div>

Upvotes: 0

Views: 2172

Answers (3)

BuddhiP
BuddhiP

Reputation: 6451

You should not use position: absolute when you want to float elements.

Try something like this:

#knowledge-div {
  height: 50%;
  width: 100%;
  width: 0 auto;
}
#knowledge-div img {
  height: 100%;
  width: 100%;
  float: left;
}
.blocks {
  width: 50%;
  height: 50%;
  float: left;
  clear: none;
  color: red;
}
<div id="knowledge-div" style="height:100px; background-image:url('https://www.nasa.gov/sites/default/files/styles/image_card_4x3_ratio/public/thumbnails/image/leisa_christmas_false_color.png'); background-color: #cccccc;">

  <div class="blocks" id="green" >Green</div>
  <div class="blocks" id="orange">Orange</div>
  <div style="float:left; clear:both"></div>
</div>

Upvotes: 0

Darshan Prajapati
Darshan Prajapati

Reputation: 66

#knowledge-div {
  height: 50%;
  width: 100%;
  width: 0 auto;
}
#knowledge-div img {
  height: 100%;
  width: 100%;
  float: left;
}
.blocks {
  width: 498px;
  height: 50%;
float:left;
}
#green {
  background-color: green;
}
#orange {
      background-color: orange;
}

<div id="knowledge-div">
  <img src="Pictures/biganswer.jpg">
  <div id="green" class="blocks" >Color green</div>
  <div class="blocks" id="orange">Color orange</div>
</div>

No need to define position property in blocks class. Add some text in div for both colors.

Upvotes: 1

Ajay Pal
Ajay Pal

Reputation: 563

The position of an element defined by absolute does not changes, until or unless you make it relative, define padding or margin. When you try to move an element and it does not have enough space to reside then it shifts the neighboring elements.

Upvotes: 0

Related Questions