CODEWITHSUNDEEP
htmlcsstabular
Eric the Red
Eric the Red

Reputation: 5464

Switching from tables to divs with CSS

I have an HTML table in my page that I'm trying to replace with divs and CSS. Basically, it's a 3x3 table with scalable content in the middle and fixed sized edges and corners with images in the background to give everything a nice drop-shadowed look.

I've read many articles and entries on mixing %'s with pixels, but none of them seem to have just what I'm looking for.

Here's what I have so far:

<html>
<body>
  <p>Text up here...</p>
  <div style="height: 200px; background-color: red; ">
   <div style="width: 80%; height: 100%;">
    <div style="clear: both; height: 100%;">
     <div style="float: left; width: 30px; height: 100%; background-color: green;">L</div>
     <div style="margin-left: 30px; margin-right: 30px; 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: right; width: 30px; height: 100%; background-color: blue;">R</div>
      </div>
     </div>
   </div>
   <p>Text down here...</p>
</body>
</html>

How can I get the blue div up next to the yellow one? I may be completely off base here. I would greatly appreciate any help.

Upvotes: 1

Views: 693

Answers (6)

Jack Wester
Jack Wester

Reputation: 5650

The W3C has several upcoming solutions. The one closest matching your need is currently being implemented in Chrome, Firefox and Internet Explorer (http://dev.w3.org/csswg/css3-grid-layout).

CSS Grid layout

Upvotes: 0

Soska
Soska

Reputation: 699

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);}

Upvotes: 1

echo
echo

Reputation: 7875

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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>

Upvotes: 0

roryf
roryf

Reputation: 30170

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.

Upvotes: 2

Joel
Joel

Reputation: 19368

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>

Upvotes: 2

c_harm
c_harm

Reputation:

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

Upvotes: 1

Related Questions