[thelist] CSS - side by side display with alignment but without tables?

Megalion webdev at megalion.org
Tue Oct 21 05:25:25 CDT 2003


Here's how I would do it in tables:
<table border="0" cellspacing="0" cellpadding="0" width="100%">
	<tr>
		<td>Title</td>
		<td align="right">Date</td>
	</tr>
</table>

Here's the html markup I have in place:
<div id="individual">
	<!-- a bunch of stuff -->
	<div class="bloghead">
		<div class="postTitle">Oopsies</div>
		<div class="postDate">October 14, 2003</div>
	</div>
	<!-- a bunch of stuff -->
</div>

Here's the CSS (my current version)
#individual { /* equivalent of bodyContent but for individual pages */
	margin: 0px;
	padding: 0px;
}
.bloghead { /* Only blog element that isn't in "blogpost", used for Dates */
	position: relative;
	background:url(http://ponder.megalion.org/mt/skins/venturaSunset/linksBg.jpg);
	width: 720px;
	left: 65px;
}
.bloghead .postTitle { /* used on Individual pages only */
  	float: left;
  }
.bloghead .postDate { /* used on Individual pages only */
  	float: right;
}

What I've been beating my head on the wall over is trying to get the 
postDate div to align itself to the right while keeping postTitle on the 
left... floats take care of that... BUT I want the background  of the 
containing bar that is bloghead to be an image.

In NS 7.1 (WinXp), the image won't load. It does display in IE 6 as I want 
it though.

Am I missing something simple? I know that if I move the background image 
to both of the subclasses, it only fills in behind the words themselves and 
not across the entire bar.

Thanks,
Megalion


More information about the thelist mailing list