need help from a CSS wiz - create a table "look" without using a table

Question

I'm trying to create a page which looks somewhat like this:

http://www.drmichaelbogdan.com/plastic-surgery/

(I'm referring to the "Find Out More About Our Featured Procedures:" table with alternating colors).

I prefer to refrain from using tables, since from what I understand, it is much wiser to use "pure" css.

Alas, I my CSS skills are somewhat lacking.

Is there anyone out there which can help me create this look in CSS?

my HTML "structure" looks like this:

<div id="latestArticlesWrapper">
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
</div>

If needed, and if you think that it'll help, I can change the tags from "div" to anything you say, as long as it "helps the cause" :-) (perhaps for the odd/even requirement - the divs are created in a loop...)

Obviously, it should look good on all major browsers (Firefox, Chrome and IE for that matter).

Well, as usual - IE is giving me problems. It looks great on Firefox, it really does, but on IE - it gets messed up

I did change the html and CSS a bit, here is what I am using now:

HTML:

<div id="latestArticlesWrapper">
       <div class = "<%= (oddEven = !oddEven) ? "newArticle white" : "newArticle yellow"%>"> 
             <div class = "newArticleImage">
             </div>
             <div class="newArticleData">
                <span class="newArticleTitle"></span>
                <span class="newArticleDate"></span>
                <span class="newArticleContent"></span>
                <span class="newArticleLink"></span>

             </div>
       </div>
</div>

CSS:

#latestArticlesWrapper {
    width:100%;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:justify;
}

.newArticle {
    height:146px;
}

.yellow {
    background:#F2E4C2; 
}
.white 
{
    background:#fff;
}

.newArticleImage {
    width:96px;
    height:96px;
    margin-right:20px;
    margin-top:10px;
    float:right;
}

.newArticleData {
    margin-right:20px;
    margin-top:10px;
    float:right;
    width:404px;
}

.newArticleData h3 {
    padding:0;
    margin:0;
    margin-bottom:3px;
}

.newArticleTitle 
{
    float: right;
}

.newArticleDate
{
    float: left;
    padding-left: 5px;
    padding-right:20px;
    background:url(../images/icons/date.png) right no-repeat;
}

.newArticleContent
{
    float: right;
}

.newArticleLink
{
    float: left;
}

So.... How do I make IE happy? :-P

looks like you're after a semantic list. Unless your data is actually tabular. If you've got tabular data, don't be afraid to use a table. That's what it's there for. — zzzzBov
– zzzzBov, Commented Dec 4, 2010 at 16:54

Joel Etherton · Accepted Answer · 2010-12-04 16:48:13Z

2

You've got the html part correct so far. You just need to add some float elements:

div.latestArticlesWrapper
{
    width: #px; /* static width */
}

div.newArticle, div.newArticleAlt
{
    float: left;
    width: #px;  /* should be the width of the entire area to force the float to wrap */
}

div.newArticle
{
    background-color: #ffffff;
}

div.newArticleAlt
{
    background-color: #eeeeee;
    /* alternate row color, use conditional to separate */
}

div.newArticleImage
{
    float: left;
    width: #px;
    padding: #px; /* width + padding = total width */
}

div.newArticleData
{
    float: left;
    width: #px;
    /* don't put padding here for text. use the <p> tag or another <div> */
}

Because you asked for a site like the one referenced (which is a static width), I've put style in here for static widths. If you have a dynamic width site, you'll have to work the widths in a different way.

edited Dec 4, 2010 at 16:48

answered Dec 4, 2010 at 16:41

Joel Etherton

37.5k10 gold badges92 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Teman Over a year ago

I forgot to mention originally, my content is created using a loop. How do I attain the alternating colors? Does odd/even work for divs?

Joel Etherton Over a year ago

@Tom Teman - use 2 different styles newArticle and newArticleAlt, then in your loop code, switch the style on the newArticle div depending on your conditional.

Tom Teman Over a year ago

thanks! went with Sotiris's solution, since it had all the CSS I need, so sorry for not setting yours :-P As for the loop code, if anyone is interested, I'm using ASP.NET MVC, and I found this little gem for creating an alternating odd/even class: west-wind.com/weblog/posts/877595.aspx

Sotiris · Accepted Answer · 2010-12-04 17:03:34Z

here my try: http://jsbin.com/umeno3

html

<div id="latestArticlesWrapper">
       <div class = "newArticle yellow"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
      <div class = "newArticle white"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
       <div class = "newArticle yellow"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
       <div class = "newArticle white"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
       <div class = "newArticle yellow"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
</div>

css

#latestArticlesWrapper {
    width:560px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:justify;
}

.newArticle {
    height:116px;
}

.yellow {
    background:#F2E4C2; 
}
.white {
    background:#fff;
     }
.newArticleImage {
    width:96px;
    height:96px;
    margin-left:20px;
    margin-top:10px;
    float:left;
}

