Pacijent Pacijent - 4 months ago 9
CSS Question

css image left not working

I do not know why my left is not working on image.
it's not working if i try with

#new_index_body_slide_image_2
, nor with
#new_index_body_slide_image_2 img


Here is my code:



#index_content {
position: absolute;
top: 200px;
}
#new_index_body_slide_image_2 {
position: absolute;
left: 30px; //not working
}

<div id="body" style="height:600px">
<div id="index_content">
<div id="index_content_slide">
<div id="new_index_body_slide_image_1">
<img src="images/content_img/kuca2.jpg">
</div>
<div id="new_index_body_slide_image_2">
<img src="images/content_img/new_gips.jpg">
</div>
</div>
<button onclick="test()">Click me</button>
</div>
</div>




Answer

It's working absolutely fine. By default div's will be rendered as block, so the second image will be positioned on the next line and 30px away from the left.

Explanation for the issue:

#index_content {
  position: absolute;
  top: 200px;
}
#new_index_body_slide_image_2 {
  position: absolute;
  left: 30px; //not working
}
img {
  border: 1px solid red;
}
<div id="body" style="height:600px">
  <div id="index_content">
    <div id="index_content_slide">
      <div id="new_index_body_slide_image_1">
        <img src="http://i.imgur.com/8MqehqH.png">
      </div>
      <div id="new_index_body_slide_image_2">
        <img src="http://i.imgur.com/pNgIqxQ.png">
      </div>
    </div>
    <button onclick="test()">Click me</button>
  </div>
</div>

In case you wish to position the images next to each other(on the same row). Try top: 0 on the second image.

Positioning image side by side:

#index_content {
  position: absolute;
  top: 200px;
}
#new_index_body_slide_image_2 {
  position: absolute;
  top: 0;
  left: 30px;
  /* not working */
}
img {
  border: 1px solid red;
}
<div id="body" style="height:600px">
  <div id="index_content">
    <div id="index_content_slide">
      <div id="new_index_body_slide_image_1">
        <img src="http://i.imgur.com/8MqehqH.png">
      </div>
      <div id="new_index_body_slide_image_2">
        <img src="http://i.imgur.com/pNgIqxQ.png">
      </div>
    </div>
    <button onclick="test()">Click me</button>
  </div>
</div>