Need a bit of help with content layout in CSS...

**blueocto** · 09-02-2009 09:55 PM

Hey guys,

I'm building a site for my sister, and I have a blog-esque thing going on, where there will be a date stamp for each story [see attachment].

How the heck do I get them to appear as they do, in-line with the first sentance, as I've designed?

My current layout is like [attachment 2] at the moment.

Any thoughts?

**bartoszdesign** · 09-02-2009 10:08 PM

there is for sure a clean way, but i would just do it the easy way:

HTML Code:

<div id="content">
  <div id="date">
    <div class="spacer">
    </div>
    <div class="date-logo">
      date
    </div>
  </div>
  <div id="content">
    <div class="spacer">
      <h2>title</h2>
    </div>
    <p>content</p>
  </div>
  <div class="clear"> </div>
</div>

the spacers will make sure it will be on the same height.

edit: damn, what do i have to do to display html in here?

**ranchero80** · 09-02-2009 10:22 PM

Create an author span class style with an align right. Make sure your H1 Tag is align left clear right.

HTML Code:

<style type="text/css">
<!--
.Author {
    font-size: 10px;
    font-style: italic;
    margin: 0px;
    padding: 0px;
    float: right;
    line-height: 15px;
}
h1 {
    margin: 0px;
    padding: 0px;
    clear: right;
    float: left;
    font-size: 15px;
}
-->
</style>
</head>

<body>
<h1>Heading</h1>
<span class ="Author">Author: Judy</span>

</body>

**ranchero80** · 12-02-2009 01:41 AM

How did you go blueocto?

**blueocto** · 12-02-2009 08:57 AM

It wasn't the "Heading .... Author" bit I was stuck on... it was trying to get the date, to line up with each post that is created, automatically.
I don't know if that makes sense...?

**iandevlin** · 12-02-2009 09:13 AM

You mean have the top of the date "circle" aligned with the top of the text in the post content?

What code do you have for that div?

**Harry** · 12-02-2009 09:39 AM

Put the date in the content div and use position:absolute; and left:-whateverpx; to pull it out of the way but in the right place. I have done something similar with the light grey notes in the margin on this page: Web Design+ — Tips and advice on web standards development

**Scriptage** · 12-02-2009 02:42 PM

I stumbled on this the other day: Typogridphy — A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS Wizardry it might be useful.

**Harry** · 12-02-2009 02:44 PM

Haha, are you implying I just gave myself a little plug there Carl?

It does achieve the same thing though cos I had the same issues as Caroline is having now.

**Scriptage** · 12-02-2009 02:56 PM

Haha no, I'm just shamelessly pluggin you at every opportunity because I have nothing better to do.

Thread: Need a bit of help with content layout in CSS...

LinkBack

Thread Tools

Display

Need a bit of help with content layout in CSS...

Similar Threads

Content Management Help

How much stolen content?

Using Other People's Content is OK!

drop down content

Site Content

Bookmarks

Bookmarks

Posting Permissions