Table-less divs alignment problem

[tedleonard]

Hello all,

I'm a bit of a novice when it comes to CSS. I'm using a canned template and modifying it to add a row-based list of events, hopefully without resorting to using a table. I drew a rudimentary mockup of what I'm trying to accomplish:

http://www.jerseyraces.com/race_calendar.jpg

I apologize, my photoshop skills are almost as atrocious as my css skills.

Here's the code I'm working with:

<div class="event">
<img src="#" class="event_img" height="50" width="50" />
<p class="event_title">Lorem Ipsum</p>
<p class="event_date">May 1, 2011</p>
	                
 </div>
                
<div class="hr2">
<hr />
</div>

.event {
	width:auto;
	float:left;
	clear:right;
}
.event_img { margin-left:5 px; float:left; height:50px; width: 50px; }

.event_title{
	float:left;
}
.event_date{
	float:right;
}

I've tried a whole bunch of different tweeks but no luck. I'm totally lost, can someone give me a hand?

Here's the URL of the page I'm working on: JerseyRaces.com - Jersey Loves Competition

Thanks so much in advance for any help you could provide.

[tedleonard]

Made some progress, but would still appreciate some clarification as to the 'proper' way to do this, thanks!

[dresden_phoenix]

There are much better ways of doing this. , for starters you do not need to put the HR in a div, better yet you dont need the div at all!

.event {overflow:hidden; padding-bottom:20px; background:url(yourRuleImage.jpg) bottom center no-repeat #ccc; margin-bottom:1em;}
.event p.info {padding:5px  ; overflow:hidden; margin:0;}
.event p { padding:0 0  0 60px;margin:0 0 1em 0; }
div.info  {overflow:hidden; padding:5px 5px 20px 5px; background:url(yourRuleImage.jpg) bottom center no-repeat #ccc; margin-bottom: 0 0 1em 0;}

.event img { margin:0 10px 0 0 ; float:left; height:50px; width: 50px; }
.event .date{ float:right}
.event .title{ float:left;}
.event .title span{ display:block;}


<div class="event">
<p class="info"><img src="#" class="event_img" height="50" width="50" /><span class="title">Lorem Ipsum <span> evnet location</span></span> <span class="date">May 1, 2011</span></p>
<p> if you intend to add additional info it could easily go here under serparate and unclassified P tags, if not , you could simplify the whole code as shown bellow...</p>
<p> incidentally, consider using STRONG  instead of span  to add semantic weight to the title and location, that is unless the date is more important then use strong  as the tag instead of span for class date</p>
</div>


<div class="event info"><img src="#" class="event_img" height="50" width="50" /><span class="title">Lorem Ipsum <span> evnet location</span></span> <span class="date">May 1, 2011</span></div>

you will need to create a an image (yourRuleImage.jpg or whatever ) to serve as your divider....

anyway.. I hope that helps

[Rayzur]

but would still appreciate some clarification as to the 'proper' way to do this, thanks!

Hi,

There was a Recent Thread that had a similar topic which was setting up a series of "Article Summaries" that stacked upon one another. The thread got pretty involved as we discussed the various ways to approach the markup while keeping it semantically correct. As well we discussed the importance of keeping block level elements separated from inline elements.

I see a lot of similarity here with what you are doing, you are basically setting up a series of "Event Summaries" and I believe the code I ended being content with there would be suitable here too.

Here is what I had done there:
Article Summaries

Of course yours needs a slight tweak to get the date on the right side with a float. I would nest the date in a span and float it right, then I would nest the span and the image in a div since they are inline elements. From there it is straightforward with an H3 (or whatever level is appropriate) for the heading and a <p> tag for the other text.

Something like this, that keeps you from having to use several classes while using appropriate elements. You can also set your HR image as the BG image on the .event div

Hope you find it useful

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>
 
<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 100%/1.2 arial, helvetica, sans-serif;
    background: #FFF;
}
#wrap {
    width: 760px;
    margin: 0 auto;
    padding: 40px 0;
    background: #222;
}
.event {
    width: 680px;
    margin: 0 auto;
    padding:0 0 20px 0;
    background: #333 url([url]http://www.jerseyraces.com/images/homepage16.gif[/url]) repeat-x 0 100%;
    color:#FFF;
    overflow:hidden; /*contain floats*/
}
.event img {
    float: left;
    width: 50px;
    height: 50px;
    margin: 10px;
}
.event span {
    float: right;
    padding:10px;
}
.event h3 {
    font: bold 1.2em/1.2 arial;
    margin: 15px 0 0;
}
.event p {
    margin: 5px 0;
    overflow:hidden;
}
</style>
 
</head>
<body>
 
<div id="wrap">
    <div class="event">
        <div>
            <img src="http://www.jerseyraces.com/images/runner1.jpg" alt="Event image" width="50" height="50">
            <span>May 1, 2011</span>
        </div>
        <h3>Event Title</h3>
        <p>Jersey City, NJ</p>                
    </div>
    <div class="event">
        <div>
            <img src="http://www.jerseyraces.com/images/runner1.jpg" alt="Event image" width="50" height="50">
            <span>May 1, 2011</span>
        </div>
        <h3>Event Title</h3>
        <p>Jersey City, NJ</p>                
    </div>                
</div>
 
</body>
</html>

[tedleonard]

Thank you both so much for the info!! I've been working on this for hours ripping my hair out! What you both showed makes total sense, but I find that when I'm starting something from scratch it's hard to figure out the proper way to get started. I'm actually signing up for Sitepoint's css class to try to get a better grasp but I gather that will take a while.

The info is greatly appreciated. Thank you!!

[tedleonard]

BTW the way I had those HR tags in there was how templatemonster had structured it, I just copied and pasted it from a different template page. I'm sure their coding isn't the greatest

[deathshadow60]

I hate to say it, but that REALLY starts to look like tabular data to me... making these not table tags semantically incorrect. Clearly defined columns with related rows...

that said I'm seeing WAY too many tags beign thrown at this...

<div class="event">
	<img
		src="http://www.jerseyraces.com/images/runner1.jpg"
		alt="Event image"
	/>
  <h3>
  	<span>Event Title</span>
  	May 1, 2011
  </h3>
  <p>Text Describing Event</p>                
</div>

I tend to like to threat the date as part of the heading, but that's me. Float the span, text-align:right the h3. Tends to look better when CSS is disabled.

But again, I smell tabular data. it's not "don't ever use tables" it's "don't use tables around non-tabular data"... I mean, it even has an element (the month/year) suitable for a CAPTION tag.