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...

djkav · 13 Jan 2010 at 13:42

Are you trying to make the Comments and Read More to appear next to each other, ie side by side?

A link to your working FF page would be helpfull to visualise what you mean.

Dup · 13 Jan 2010 at 14:00

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

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.

Tripnologist · 13 Jan 2010 at 14:33

Put them in a container with overflow: hidden (which will clear the float) and then apply the border to the container.

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...

Tripnologist · 13 Jan 2010 at 15:41

It handles the clipping when an elements content is larger than the element itself.
hidden obviously means the content will be hidden.
scroll = scrollbars
visible means that overflow will be visible.

However, someone also figured out that it clears floats.
http://www.quirksmode.org/css/clearing.html

I find I can use it 99% of the time.

djkav · 13 Jan 2010 at 17:32

nicl said:
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, </p> <div class="tabbed"> <h3>x Comments</h3> <div class="read-more"> <h2>Read more...</h2> </div> </div> </div>

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

TBH im surprised no one has picked up on the fact that you want to float the 2 DIVs. But 1 DIV is inside the other. The inner DIV "read-more" should be outside the "tabbed" DIV. You can't float them properly. Its probably IE rendering them correctly and FF is being weird.

It should be:

Code:

<div class="blog-posting">
    <h1>X</h1>
    <h2>January 10th, 2010</h2>
    <p>Lorem ipsum dolor sit amet, </p>
    <div class="tabbed">
        <h3>x Comments</h3>
    </div>
    <div class="read-more">
        <h2>Read more...</h2>
    </div>
</div>

Also, I'd put clear:both; into its own class. You may us it a lot and it seems practical to have its own class reference. Its been a god send for me that way. Just float both DIVs to the left and put a clear after it.