CODEWITHSUNDEEP
htmlcss
Frank van Wensveen
Frank van Wensveen

Reputation: 562

Make a table partially overlap an image

I have the following HTML code:

<table class="layout"><tr><td>
  <img src="image.jpg" style="float:right;" />
  <table>
    <tr><td>Blah</td><td>Blah</td></tr>
    <tr><td>Blah</td><td>Blah</td></tr>
  </table>
</table>

This is rendered as follows:

+-------------------------------------------+
|      +-----------------------------------+|
|      |                                    |
|      |               (image)              |
|      |                                    |
|      +-----------------------------------+|
|+----++----+                               |
||Blah||Blah|                               |
|+----++----+                               |
||Blah||Blah|                               |
|+----++----+                               |
~                                           ~
+-------------------------------------------+

Which makes sense, because the table is a block element which does not wrap and is being shifted down to clear the image. However, what I'm trying to accomplish is to make the table partially overlap the image:

+-------------------------------------------+
|+----++-----+-----------------------------+|
||Blah||Blah|                               |
|+----++----+          (image)              |
||Blah||Blah|                               |
|+----++----+------------------------------+|
~                                           ~
+-------------------------------------------+

This is complicated by the fact that all page content lives inside a layout table (it's legacy code; using CSS for layout would of course be preferable but I'm stuck with this as-is). Using a position: absolute on the image positions it absolute in reference to the viewport and not to the layout table. i.e. against the right hand side viewport edge and not the right hand side layout table edge.

What is the best way to do this?

Upvotes: 1

Views: 237

Answers (3)

misterManSam
misterManSam

Reputation: 24712

To prevent the inner table from positioning itself relative to the viewport, you need to use position: relative on the parent table

Use position: absolute and top / left / right / bottom on the inner table in order to get the position you want.

Have an example!

CSS

.layout {
    position: relative;
}

.layout table {
    position: absolute;
    top: 0;
}

Depending on how much of a mess your legacy layout is, you may have problems with other children of this table. In that case, wrap everything inside the parent table in a <div> and make that position: relative instead.

Second example with inner div wrap.

HTML

<table class="layout"><tr><td>
  <div class="relative">
      <img src="image.jpg" style="float:right;" />
      <table>
        <tr><td>Blah</td><td>Blah</td></tr>
        <tr><td>Blah</td><td>Blah</td></tr>
     </table>
  </div>
</td></tr><!-- close that cell and row! -->
</table>

CSS

.layout .relative {
    position: relative;
}

.layout table {
    position: absolute;
    top: 0;
}

Upvotes: 1

Ozzy
Ozzy

Reputation: 8322

You could put a negative margin on the table so the it is shifted upwards. But since its just an image why not have the image in the background of the table?

table#myTable {
    background-image: url('/path/to/image.jpg');
    background-position: 50px /*50px to the right*/ top;
}

Upvotes: 0

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13998

Add one div around your inside table and assign float:left

 <table class="layout"><tr><td>
   <img src="http://isc.stuorg.iastate.edu/wp-content/uploads/sample.jpg" style="float:right;" />
   <div style="float:left">
   <table>
     <tr><td>Blah</td><td>Blah</td></tr>
     <tr><td>Blah</td><td>Blah</td></tr>
   </table>
   </div>
</table>

DEMO

Upvotes: 0

Related Questions