Question

I have 4 centered tables (header, navigation, content, footer):

<table id="header" width="760" align="center">...</table>
<table id="navigation" width="760" align="center">...</table>

<table width="760" height="28" border="0" align="center" id="content">
    ...
</table>

<table id="footer" width="760" align="center">...</table>

I have removed some code from above example (borders, cellpadding etc.)
This makes tables to be in the center of the screen and with width=760.
In this case left and right margins of the screen contains some white spaces.
I need to put 4 images in those white spaces (two images on the left side of the table; images are to be positioned vertically; and two images on the right side – also positioned one on top of the other image).

So, probably I need to create two divs (Left div and Right div).
And I need those Divs to be aligned to the left side of all tables and to the right side of all tables.

LEFT DIV|ALL TABLES| RIGHT DIV

Images have max allowed width, but they do not have any predefined height.

I do not know how to do this…
I usually do backend, so I do not need CSS much. But not in this project… Usually I do not use Tables but Divs for layout and then I would use position=”relative” for Left and Right Divs, but it seems that it would not work with tables.

Can you give me some clues, please?

Answer 1

you got to wrapp your tables in a div. take a look at this jsfiddle. you can adjust the css for you own likings but that is how you do what you want.

EDIT
added clearfix instead of overflow: hidden;, and added two images on each side.
EDIT2 here is how to make layout centred. jsfiddle

<div id="wrapper clearfix">
  <div class="side-div">
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="left" />
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="left" />
  </div>

  <div class="main-content">
    tables
  </div>

  <div class="side-div">
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="right" />
    <img src="http://dummyimage.com/60x60/000/fff.png" alt="right" />
  </div>
</div>​



.side-div {
    float: left;
    width: 60px;
    min-height: 100px;
    background-color: #ccc;
    padding: 0 10px;
}

.main-content {
    float: left;
    min-height: 100px;
    background-color: #ccddff;
    padding: 0 10px;
}

/*clearfix instead of overflow: hidden;*/

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
    display: inline-block;
}

.clearfix {
    display: block;
}

​