Problem with image/text alignment

HTML & CSS
1

I have a question about wrapping text around an image. I want to have a small 64x64 icon next to some sections on my page.

According to W3C I should be using text-align instead of align.

So when I do the following code, everything works correclty:


<img src="#" alt="Icon" width="64px" height="64px" align="left" />

But I want to do this through my .css file. My CSS file (I am using Notepadd++ for the editor) does not reconize “align” as a valid attribute.

So I instead have used text-align in my CSS file.

It doesn’t matter which of the two I use, either way it breaks my code, because the image does not wrap with the text.

Is there anyway I can remove the align attribute from inline html and put it into my CSS file and still have it work? Also, what attribute is correct? text-align does not seem to work in this case, even though W3C tells me not to use align.

2

Hi,
Just change the align attribute to “class” on that image. Then set up a .left class in the css and give it float:left;

<img [B]class="left"[/B] src="#" alt="Icon" width="64px" height="64px" />

.left {float:left}

Now your text will wrap around the image. :wink:

3

Thanks. I tried that just earlier and it didn’t work. But now it seems to work. I don’t know what I was doing wrong before.

However, it brings me to one more question about this floating. I have a design which has two columns. They are <div> both floated left so they are next to each other. The design looks just how I want it.

Except when the user resize the browser window too small the column on the right snaps down and goes below the column on the left, and then the entire web page is thrown off and looks bad.

I looked into the min-width attribute that was talked about, but that does not seem to help. As soon as the column hits that min-width it snaps down under the left most column.

I tried creating a special <div> container that contained both columns, and set a min-width on that. But I realized that because the two columns were floated they were not actually inside the container in the browser, so that had no affect at all.

I just can’t find anything that tells me how to stop my 2 column deisgn from snaping down like that.

Your comment about floating the image reminded me I need to fix that.

4

I looked into the min-width attribute that was talked about, but that does not seem to help. As soon as the column hits that min-width it snaps down under the left most column.
That’s just normal float drop, it happens when there is not enough space for the floats to sit next to each other.

You should be able to set a min-width on the parent of the floats. Make sure you account for any margins/paddings that may be on the floats as they will effect the total width and must be accounted for in the min-width.

5

Hi,

But I think this is the problem because the body is my parent for my two columns. I tried to place the two columns inside another div, but because they were floated columns they just sat ontop of the other div.

I did something like this and I placed min-width on the container div, but because the two left and right columns were floated they popped out of the container in the browser. I verified this when I set a border around all divs, to see why things were not working.


<div class="ColumnContainer">
 <div class="LeftColumn>
 </div>
 <div class="RightColumn">
 </div>
</div>

Is there another way I’m missing to do this?

6

I placed min-width on the container div, but because the two left and right columns were floated they popped out of the container in the browser.
That’s because floats are removed from the normal page flow. You need to force the parent to enclose it’s floated children. That is normally done with overflow:hidden; on the parent. Add it to your parent rules along with min-width


.ColumnContainer {
overflow:hidden;
min-width: ?;
}
7

Thanks, it seems to be working now in FF and IE.

I remember hearing about that overflow attribute in college but there is so much stuff I completely forgot about it.

8

Glad you got it under control :slight_smile:

There will be times that using overflow:hidden will not work. If you have content that intentionally needs to hang out it will get clipped. I revert back to an adaption of the clearfix method in those cases.

You can learn about more about the different methods for Float Containment