.newArticleData {
    margin-left:20px;
    margin-top:10px;
    float:left;
    width:404px;
}

h3 {
    padding:0;
    margin:0;
    margin-bottom:3px;
}

to change row's bakcground color, you just change the class near newArticle class

PS: For tabular data as your example I advice you to use table, it's more semantic, then you can style it through css. But if you still want do it with divs, then you can follow the above solution.

David Thomas · Accepted Answer · 2010-12-04 17:20:04Z

1

Can I suggest using a slightly different html structure? I'd suggest the following, given the content itself:

<div id="latestArticlesWrapper">
    <dl>
        <dt>Rhinoplasty (nose job)</dt>
        <dd><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.</dd>
        <dt>Breast enlargement</dt>
        <dd><img src="http://www.drmichaelbogdan.com/images/featured-breast-augmentation.jpg" />With more choices than ever before, breast augmentation is an excellent option for women who are unsatisfied with the size of their breasts, and would like to create a more voluptuous silhouette.</dd>
        <dt>Mommy makeover</dt>
        <dd><img src="http://www.drmichaelbogdan.com/images/featured-mommy-makeover.jpg" />After having children, many mothers desire a Mommy Makeover to regain their pre-baby body. A Mommy Makeover can return a youthful appearance to your breasts and tummy.</dd>
    </dl>
</div>

With the css:

dt, dd {
    position: relative;
    padding: 0 0 0 110px;
}
dd img {
    position: absolute;
    top: -1em;
    left: 0.2em;
}
dt {
    font-weight: bold;
}
dd {
    margin: 0 0 1em 0;
}

JS Fiddle demo.

I'll note that there's nothing intrinsically wrong with the html you posted, it's just that the above has the advantage of being simpler, with fewer elements to worry about, and takes advantage of the semantics of the dl (definition list) element, and an easier intro from W3schools.

answered Dec 4, 2010 at 17:20

David Thomas

254k53 gold badges382 silver badges421 bronze badges

1 Comment

David Thomas Over a year ago

I don't know about 'better', they should both work fine with IE (assuming a valid doctype is used), but a simpler approach that reduces the amount of written code (albeit by only a few bytes) and increases the semantics seems a worthwhile trade.

robnardo · Accepted Answer · 2010-12-04 17:14:57Z

Save this to a file and open in a browser...

<!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" xml:lang="en" lang="en">
<head>
    <title>Latest Articles Example</title>
    <style>
        #latestArticlesWrapper { font-family:arial,sans-serif; width:560px; }
        #latestArticlesWrapper .odd { background-color:#F2E4C2; }
        #latestArticlesWrapper .even { background-color:#FFFFFF; }
        .newArticleImage { text-align:center; margin:10px 0 10px 0; float:left; display:inline; width:140px; }
        .newArticleData { float:left; display:inline; width:410px; padding:0 10px 0 0;}
        .newArticleData h4 { font-size:14px; margin:10px 0 0 0;}
        .newArticleData p { font-size:0.8125em;  margin:5px 0 0 0; line-height:1.5em; }
    </style>

    <!-- The following styles are from http://www.positioniseverything.net/easyclearing.html -->
    <style type="text/css">
        .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
        .clearfix {display: inline-block;}  /* for IE/Mac */
    </style>
    <!--[if IE]>
    <style type="text/css">
        .clearfix { zoom: 1; display: block; }
    </style>
    <![endif]-->
</head>
<body>

<div id="latestArticlesWrapper">
    <div class="newArticle odd clearfix"> 
        <div class="newArticleImage">
            <img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" alt="">
        </div>
        <div class="newArticleData">
            <h4>Rhinoplasty (Nose Job)</h4>
            <p>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.</p>
        </div>
    </div>
    <div class="newArticle even clearfix"> 
        <div class="newArticleImage">
            <img src="http://www.drmichaelbogdan.com/images/featured-breast-augmentation.jpg" alt="">
        </div>
        <div class="newArticleData">
            <h4>Breast Enlargement</h4>
            <p>With more choices than ever before, breast augmentation is an excellent option for women who are unsatisfied with the size of their breasts, and would like to create a more voluptuous silhouette.</p>
        </div>
    </div>
    <div class="newArticle odd clearfix"> 
        <div class="newArticleImage">
            <img src="http://www.drmichaelbogdan.com/images/featured-mommy-makeover.jpg" alt="">
        </div>
        <div class="newArticleData">
            <h4>Mommy Makeover</h4>
            <p>After having children, many mothers desire a Mommy Makeover to regain their pre-baby body. A Mommy Makeover can return a youthful appearance to your breasts and tummy.</p>
        </div>
    </div>
</div>

</body>
</html>

looks like i was too late!

Collectives™ on Stack Overflow

need help from a CSS wiz - create a table "look" without using a table

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related