As you can see on the image to the left, the text under the dotted line (previous page link) is overlapping on my image. Is it normal? And I'm to modify the code to accomodate the image? I thought the layout structure was made in a way that it would push that part of the page automatically to make room for the newly added element.
This is the code in the page (you may have to select-copy-past it in order to see it all):
Code: Select all
<div class="container"> <div class="left" align="center"><img src="http://www.baseballcapian.com/uploads/images/gear_icon.png" name="the gear" id="test" height="169" width="218" /> </div> <div class="content"> <p class="bodytxt">Everything about promoting the cause here soon. Namely ideas and a gateway to our <a href="http://www.cafepress.com/baseballcapian" class="external" target="_blank" title="Baseballcapian Gear">shop</a> where you can find all kinds of cool wear to promote Baseballcapian.</p> </div> </div>And the new CSS I just added and attached:
Code: Select all
@charset "utf-8";
/* CSS Document */
<style type="text/css">
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
div.header
{
padding:0.1em;
color:white;
background-color:#66CCFF;
clear:left;
}
h1.header
{
padding:0;
margin:0;
}
div.left
{
float:left;
width:60px;
margin:0;
padding:4px;
padding-bottom: 0px;
margin-top: 0px;
padding-top: 10px;
}
div.content
{
margin-left:218px;
padding:1px;
}
div.content_main
{
margin-left:0px;
padding:1em;
}
</style>
