I've been working on a project where I need to insert a div containing an image into another div. The parent div already has two other child divs set up and functioning perfectly. Here is the HTML code for the parent and child divs:
<div id="contentsWrapper">
<div><ul id="sideNav">
<li><a href="linkone.html" id="linkone">One</a></li>
<li><a href="linktwo.html" id="linktwo">Two</a></li>
</ul></div>
<div id="text">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, <br />
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna.
</div>
<div id="picture">
<img src="picture.jpg" alt="picture" height="200" width="200" />
</div>
</div>Here is the CSS code:
#contentsWrapper {
width: 800px;
margin-left: 10px;
}
#sideNav {
padding: 0;
list-style: none;
width: 160px;
margin-top: 0px;
border-bottom: 1px dashed #999;
position: absolute;
}
#text {
width: 375px;
margin-left: 180px;
font-weight: bold;
}
#picture {
position: absolute;
width: 225px;
margin-left: 575px;
background-color: #FFFF00;
}After implementing this code, the picture appears correctly aligned with the left side of the screen but ends up below the contentsWrapper div. I have attempted adjusting the width and margin-left values for the picture div without success.