ansaurus

Question

Switching from tables to divs with CSS

Answer 1

+1 A:

You're going to want to use the three-column negative margin trick (demo).

cpharmston 2009-10-17 22:32:45

Answer 2

+2 A:

If semantic order is not important, it works to move your right div above your content div:

<div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
<div style="float: right; width: 30px; height: 100%; background-color: blue;">R</div>
<div style="margin-left: 30px; margin-right: 30px; height: 100%; background-color: yellow;">This is my Content!...</div>

Joel Potter 2009-10-17 22:34:17

Answer 3

+2 A:

Sorry to be blunt, but you're going about this the wrong way. The question isn't one of 'tables vs divs' it's one of 'tables vs web-standards'. It's very tempting when you start out with CSS to wrap everything in a <div> and be done with it, when really the point is to use the correct HTML element to represent the data it contains, and use CSS to style it.

With that in mind, what is the actual content of the page? Is it a list of data? A series of paragraphs? Maybe it is actually tabular data, in which case a table is the right choice? Once you've determined that, and wrote the appropriate HTML, then you can start on the CSS. Sometimes you may have to add extra HTML elements to achieve the style you need, that's okay as long as you've already hashed out the structure and thought long and hard about such elements.

roryf 2009-10-17 22:37:21

Eric the Red 2009-10-17 22:52:39

In that case I would consider using a repeating image (i.e. wide enough to fit most resolutions but 1px high) and set that as the background to the container div.

roryf 2009-10-17 23:04:30

Unfortunately that doesn't help with rounded corners.

Eric the Red 2009-10-17 23:20:18

Then we're into the idea of Progressive Enhancement. Look at the CSS3 property 'border-radius' and it's webkit/mozilla cousins, using those techniques you can target standards compliant browsers today without hacks and still support other browsers albeit with a degraded visual experience. Once those browsers catch up they should start experiencing the same effects.

roryf 2009-10-18 02:59:25

Answer 4

A:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<title>:)</title>
<body>
  <p>Text up here...</p>
  <div style="height: 200px; background-color: red;">
    <div style="height: 100%; margin-right: 20%;">
      <div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
      <div style="float: left; width: 80%; height: 100%; background-color: yellow;">

This is my Content! Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

      </div>
      <div style="float: left; width: 30px; height: 100%; background-color: blue;">R</div>
      <div style="clear: both;"></div>
    </div>
  </div>
  <p>Text down here...</p>
</body>
</html>

echo 2009-10-17 22:52:09

Answer 5

+1 A:

If what you want is rounded corners, this can be a good idea.

HTML:

<div class="box">
  content here
  <div class="topleft corner"></div>
  <div class="topright corner"></div>
  <div class="bottomleft corner"></div>
  <div class="bottomright corner"></div>
</div>

CSS

.box{
padding:50px;
position:relative; /*this allows positioning child elements relative to this one*/
}

.corner{ position:absolute; width:50px;}

.topleft{ top:0; left:0; background-image:url(tlcorner.gif);}
.topright{ top:0; right:0; background-image:url(trcorner.gif);}
.bottomleft{ bottom:0; left:0; background-image:url(blcorner.gif);}
.bottomright{ bottom:0; right:0; background-image:url(brcorner.gif);}

Soska 2009-10-18 07:47:21

Alternatively, use one image with all four corners and use `background-position` to show the right corner.

DisgruntledGoat 2009-10-18 14:16:25

Yes! using sprites will be the correct approach. Adding the extra divs using JavaScript and serve them only to IE, while using border-radius where supported will be even better. But, you know, baby steps.

Soska 2009-10-19 03:47:37

ansaurus

tags:

views:

answers:

Switching from tables to divs with CSS

related questions