socramm socramm - 4 months ago 26
CSS Question

Image Is Ignoring Div Container

HTML:

<div>
<img>
<div>
<table>...</table>
</div>
</div>


CSS:

#img {
position: absolut;
right: 0px;
}


Both divs are the same size as the table.

I want the image to float top right of the table.

This results that the img is at the right side of the screen and not in the div.


Edit: fixed absolut to absolute.

Answer

You need to add position:relative; to the containing div. Also, I would advise against using tables unless you will be displaying tabular data, they should not be used for layout.

.container {
  position:relative;
  width:500px;
  height:500px;
  border:1px solid black;
}
.container img {
  position:absolute; /* absolute misspelled in your example */
  top:0;
  right:0;
}
<div class="container">
    <img src="http://placehold.it/250x250" />
    <div>
    <table></table>
    </div>
</div>