[thelist] CSS - side by side display with alignment but without tables?
angello
angello at post.cz
Tue Oct 21 05:35:24 CDT 2003
you need to add some code
<div class="spacer">
</div>
behind your floating divs
div.spacer {
clear:both;
}
if you don't do this then the floating object is excluded from the block
and because you do have only two floating block - then there is no
content, so the block "blogghead" is collapsed to a single line.
or you can specify height of "blogghead" block.
angello
Megalion wrote:
>
> 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