How to code this? HTML/CSS/Other??

hello,

i need some help or advise. i need to achieve the following result:


current structure:



currently it's number of tables, subtables + lots of css stuff. what is the most efficient way of coding it?

pls help,
thanks.
s.

 

Get rid of the tables and use DIVs + CSS. You need at most one table (or maybe none).

 

why? is it faster loading/better/easier to write/other ?

how to do that using <div>s?

 

Using DIVs you can achieve the same visual result writing less html code. That means that the html files will have lowes sizes (so the site will be loading faster) and also (more important) the code will be lighter and cleaner, so it will be more "search engine friendly".
Of course, all of the DIVs properties must be defined in a separate CSS file.

 

ok, got the idea - that's qhat i want and that's why i have asked that question.

would you be able to show a simple solution here, for example how to replace one table with set of divs? just to let me understand the structure.

i'll google it separately though but some help would be much appreciated.

thanks!
s.

 

<div class="wrapper">
    <div class="top">top border image here</div>
    <div class="middle">
        <div class="left-panel">this will have "float: left"</div>
        <div class="content">
            title, added by, description, logo, go to deal
        </div>
    </div>
    <div class="bottom">bottom border image here</div>
</div>

Code (markup):

This is just a basic example. All you need to use to replace tables with DIVs are the following css properties: margin, padding, float, clear.

 

Divs + CSS of course