...

View Full Version : Text/image - text doesn't wrap around image



Daf
02-23-2005, 07:27 PM
Hello,

I'm trying to replace a few tables we have left on our site with CSS.

One of which is giving me a little trouble.

Here is the existing code w/table


<div class="lotto">
<table>
<tr>
<td><a href="http://www.txlottery.org/"><img src="images/lotterylogo.gif" height="58" class="blackborderpad"
align="left" width="50" alt="Texas Lottery" /></a></td>
<td>Mega Millions for 2/22/05 15 - 18 - 28 - 41 - 45 (27) MB
MEGAPLIER: 4<br />
Lotto Texas for 2/19/05 7 - 16 - 19 - 21 - 42 (19) BB<br />
Texas Two Step for 2/21/05 2 - 9 - 16 - 27 (33) BB<br />
Cash Five for 2/22/05 14 - 22 - 27 - 30 - 33<br />
Pick 3 Day for 2/22/05 2 - 6 - 2<br />
Pick 3 Night for 2/22/05 7 - 1 - 3</td>
</tr>
</table>
</div>

here is the "lotto" class:

.lotto {
background: #f5f5f5;
border: solid 1px #000000;
color: #000000;
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 5px;
padding: 3px;
}

I want the image to be independent of the text - like you see there with the 2 table cells separating the image and text. This is what I'm trying to reproduce with css.

Here is the code I'm working with:

<style type="text/css">

.lotto {
background: #f5f5f5;
border: solid 1px #000000;
color: #000000;
font: 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 5px;
padding: 10px;
height: 90px;
width: 90%;
}

.left {
float: left;
margin: 12px 0 0 10px;
width: 60px;
}

.right {
float: right;
position: relative;
top: auto;
left: -50%;
}

</style>
</head>
<body>
<div class="lotto">
<div class="left"><img src="http://www.ktbb.com/images/lotterylogo.gif" width="50" height="58" alt="" /></div>

<div class="right">Mega Millions for 2/22/05 15 - 18 - 28 - 41 - 45 (27) MB MEGAPLIER: 4<br />
Lotto Texas for 2/19/05 7 - 16 - 19 - 21 - 42 (19) BB<br />
Texas Two Step for 2/21/05 2 - 9 - 16 - 27 (33)<br />
BB Cash Five for 2/22/05 14 - 22 - 27 - 30 - 33<br />
Pick 3 Day for 2/22/05 2 - 6 - 2<br />
Pick 3 Night for 2/22/05 7 - 1 - 3</div>
</div>

I'm doing some testing in a test page and that's why no external css file - the actual site uses an external sheet.

Now this works fine in Firefox and Opera but not in IE (surprise!) - would one of you please take a look and see where I screwed up. :) Or suggest a better way? I would really appreciate it!

Thanks
Daf

Daf
02-24-2005, 12:34 AM
Did I post incorrectly? Sorry if that is the case. :confused:

Please let me know what I should correct.

Thanks
Daf

rmedek
02-24-2005, 12:50 AM
Patience, grasshopper :)

Actually, it would be a lot easier if you provided a link to your site... otherwise we have to copy/paste your code and some of us (well, okay... me) are notoriously lazy.

As far as the floats go, you could do without the float on the .right div. The nature of floats is that the text will wrap around the image, and if you set a margin on the .right class the text can be pushed off to the side, wherever you need it.

Try this in lieu of the css assigned to ".right", adjust to your taste:



.right {
margin-left: 100px
}


Hopefully that's more of what you were looking for...

Daf
02-24-2005, 01:31 AM
Ah - very nice!! That's what I was looking for. :)
I guess I was "over floating" ;)


Thanks for your time!

Daf

rmedek
02-24-2005, 01:33 AM
no problem :)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum