4 replies to this topic

[thedanphillips]

Alright, I'm having a float drop issue that I've tried literally everything I knew to figure it out.

I've been trying to figure this out for about 3 hours, I just can't find the source of the problem. I'm trying to get this image to float to the left of this text.

Here is what the problem is:
 problem.PNG   401.84K   36 downloads

Here's the HTML code:

<div id="description">
	  <div id="newsheader"><h2>News &amp; Events</h2></div>
	  <div id="news">	
	<p><img src="images/news/callcenterthumb.png" class="floatleft" />The call center is going to be moving buildings a few days before Halloween. The new building is located on the corner of Rockingham Drive and Old Placerville Road and the move will take place starting on Thursday the 29th, and will carry on through the weekend. We plan on being fully operational by the following Monday.</p>
	   <br class="clearfloat" />
	   </div><!--news-->
</div><!--description-->

Here's the CSS code:

#description {
	min-height: 500px;
	width: 650px;
	padding: 25px;
	margin: 0 auto;
	background: #f5cc86;
	text-align: left;
	color: #fff;
}

#newsheader {
	line-height: 52px;
	color: #F90;
	background: url(../images/images/newspressed_02.png) repeat-x;
	text-align: center;
}

#newsheader h2 {
	margin: 0;
}

#news {
	padding: 5px;
	background: url(../images/images/prodwrapbg_02.png) repeat-x #1d1d1d;
}

#news p {
	margin: 0 auto;
	font-size: 14px;
}

#news img {
	margin-right: 5px;
	border: 1px solid #000;
	width: 250px;
	height: 150px;
}

Help is very much appreciated!!! This is making my head hurt lol

[SemiProTuts.com]

#description {
min-height: 500px;
width: 650px;
padding: 25px;
margin: 0 auto;
background: #f5cc86;
text-align: left;
color: #fff;
Overflow: hidden
}

[rc69]

Well, you didn't include any of the classes in the CSS you posted. I'm not sure about how <br> works with CSS clear's, but i know it has a "clear" attribute.

Try:

<br clear="left" />

[thedanphillips]

SemiProTuts.com, on Oct 8 2009, 04:28 PM, said:

#description {
min-height: 500px;
width: 650px;
padding: 25px;
margin: 0 auto;
background: #f5cc86;
text-align: left;
color: #fff;
Overflow: hidden
}

Thanks! Didn't work when I put it in #description, but then when I tried it in #news it worked perfectly thanks for pointing me in the right direction! Also thanks for teaching me a new property Never used that one before.

[SemiProTuts.com]

Glad it worked Everytime I have a <div> with two <div>'s in it (content and sidebar mostly) and the background wont repeat, that does the trick.