Floated DIV being pushed down in Firefox

T34 · #1 (**permalink**) Jul 20th, 2007, 10:26

Hello all,

I've got an issue with layout in Firefox. I'm trying to create a two-column liquid layout consisting of a number of thumbnails on the left and a separate bit of content on the right.

I have used float to position the divs left and right. The problem is that in Firefox the left-hand div (the second one to make an appearance in the markup) is pushed beneath the right hand one in virtually all browser widths. If I put the left hand div first in the markup then the right hand one is pushed down.

Annoyingly, IE seems to get what I'm trying to do! Anyway, here is the code:

HTML:

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<link href="default.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="right">
    Some text to appear on the right<br>
    <img src="design1_thumb.jpg"><br>
    <img src="design1_thumb.jpg"><br>
    <img src="design1_thumb.jpg"><br>
</div>

<div id="container">
    <img src="design1_thumb.jpg">
    <img src="design1_thumb.jpg">
    <img src="design1_thumb.jpg">
    <img src="design1_thumb.jpg">
    <img src="design1_thumb.jpg">
    <img src="design1_thumb.jpg">
    <img src="design1_thumb.jpg">
    <img src="design1_thumb.jpg">
    <img src="design1_thumb.jpg">
</div>

<div class="spacer">
</div>

Some more text

</body>
</html>

CSS:

Code: Select all

div.spacer {
    clear: both;
}
#right {
    float: right;
}
#container {
    background-color: #FF3300;
    float:left;
}

And the code in action (vary the width of your browser window in Firefox to see what I mean!):

http://www.theprideofthenorth.com/test3.php

Thanks in advance for any help/advice!

pa007 · #2 (**permalink**) Jul 20th, 2007, 10:53

Try setting widths on both elements using percentages. Use 15% and 85%. Providing there aren't any margins, paddings or borders then they should float along side each other.

See if it works.

Pete.

T34 · #3 (**permalink**) Jul 20th, 2007, 11:06

Thanks for that, Pete, but that won't really do the trick as the right column needs to be fixed width (300px) with the rest of the content expanding to fill the available area.

Anything else that you could suggest?

Cheers,
John

karinne · #4 (**permalink**) Jul 20th, 2007, 11:50

Get a better DOCTYPE ... HTML Strict would be perfect.

Try following this layout - http://bonrouge.com/2c-hf-fluid(r).php

Lchad · #5 (**permalink**) Jul 20th, 2007, 11:57

You need to add widths to everything. All image thumbnails need widths, both div's need widths. You need to add everything up so that you can fit the two side by side.
Right now all your thumbnails are going to line up side by side by side for eternity... therefore the right div is going to fall below. So by setting a width on the container div you are stopping the inlining from going on and on forever.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Firefox vs. IE	tox0tes	Web Page Design	5	Jun 28th, 2007 17:24
ie7 bug - floated div with height 100% causes content to disappear	trandrus	Web Page Design	5	Jun 19th, 2007 22:13
Floated Divs dont expand centered div in firefox	mikka23	Web Page Design	7	Jan 1st, 2007 01:17
extending background block beyond floated image	snappy	Web Page Design	18	Oct 27th, 2006 21:26
vertical-align problems with inline elem. and floated elem.	gogogadgetearl	Web Page Design	2	Jun 3rd, 2005 18:55

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Floated DIV being pushed down in Firefox