View Full Version : Basic Layout Question, Floats

09-05-2008, 05:25 PM
Good Day All,

I have a basic layout question. In this page, any many others, I have my image element floated to the left of a table. This seems to work well in big resolutions but when I view the page on smaller resolutions, the table gets pushed down below the image. In some cases, this is ok... but if I want to prevent this from happening and keep the img and table together to prevent the dropping, how can I do this? What is the cleanest/easiest way? In the example below, the 4th table from the top is the one that will drop first. Any thoughts greatly appreciated. Also, I would like to keep my liquid layout other than grouping these two items together - and I only need to apply this to a few of them, not all.



09-05-2008, 07:23 PM
NOTE: I have found that nesting the image and table inside another table to work acceptably well but would still like to know how to prevent the wrapping via CSS methods if anyone knows. Best, Colin

09-05-2008, 09:06 PM
The normal behavior of a float is to do exactly that. If you don't want that behavior, don't use a float.

09-05-2008, 09:29 PM
Thanks Jerry - If I simply put the <img> element and the <table> element right after each other in the markup, the table is placed below the img. I want them to rest side by side. How can I do this without a float?

09-05-2008, 11:04 PM
I couldn't see the affect you described on your page under either FF3 or IE6. But if you want picture "x" to be in the 0-100, 0-100 (top 0 left 0 bottom 100 and right 100) with something (table, whatever) next to it regardless of the size of the window, then you could:

img {position:absolute; top:0; left:0;}
#yourotherthing {margin-left:100px;}

By making the image absolute, it is out of the formatting of the page. By putting a margin on the div, table, whatever, you move it to allow the image to show (otherwise it would be under the div, table, etc).

09-06-2008, 08:23 AM
How about putting those tables inside <p class="action"> (just after the image, before a <br>) ?

09-08-2008, 02:39 PM
Abduraooft, I just tried this but the table still drops down below the image if the window is resized too small (or if resolutions get too small). I am trying to keep them aligned no matter what.


09-08-2008, 07:22 PM
Did you checked the standard layouts from bonrouge.com (http://bonrouge.com/3c-hf-fluid-lc.php)

09-09-2008, 09:25 PM
I ended up putting a container div with a set width to the size slightly bigger than the table and image side by side and it worked- no more float dropping. Thank you for your help!