Floating 3 images, 2 left, 1 right?

[Jamie9]

I've not really done much website bits so I might just be making an easy mistake but anyway I'm trying to float as a banner/logo 2 images to the left, 1 image to the right. I've got it working fine... in IE/Opera, but for some reason firefox puts a space under the 1st image, the weird colours are just to make it clear what I mean:

Layout (excl the pointless bits that you know already, doctype (xhtml 1.1) etc.) :

<div id="wrapper">
	<div id="TopLeftBanner">
		<img src="images/1.jpg" alt="Image 1" /><br />
		<img src="images/2.jpg" alt="Image 2" />
	</div>

	<div id="TopRightBanner">
		<img src="images/banners/1.jpg" alt="Banner Image" />
	</div>
</div>

Stylesheet:

* {
	margin: 0;
	padding: 0;
}

body {
   background:rgb(50,50,0);
	font-size: 12px;
	font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	color: white;
}

#wrapper {
	display: block;
	margin: 0 auto;
	width: 778px;
	position: relative;
}

#TopLeftBanner {
	float: left;
}

#TopRightBanner {
	float: left;
}

Any ideas? Am I doing something completely wrong? I'd appreciate any help and/or any *good* websites/books that you learnt from if possible.

Thanks!

[gigapixels Veteran]

It's probably that <br> element. Perhaps add this:

#TopLeftBanner br {
	height: 0;
}

Try that first. It's just off the top of my head, but it's worth a try.

[Jamie9]

Same thing happens unfortunately, thanks for the suggestion though.

[raskren]

Same thing happens unfortunately, thanks for the suggestion though.

Adding sizing to a line break isn't valid CSS.

Since <img> is an inline element, you should be setting:

#TopLeftBanner img {
	display:block;
	}

That way you don't have to insert a break into your markup.

You also have display:block; on a DIV element which doesn't make sense in this context as divisions are already block level elements.

I would recommend you specify height and width for all your images in your markup.

If that doesn't accomplish anything, give the TopLeftBanner div a height value.

If that doesn't accomplish anything use absolute or relative positioning to set the images where you want them.

[gigapixels Veteran]

Adding sizing to a line break isn't valid CSS.

Since <img> is an inline element, you should be setting:

#TopLeftBanner img {
	display:block;
	}

That way you don't have to insert a break into your markup.

You also have display:block; on a DIV element which doesn't make sense in this context as divisions are already block level elements.

I would recommend you specify height and width for all your images in your markup.

If that doesn't accomplish anything, give the TopLeftBanner div a height value.

If that doesn't accomplish anything use absolute or relative positioning to set the images where you want them.

Oh, duh, sorry, I'm a bit tired right now and completely forgot about the line break thing.

The display: block; thing should work.

[Jamie9]

Thanks! Removing the <br /> and using display: block; on the image tag worked perfectly.

[raskren]

Just curious, why are you using XHTML 1.1?

[Jamie9]

Not any particular reason, why? What would you recommend using, 1.0 strict (or transitional)? I just used it because I don't know of a reason not to.

----

By the way, I have another problem if you could help that would be great, I didn't want to create a new topic straight after this one. I'm trying to make the content/information area of the site like...

I've tried so many different ways I've lost count, some work in Firefox/Opera and not in IE so that's no good. Is there an easy way to do something like that (probably is)? I can position it ok but not get the "sub-content" to stretch to bottom of the non-fixed/non-known height of "content"

[raskren]

Not any particular reason, why? What would you recommend using, 1.0 strict (or transitional)? I just used it because I don't know of a reason not to.

----

By the way, I have another problem if you could help that would be great, I didn't want to create a new topic straight after this one. I'm trying to make the content/information area of the site like...

I've tried so many different ways I've lost count, some work in Firefox/Opera and not in IE so that's no good. Is there an easy way to do something like that (probably is)? I can position it ok but not get the "sub-content" to stretch to bottom of the non-fixed/non-known height of "content"

Good on your for not resorting to HTML tables!

If you're serving your webpages as the text/html MIME type you should be using HTML or XHTML 1.0.

There are a couple ways to take care of your columns.

#1 Faux Columns

#2 Use JavaScript to calculate the height of your tallest column, do some math, and size another column appropriately.

[gigapixels Veteran]

I would definitely recommend the Faux Columns trick. That's the first thing that popped into my mind when you described your latest issue. Check out the article, and if you have any questions come back here.

[Jamie9]

Thanks! I didn't seem to be able to get the Faux Columns working how I wanted (the layout is pretty picture/background based already) so it didn't seem to want to work.

I did put together some javascript as-per suggestion #2 which worked perfectly though, I really would have preferred not to resort to using javascript but nevermind it works for now.

Thanks again!

[primexx]

If you're serving your webpages as the text/html MIME type you should be using HTML or XHTML 1.0.

technically XHTML 1.1 is still valid with text/html, although the application/xhtml+xml type is strongly recommended, its not mandatory until XHTML 2.0.