css issue with ie - divs not horizontally aligning!

nicl · 13 Jan 2010 at 13:15

Hi,

am pretty inexperienced with css (and web stuff generally) and have been trying to align some divs in css. It works fine in FF but IE doesn't like it. I am trying to align the 'comments' and 'read more' bits horizontally...

Here is the html:

Code:

<div class="blog-posting">
			<h1>X</h1>
			<h2>January 10th, 2010</h2>
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
			<div class="tabbed">
				<h3>x Comments</h3>
			<div class="read-more">
				<h2>Read more...</h2>
			</div>
			</div>
		</div>

and the css:

Code:

.blog-posting {
	width: 440px;
	margin: 0 0 20px;
	border: 1px solid #ccc;
	}

.tabbed {
	clear: both;
	border: 1px solid #ccc;
	}

.comments {
	display: inline;
	}
	
.read-more {
	float: right;
	text-align: right;
	display: inline;
	}

Any help appreciated! Am sure it is something simple...

nicl · 13 Jan 2010 at 14:12

Hi, thanks for the reply.

I am trying to make the comments appear in the left hand side of the div and the read more appear on the right had side, so horizontally aligned but left and right aligned respectively. Like so:

xxxxxxxxxxxxxx<div width>xxxxxxxxxxxxxxxxxxxxx
Comments Read more

I'm only hosting it locally at the moment. But, here are screen shots of the different outputs in IE and FF

nicl · 13 Jan 2010 at 14:13

Dup said:
Float both tabs to the left and make sure they have a width set.

Will try this now! Thanks.

nicl · 13 Jan 2010 at 14:31

Have solved it by floating left and right respectively and using auto width for the left one and a specified width for the 'read more...'. Seems to work fine on both, although IE and FF still display the borders slightly differently!

Thanks for the help all.

nicl · 13 Jan 2010 at 15:02

works a charm. Thanks - I will look up overflow: hidden to get a better grip of what it does...