Forum Moderators: open
<div align="right"><img src="img/p231.jpg" width="150" height="150" alt="" border="0" align="right"></div>
<div align="left"><table border="0" width="560">
table stuff
</table></div>
Now.. if the user resizes the screen or the screen resolution they are using is smaller than 1024 x 768, that image moves under the table and looks bad. Any ideas how to fix this?
Thanks in advance,
Put this CSS in your <head>:
<style>
#image { float: right; }
#table { margin-right: 150px; }
</style>
And your HTML is pretty much correct....
<div id='image'><img .......></div><div id='table'>
<table width='100%'>
</table>
</div>
If you want a gap between the IMG and the TABLE just increase the margin on the table.
The quick fix is drop the div's and add a td in first tr with a rowspan.
<td rowspan="#ofrows">yourimage.jpg</td>
Don't give up on the div's though, do a search for doing floats. It's similar to align, been a while since I've used regular HTML but I don't even think align is a valid attribute for a div.
I tested this code and it works. This is a copy of my test page. Note I have specified width 150px on the image div as I don't have an image. Normally this DIV would stretch to the image size anyway.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>Untitled</title>
<style type="text/css">#image { float: right; width: 150px; background: lightblue; }
#table { margin-right: 150px; background: lavender; }</style>
</head><body>
<div id='image'>Image</div>
<div id='table'>
<table width='100%'>
<tr><td>Table Cell</td></tr>
</table>
</div></body>
</html>
Test in IE and you'll see it drops, not sure about FF. As I said the OP probably has some default margins or padding or other content that is coming into play, the table will expand to fit the content beyond what you specify in the css. Once it goes beyond the viewport width it will drop.
Try putting an image where you have the text "table cell" that is larger than your monitor width. ;)
Well duh? Of course if the content of the <table> is too large to contain it the float will drop.
Also note that different doc type declarations will have varying effects.
Agreed, I always use HTML4.01 STRICT at the moment.
Test in IE and you'll see it drops, not sure about FF. As I said the OP probably has some default margins or padding or other content that is coming into play
I didn't have that problem, but usually I add:
* { margin: 0; padding: 0; border: 0; } The table will expand to fit the content beyond what you specify in the css. Once it goes beyond the viewport width it will drop.
Try to stay away from specifiying the width of table/cells in the CSS, this should help this problem, unless they have an extremely small res in which case you probably can't help them anyway.
but I dont think I have alot of people that will view the site in firefox
Think again. I used to think this but in Europe I believe from another thread that it's at least 20% of people. On 1,000 hits that 200 people, a big percentage. Look after them.
Another thing I've learned about coding since I've been using the forum is to code in FF and then tweak for IE. 2 reasons, FF is more standards compliant than IE, and is more likely to give you a correct representation of the page. Only IE supports conditional comments, so it's much easier to add an additional stylesheet for IE than FF.
Glad you got it working.
Well duh? Of course if the content of the <table> is too large to contain it the float will drop.
Excuse me but my posts were to answer the original posters questions as to why the table was dropping.
Try to stay away from specifiying the width of table/cells in the CSS, this should help this problem, unless they have an extremely small res in which case you probably can't help them anyway.
Just use:
table {width:auto;}
Excuse me but my posts were to answer the original posters questions as to why the table was dropping.
Apologies, taken out of context.
Just use:table {width:auto;}
This should be default as long as you don't specify width='' on the table itself.
