CODEWITHSUNDEEP
htmlcss
LoneXcoder
LoneXcoder

Reputation: 2163

how to replace a layout of html web page from a table to using divs

I've had page layout made via an Html table in my home page.

the lay out was fine , though i was reading that tables are not the way to go (SEO and maybe not only that)

so i need to use divs, the layout is as follows (i am in RTL Lang /style /direction)

enter image description here

My Question is Could anyone Try and simplify how to or give an example for a lay out like that

and in more detailed explained :

i think "my life" was so simple, when i had to understand the structure of a table so, for illustration purpose take this markup: 

<table>
     <tr> <td>1</td> <td>2</td> </tr>
     <tr> <td>3</td> <td>4</td> </tr>
</table>

here you don't need to think much to analyze that this will be 2 by 2 table

but when it comes to divs i get no results laying them as i plan to i would like to know how do i make that simple as it was with a table for me .

2 now that i am trying to achieve that layout via divs (no table involved ) and to make it work so that layout will be Cross Browser, meaning will look same at least for the 3 main browsers IE8&9 / FF / Chrome (only my preference)

thanks in advance

Upvotes: 0

Views: 6769

Answers (4)

Denes
Denes

Reputation: 1

HTML-Cleaner has a nice feature to replace HTML tables with DIVs: http://www.html-cleaner.com/features/replace-html-table-tags-with-divs/ Make sure you include the css code supplied.

Upvotes: -1

Sowmya
Sowmya

Reputation: 26989

Check this 

<div id="wrapper">
        <div id="header">
            <p>This is the Header</p>
        </div>
        <div id="navigation">
            <p>This is the Menu</p>
        </div>
        <div id="leftcolumn">
            <div class="row">
            <div>1st block</div>
            <div>2nd block</div>
            </div>
            <div class="row">
            <div>3rd block</div>
            <div>4th block</div>
            </div>
        </div>

        <div id="rightcolumn">
            sfsf
        </div>
        <div id="footer">
            <p>This is the Footer</p>
        </div>
    </div>

DEMO

Upvotes: 0

Rahul
Rahul

Reputation: 5636

enter image description here
I tried hard to make template like what you want.I hope you will like it.See my layout by division tag.I am attaching a screen shot as well that is created on the base of my div logic.I think it will be clear for you.

<div id="main" >
    <div style="background-color:Blue; text-align:center; ">
    Main banner
    </div>
    <div style="background-color:Green; text-align:center; " >
    Top menu
    </div>
    <div style="background-color:Gray; text-align:center; width:300px; float:right; height:200px; " >
    Right side menu
    </div>
    <div style="background-color:Red; text-align:center; height:200px;" >
    <div style="background-color:Fuchsia; text-align:center; width:300px; float:right; height:100px; ">
    contend2
    </div>
    <div style="background-color:Lime; text-align:center;height:100px;   ">
     contend1
    </div>
    <div style="background-color:Aqua; text-align:center; width:300px; float:right; height:100px; ">
    contend4
    </div>
    <div style="background-color:Orange; text-align:center;height:100px;   ">
     contend3
    </div>
    </div>
    <div style="background-color:Silver; text-align:center;   " >
    Footer
    </div>
    </div>


**In case if you want external css then use** 
<div id="main" >
    <div id="mainbanner">
    Main banner
    </div>
    <div id="topmenu" >
    Top menu
    </div>
    <div id="rsm" >
    Right side menu
    </div>
    <div id="maincontend" >
    <div id="c2" >
    contend2
    </div>
    <div id="c1">
     contend1
    </div>
    <div id="c4">
    contend4
    </div>
    <div id="c3">
     contend3
    </div>
    </div>
    <div id="footer">
    Footer
    </div>
    </div>
**CSS................**

#Main   
{
}

#mainbanner
{
    background-color:Blue;
    text-align:center;
}

#topmenu
{
    background-color:Green; 
    text-align:center;
}
#rsm
{
    background-color:Gray; 
    text-align:center; 
    width:300px; 
    float:right; 
    height:200px;
}
#maincontend
{
    background-color:Red; 
    text-align:center;
    height:200px;
}
#c2
{
   background-color:Fuchsia; 
   text-align:center; 
   width:300px; 
   float:right; 
   height:100px;  
}
#c1
{
   background-color:Lime; 
   text-align:center;
   height:100px; 
}
#c4
{
    background-color:Aqua; 
    text-align:center; 
    width:300px; 
    float:right; 
    height:100px;
}
#c3
{
    background-color:Orange; 
    text-align:center;
    height:100px;
}
#footer
{
    background-color:Silver; 
    text-align:center;
}

Upvotes: 3

Frank Conijn - Support Ukraine
Frank Conijn - Support Ukraine

Reputation: 3190

You can't ask for complete layouts, but I wrote two tutorials that will definitely help you acquire the skill required to make them: How to Position in CSS and Create a Fixed ('Sticky') Footer with CSS.

Upvotes: 2

Related Questions