Hi everyone. I am making a page that will output articles from a database. I am having the image with the article float left so that the text wraps the image and so that it goes to the left of the page. The problem is when I do this the <div> doesnt include the image and the bottom border is redrawn under the image if I dont have enough text to push it down. The text still wraps properly and the image is place correctly, the bottom border of the box surrounding the article just doesnt adjust correctly when I float it, but does when I have no float.

I have included some css code below, I think the problem is somewhere in there. Anyways help would be appreciated!

#page {
  clear: both;
  float: left;
  width: 100%;
  margin-bottom: 6em;
  text-align: left;
}
#columns {
  margin: 0 auto;
#textHolder {
border: 1px dashed gray;
margin-top: 10px;
height:auto;
padding-left: 5px;
padding-top:10px;
padding-bottom:10px;
}
}
.newsImage {
padding-right: 15px;
float:left;
}

clear: both; is done after the float; that is, after what you want to wrap around what is floated has.

tim

yes serandfae is right

this is what you usually do:

#page {
float: left;
width: 100%;
margin-bottom: 6em;
text-align: left;
}
#columns {
margin: 0 auto;
#textHolder {
border: 1px dashed gray;
margin-top: 10px;
height;
padding-left: 5px;
padding-top:10px;
padding-bottom:10px;
}
}
.newsImage {
padding-right: 15px;
float:left;
}

.clr {
clear: both;
}

then in your code after your float eg:

<div id="page"></div>
<div class="clr"></div>
<p>hello world</p>

the clear will tell anything else after the clear goes on a new line whereas if you don't have it then it gets wrapped (floated) like the rest before it, so in my example p will be on a new line.

Ok ya it worked. I put <div class="clear"></div> right after the text that I wanted wrapped. Too bad there wasnt another way though so I would need to have an empty div with nothing in it but oh well.

Thanks for the help.

There most certainly ARE other ways to clear floats and I wouldn't use an empty div either. Read up on the other methods here:

http://css-discuss.incutio.com/?page=ClearingSpace

LadynRed I knew that if this thread kept going long enough you would come in with the perfect answer . Thanks.

Glad I could help. I was watching the thread, and you did get your answer, but that empty div for clearing just bugs me so I wanted to point out the alternatives