Pixel2Life Forum > I'm having a float issue that I can't figure out

Full Version: I'm having a float issue that I can't figure out

Pixel2Life Forum > Help Section > HTML, XHTML, CSS and General Web Design

thedanphillips

Oct 8 2009, 03:44 PM

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:
Click to view attachment

Here's the HTML code:

CODE

<div id="description">
      <div id="newsheader"><h2>News & 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>
</div>

Here's the CSS code:

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

Oct 8 2009, 06:28 PM

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

rc69

Oct 8 2009, 08:00 PM

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:

CODE

thedanphillips

Oct 9 2009, 12:29 PM

QUOTE (SemiProTuts.com @ Oct 8 2009, 04:28 PM)

#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

Oct 10 2009, 01:47 PM

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.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.