CSS - divs won't sit side by side :(

[kitchenwench]

I'm currently modifying a Wordpress theme that I want to use on my blog, and after 2 days of trying to figure this out, I've finally got everything sitting where I want it to...EXCEPT for this



In the index.php file I have:

<div class="post_date">
<div class="date_post"><?php the_time('j') ?>&nbsp;<?php the_time('M') ?></div>
<div class="year_post"><?php the_time(' Y') ?></div>
</div>	

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>	

<div class="top"><a href="http://del.icio.us/post?url=<?php echo get_permalink() ?>"><img src="<?php bloginfo('template_directory'); ?>/images/delicious.gif" title="del.icio.us this!" alt="del.icio.us" /></a>&nbsp;

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/trackback.gif" title="Trackback" alt="TRACK" /></a>&nbsp;

<a href="#top"><img src="<?php bloginfo('template_directory'); ?>/images/top.gif" border="0" alt="TOP" title="To the top" /></a></div>

<small>By <?php the_author() ?>.  Filed in <?php the_category(', ') ?>.<br /> <?php comments_popup_link('No comments yet. Be the first to comment!', '1 comment filed', '% comments filed'); ?> <?php edit_post_link('Edit.', '', ''); ?></small>

And in style.css:

.post_date {
  	background: url('images/datebg.jpg');
	background-repeat: no-repeat;
	clear:left;
	float:left;
	margin-right:5px;
	position:relative;
	width:42px;
	height:40px;
}

html>body .post_date {
        width: auto;
	width: 42px;
	height: auto;
	height: 40px;
}

.date_post {
	border-bottom:1px dotted;
	clear:left;
	color:#2C4353;
	float:left;
	font-size:12px;
	font-weight:400;
	padding-top:2px;
	text-align:center;
	width:42px;
}
.year_post {
	float: left;
	clear: left;
	width: 42px;
	font-size: 14px;
	color: #2C4353;
	text-align: center;
	padding-bottom:2px;
}

.top {
float: right;
padding-left: 10px;
}

Whilst I'm fairly chuffed that I've managed to get this far by myself (the extent of my mark-up code knowledge comes from a 6-week course on 'introduction to the web' and toying with my blog), I'm losing my mind because of that silly calendar won't align in IE

You can see how its working so far here - www.insanitytheory.net/test

Any and all help would make me indebted to you for life!

(Oh, and I know that all the images don't work on the test site, but I wanted to get the code right before toying with the aesthetics!)

[Fang]

<div class="post_date" style="float:left;">
<div class="date_post"><?php the_time('j') ?>&nbsp;<?php the_time('M') ?></div>
<div class="year_post"><?php the_time(' Y') ?></div>
</div>	

<div class="posthead" style="float:left;">
<h2 style="margin-top:0;"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?></a></h2>	

<div class="top"><a href="http://del.icio.us/post?url=<?php echo get_permalink() ?>"><img src="<?php bloginfo('template_directory'); ?>/images/delicious.gif" title="del.icio.us this!" alt="del.icio.us" /></a>&nbsp;

<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><img src="<?php bloginfo('template_directory'); ?>/images/trackback.gif" title="Trackback" alt="TRACK" /></a>&nbsp;

<a href="#top"><img src="<?php bloginfo('template_directory'); ?>/images/top.gif" border="0" alt="TOP" title="To the top" /></a></div>

<small>By <?php the_author() ?>.  Filed in <?php the_category(', ') ?>.<br /> <?php comments_popup_link('No comments yet. Be the first to comment!', '1 comment filed', '% comments filed'); ?> <?php edit_post_link('Edit.', '', ''); ?></small></div>

[kitchenwench]

I'm so sorry - I tried it out and it made the site go berkers - but that's absolutely no fault of yours! Being the idiot that I am, I posted some code that I was trying when I wrote the post, instead of the code that works (>_<) Thanks for the quick reply, though

I know this stuff takes time, but I've attached the css and php (zipped) files in case anyone is feeling particularly generous with their time and advice

[Fang]

Remove the class="posthead" which was on your live site.

[kitchenwench]

Alas, still no joy...

[dcostalis]

Looks like you got this one solved?

[kitchenwench]

Alas, not yet after spending the better part of a weekend on this ******* date issue, I gave up and tried to resort to using a table to force them to sit in place...

except even the table is giving me grief! They sit side by side, but the date is sitting quite a fair bit up from the post header:



I never thought I'd hate a website so much (>_<) *sobs*

[BarrMan]

You can use a relative positioning to place the date a bit more to the bottom:

PHP Code:

#date_id
{
position:relative;
top:5px; /*Will place it 5 pixels below the starting position.*/
} 


[dcostalis]

<div class="post_date"><p>
<span class="daymonth">16&nbsp;Oct</span>
<span class="year"> 2007</span>
</p></div>		

<h2><a href="http://www.insanitytheory.net/test/?p=92" rel="bookmark" title="Permanent Link to An open letter from my mind to my body">An open letter from my mind to my body</a></h2>
	
<div class="top"><a href="http://del.icio.us/post?url=http://www.insanitytheory.net/test/?p=92"><img src="http://www.insanitytheory.net/test/wp-content/themes/techozoic-edit/images/delicious.gif" title="del.icio.us this!" alt="del.icio.us"></a>&nbsp;

<a href="http://www.insanitytheory.net/test/?p=92" rel="bookmark" title="Permanent Link to An open letter from my mind to my body"><img src="http://www.insanitytheory.net/test/wp-content/themes/techozoic-edit/images/trackback.gif" title="Trackback" alt="TRACK"></a>&nbsp;

<a href="#top"><img src="http://www.insanitytheory.net/test/wp-content/themes/techozoic-edit/images/top.gif" alt="TOP" title="To the top" border="0"></a></div>

I wonder if having an encapsulating div would help you out here. I notice you go from <div> to <h2> to some more divs. it might be a total rewrite of the seciton, but if you make those items a <ul><li> thing sized with ems, and have the encapsulating div a fixed height, you might have better results.

[dcostalis]

Originally Posted by kitchenwench

Alas, not yet after spending the better part of a weekend on this ******* date issue, I gave up and tried to resort to using a table to force them to sit in place...

except even the table is giving me grief! They sit side by side, but the date is sitting quite a fair bit up from the post header:



I never thought I'd hate a website so much (>_<) *sobs*

It looks much better on my screen than your screenshots:

[kitchenwench]

Heh, I think that's because you caught me in the middle of some experimenting...

Having spent almost the entire weekend on just the code (when I wanted to have the entire theme up and running by now), I really didn't want to consider a complete rewrite, mostly because since I only know the bare basics of HTML and CSS, it'll take me forever - BUT, I had a thought awhile ago...that maybe the theme was flawed to begin with, and the floating date div in IE wasn't actually my fault?

Turns out that I was right...

Since I always use Firefox, I'd ONLY viewed the original theme site on FF, and it looks fine there...but when its viewed in IE, it displays the same problem that I've been trying to solve over the past 2 days!

http://clarktech.no-ip.com/blog/



I can't even BEGIN to tell you how stupid I felt, or how much I wanted to kick myself in the head!

So, I'm stuck :/ I've already invested so much time in this theme that I am veeeery reluctanct to start a new one...but at the same time, I wonder if I really have the energy/sanity left to try and rewrite it...

(Hint as to why - I only found out that 'em' existed this weekend, and I'm still not sure how pt/px/%/em all work, except to make my life miserable!)