CODEWITHSUNDEEP
htmlcss
user222427
user222427

Reputation:

table structure to css divs

I really need help converting this simple table structure to css div's. Is there a simple application or something. CSS divs are driving me insane.

<table width="100%" border="0">
  <tr>
<td colspan="3" id="Header"></td>
 </tr>
<tr>
<td width="20%" id="Nav2"></td>
<td width="40%" id="ContentMiddleLeft"></td>
<td width="40%" id="ContentMiddleRight"></td>
 </tr>
<tr>
<td colspan="3" id="BottomContent"></td>
</tr>
</table>

Upvotes: 1

Views: 4060

Answers (3)

Jon Egeland
Jon Egeland

Reputation: 12613

First Things First

There are some very important things to remember when changing from table to div layouts that generally apply to all new learning experiences.

  1. Don't get frustrated just because something's not working. Just take a break, look at something else, remember that it's something new and it won't always work the first time. It may take a number of different approaches and attempts before it finally works. You'll get the hang of it eventually.

  2. Especially in this case, remember that divs are vastly different from tables, especially when using them as a major structural part of a site. The thought process behind each is completely different and can take a lot of getting used to for it to click. Because of this:

  3. Not all designs transfer from table to div. Some things are only really easily and properly accomplished with tables, and others with divs. While this is not one of those cases in particular, be open to having to make some design changes when changing your site structure.

That being said, we can now answer the question properly.


An Answer

This is how I would set up the structure using divs:

<div id="wrap">
  <div id="header"></div>

  <div id="content">
    <div id="nav2"></div>
    <div id="content_right"></div>

    <div style="clear: both"></div>
  </div>

  <div id="footer"></div>
</div>

And this is what the css would be:

#wrap {
  width: 100%;
}

#header {
  width: 100%;
  height: /* some height value */;
}

#content {
  width: 100%;
  height: /* some height value */;
}

  #nav2 {
    width: 20%;
    float: left;
  }

  #content_right {
    width: 40%;
    float: right;
  }

#footer {
  width: 100%;
  height: /* some height value */;
}


Notes

As I was saying above, the thought process behind tables and divs are quite a bit different. With tables, you're used to using percentages (%) to define widths. This works and is not necessarily a bad thing. It gets the job done and is easy to do.

But when you're using divs, a more common approach is to have fixed widths defined by pixels (px). This allows for a more constant design that won't stretch across the page, and gives you more design freedom, knowing that the page will always be the same width.

For more information on fixed-width design, I would recommend looking at the 960 grid system. It is extremely easy to follow and leads to clean, good-looking designs that are easy to structure and style.

Most importantly, enjoy the new-found freedom that divs bring. They aren't locked in to anything and can literal do anything, be anywhere, and look like anything on a page. There isn't really a limit to what they can do. I've heard them called the only required part of a webpage (You really can design and create an enter page with just divs, text included).

Have fun on your journey!

Upvotes: 2

Sliq
Sliq

Reputation: 16494

CSS3 Style (using "display:table;"):

Check http://jsfiddle.net/reKfe/ (jsFiddle made from http://query7.com/exploring-the-power-of-css3)

Upvotes: 0

GTSouza
GTSouza

Reputation: 365

Test this:

EDIT: http://jsfiddle.net/DCbgg/

<style type="text/css" media="screen">
    .container {
        width: 100%;
    }
    .left20 {
        width: 20%;
        float: left;
        background: red;
    }
    .left40 {
        width: 40%;
        float: left;
        background: green;
    }
    .clear {
        clear: both;
    }
</style>

<div class="container">
    <div class="left20">
        Left
    </div>
    <div class="left20">
        Left        
    </div>
    <div class="left40">
        Left
    </div>
<div class="clear"></div>
    <div class="left20">
        Left
    </div>
    <div class="left20">
        Left        
    </div>
    <div class="left40">
        Left
    </div>
</div>
<div class="clear"></div>

Upvotes: 2

Related Questions