# Why does the image overlap the DIV?

**URL:** <https://forum.kirupa.com/t/why-does-the-image-overlap-the-div/263500>\
**Category:** Uncategorized\
**Created:** [June 16, 2008, 5:42pm UTC](https://forum.kirupa.com/t/why-does-the-image-overlap-the-div/263500 "2008-06-16T17:42:30Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![imagined](https://avatars.discourse-cdn.com/v4/letter/i/a87d85/32.png) [@imagined](https://forum.kirupa.com/u/imagined)\
**Post date:** [June 16, 2008, 5:42pm UTC](https://forum.kirupa.com/t/why-does-the-image-overlap-the-div/263500/1 "2008-06-16T17:42:30Z")

</div>

[http://www.webdeveloperwannabe.com/index\_cssTest.php](http://www.webdeveloperwannabe.com/index_cssTest.php)

How can I make the thumbnail do NOT overlap the DIV? im going hairless with this! haha

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [June 16, 2008, 6:05pm UTC](https://forum.kirupa.com/t/why-does-the-image-overlap-the-div/263500/2 "2008-06-16T18:05:21Z")

</div>

Ignoring your Javascript issue, change your div#content in tagsTemp.css to look like this (you needed to add height):

div#content .tutorial {  
background-color:#FFFFCC;  
border-bottom:1px solid #CCCCCC;  
height:175px;  
margin-top:15px;  
vertical-align:middle;  
}

---

<div class="post-metadata">

**Author:** ![imagined](https://avatars.discourse-cdn.com/v4/letter/i/a87d85/32.png) [@imagined](https://forum.kirupa.com/u/imagined)\
**Post date:** [June 16, 2008, 6:09pm UTC](https://forum.kirupa.com/t/why-does-the-image-overlap-the-div/263500/3 "2008-06-16T18:09:03Z")

</div>

javascript issue? do you see a javascript error?

im using IE7 and i dont get one.

---

<div class="post-metadata">

**Author:** ![fasterthanlight](https://avatars.discourse-cdn.com/v4/letter/f/ecc23a/32.png) [@fasterthanlight](https://forum.kirupa.com/u/fasterthanlight)\
**Post date:** [June 16, 2008, 6:13pm UTC](https://forum.kirupa.com/t/why-does-the-image-overlap-the-div/263500/4 "2008-06-16T18:13:04Z")

</div>

why do you have \<a\>\</a\> tags wrapping around a div?

you shouldn’t need to define the height of the image if you set your div structure up properly:

\<div class=“tutorial”\>  
\<div class=“thumbnail”\>\<img src=“thumbnail.jpg”/\>\</div\>  
\<div class=“content”\>  
\<a href=“link”\>\</a\>  
\<p\>Lorem ipsum… \</p\>  
\</div\>  
\<div class=“clear\_both”\>\</div\> [COLOR=Red]\ ***EDIT: D’OH! Forgot to clear the floats yO!** [/COLOR]  
\</div\>

.thumbnail and .content would be floated left and right, respectively

---

<div class="post-metadata">

**Author:** ![actionAction](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/actionaction/32/3987_2.png) [@actionAction](https://forum.kirupa.com/u/actionAction)\
**Post date:** [June 16, 2008, 6:16pm UTC](https://forum.kirupa.com/t/why-does-the-image-overlap-the-div/263500/5 "2008-06-16T18:16:29Z")

</div>

document.getElementById("\_ytplayer\_vjVQa1PpcFOlyb5lGF5FTCgd9TtdoXXhKk8iNWK4eZs=").innerHTML = “\<a href=‘[http://www.youtube.com/browse](http://www.youtube.com/browse)’\>Watch the latest videos on YouTube.com\</a\>”;

div has no properties. Your script is attempting to get the id of the div before it’s loaded. It’s the youtube js by the way. I would change this:

```auto

__ytPlayerReadyCheck_1213639959();

```

to this:

```auto

window.onload = __ytPlayerReadyCheck_1213639959();

```