Floated image won't align to top of text

floated image

[Michalyn]

Hi, I'm fairly new to CSS but I've been enjoying working with it. I've now stumbled onto a problem that is making me tear my hair out. I have a centered, fixed width 2-column design. and I'm trying to insert an image and float it left so that the text in the div wraps around it.

The problem is that the image keeps being pushed down to the 3rd or 4th paragraph instead of the actual paragraph it's placed in.

What could be causing this? I've included my code below. Thanks!

/*----------PAGE CENTERED AND FLUSH TOP-----*/
*{margin:0px;
padding: 0px;
}
/*---------------BODY BACKGROUND------------*/
body{
background-color:#333333;
}
/*-----------BACKGROUND-CONTAINER-----------*/
#background-container{
width: 780px;
background-color:white;
margin: 0px auto;
padding-top:0px;
padding-bottom:0px;
font-family:Arial;
font-size:10pt;
}
/*-------HEADER ELEMENTS----------*/
#banner{
width: 780px;
height: 200px;
background-color:#CC9900;
background-image:url();
border-bottom: 5px solid #333333;
}
#header{
width:770px;
background-color:#FFFFFF;
background-image:url(vertical-scanline.jpg);
padding-left:10px;
font-family: Arial;
font-size:29px;
font-weight: bold;
}
/*-----------BEGIN DROP-DOWN MENU--------*/
div#listmenu{
background-color:#860505;
font: 10pt Arial;
float:left;
width:780px;
margin: 0px auto;
}
div#listmenu ul{
margin: 0 0 0 30px;
}
*html div#listmenu ul{
float:left;
border-left: 1px solid gray;
margin-left:15px;
}
*html a{display:block;
color:#FFFFFF;}
div#listmenu li{
float:left;
position:relative;
background-color:#860505;
list-style-type:none;
padding: 0 6px;
border-right:1px solid black;
}
div#listmenu ul li ul{
margin: 0px;
position:absolute;
width:10em;}
div#listmenu ul li ul li{
width:100%;
border-left: 1px solid gray;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
div#listmenu li{first-child:
border-left: 1px solid black;
}
div#listmenu ul li ul li {first-child:
border-top: 1px solid gray;
}
div#listmenu a{
text-decoration:none;
font-weight:bold;
color:#ffffff;
display:block;
padding: 0 6px;
background-color:#860505;
}
div#listmenu a:hover{
background-color:#FFFFFF;
color:#000000;
}
body div#listcontainer ul li ul {display:none;}
div#listcontainer ul li:hover ul {
display:block;
}
div#listcontainer ul li:hover ul, div#listcontainer ul li ul:hover {display:block;
z-index:25;
}
/*-----------END DROP-DOWN MENU--------*/
/*-----CLEARING ELEMENT BEGIN---------*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/*-----CLEARING ELEMENT END---------*/
/*--------------MAIN CONTENT---------*/
#main-container{
background-color:#ffffff;
}
/*----------COLUMNS--------*/
#sectionright{
width:190px;
background-color:#860505;
border-bottom: 5px solid #333333;
font-family:Arial;
font-size:14px;
font-weight:bold;
color:#FFFFFF;
text-indent:20px;
float:right;
}
#rightcol{
width:190px;
background-color:#CCCCCC;
font-family:"Arial";
color:#000000;
font-size:12px;
text-align: left;
text-indent:20px;
border-bottom: 5px solid #333333;
padding:0px;
float: right;
clear:right;
}
#subscription{
width: 190px;
background-color:#CC9900;
border-bottom: 5px solid #333333;
font-family:Arial;
text-align:left;
font-size:10px;
margin-bottom:3px;
float: right;
clear:right;
}
#crisp{
width:190px;
height:150px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
font-family:"Arial";
color:#000000;
font-size:11px;
text-align:left;
float:right;
clear:right;
margin-bottom:3px;
}
#logo{
width:190px;
height:90px;
background-color:#FFFFFF;
border-bottom: 5px solid #333333;
float: right;
clear:right;
}
#left-floater{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}
#floater-bottomleft{
width:150px;
padding-top:50px;
float:right;
background-color:#FFFFFF;
font-size:11pt;
}
#bottom{
width: 675px;
clear:right;
background-color:#FFFFFF;
margin-top: 15px;
margin-bottom: 15px;
}
#footer{
height:15px;
width: 780px;
background-color:#999999;
font-family:"Arial";
font-size:10px;
text-align:center;
margin-top:5px;
clear:right;
}
/*-----------BODY ELEMENTS-------*/
.subheader{
background-color:#D1A10D;
font-family:"Arial";
font-size:19px;
font-weight: bold;
text-align:left;
text-indent:5px;
padding-top:5px;
padding-bottom: 2px;
}
.pagesub{
background-color:#FFFFFF;
font-family:"Arial";
font-size:16px;
font-weight: bold;
color:#860505;
text-align:left;
margin-top:5px;
margin-bottom: 5px;
}
.column-title{
width: 190px;
font-family:Arial;
color: #000000;
font-size: 14px;
font-weight:bold;
text-align: center;
}
div#main-container img {
float:left;
border: 1px solid #333;
}
/*------PARAGRAPH PROPERTIES-----*/
.p-main{
width:560px;
margin-left:5px;
padding-top:10px;
padding-bottom:10px;
text-align:justify;
font-size:10pt;
}
ul{
padding-left:15px;
list-style:none;
}
.pcolumn{padding-left: 40px;}
.p-ul{font:10pt Arial;}
.ptop{margin-bottom:5px;}
/*----------------LINK PROPERTIES--------------*/
a:link{color:#000000; background-color:transparent;}
a:visited{color:#CC0000; background-color:transparent;}
a:active{color:#000000; background-color:transparent;}
/*-----------RIGHT COL AND CRISP LINK PROPERTIES----*/
div#rightcol a:link{color:#000000; background-color:transparent;}
div#rightcol a:visited{color:#CC0000; background-color:transparent;}
div#rightcol a:active{color:#000000; background-color:transparent;}
div#crisp a:link{color:#000000; background-color:transparent;}
div#crisp a:visited{color:#CC0000; background-color:transparent;}
div#crisp a:active{color:#000000; background-color:transparent;}
And the HTML section below:
<div id="main-container">
<p class="subheader">Director's Message</p>
<p class="p-main"><img src="btdill2.jpg" width="150" height="175" />Welcome to the Web site for the Consortium on Race, Gender and Ethnicity.</p>
<p class="p-main">The Consortium is an association of academic units and individual faculty on the University of Maryland campus whose mission is to promote, advance, and conduct research, scholarship, and faculty development that examines the intersections of race, gender, and ethnicity with other dimensions of difference.</p>
<p class="p-main">Established in 1998 with support from the Colleges of Arts and Humanities, Behavioral and Social Sciences, the Graduate School, and the Office of the Provost, the Consortium seeks to: support, coordinate, and facilitate the activities of the many outstanding faculty and academic units at Maryland engaged in scholarship that focuses on intersections of race, gender, and ethnicity; and to build visibility both on and off-campus for our exceptional wealth of resources.</p>
<p class="p-main">Through our affiliates, community partners, and research interest groups, we encourage an intellectual climate that supports collaboration. Through our Research Program Areas, we promote approaches that contextualize the lives and experiences of the individuals and groups that participate in our research. Through this Web site and other dissemination efforts, we develop applications of knowledge to human problems. Through a variety of research training opportunities we seek to transfer intellectual capital to upcoming generations.</p>
</div>

[edited by: Michalyn at 12:56 pm (utc) on Jan. 8, 2008]

[penders]

Hi Michalyn, the code you've posted seems to behave as expected? In that the image is staying floated at the top left, with the text in the corresponding paragraph wrapping to the right.

In IE6... The text in subsequent paragraphs, however, might appear below the image and 1st para because of the width:560px being set on p-main. Rather than setting the width of the P's perhaps restrict the width by controlling the width of the parent?

[Michalyn]

Hi penders,

Thanks for your reply. I did as you suggested and set the width only to the parent element. The funny thing is the page now looks perfect in IE7 but the image is still being pushed to the bottom in Firefox and Opera. I can't figure out what the problem is.

[penders]

Are you using ".clearfix" anywhere in your markup? This has a clear:both and will get interpreted by Firefox since it uses the :after pseudo element (but not by IE6/7).

[Michalyn]

I was using a .clearfix for the menu but I removed it. The picture still won't line up. I'm so confused. The one thing I did try was when I set the overflow of the main-content to hidden,the picture lines up where it should be in firefox and opera.

[penders]

The one thing I did try was when I set the overflow of the main-content to hidden,the picture lines up where it should be in firefox and opera.

You do not mention

main-content

in the code above, is this your

main-container

?

Setting overflow:hidden on a container has the effect of clearing any floated elements within it; this is the prefered way of doing this. As opposed to simply having a clearing DIV below the floated elements or using your .clearfix hack. However, it's not obvious (to me) looking at your code above why this should have the desired effect of stopping the floated element from being forced down.

NB: In IE6 (and 7?) you need to give the containing element hasLayout for the

overflow:hidden

trick to have an effect. This is often achieved by giving the element

width

, but a number of other properties can do this as well.

[Xapti]

Well I'm just making a logical guess that your image is being pushed down due to a clear in your other column.
The problem with the code you gave us is that you gave a horde of CSS that isn't used in HTML at all, and you didn't include the other column's HTML code.
What is your current situation with the problem now? (for which browsers)

On a side not I also noticed you're mixing pixels and points, something you might not want. The best thing to do would be to use ems or %, since it will base everything off the user's size (or base page size if you really want to set a px or pt base for the page).

[edited by: Xapti at 5:53 pm (utc) on Jan. 9, 2008]