Support NeoGAF

CharlieDigital · Jul 17, 2009

I think, for the first time, FF is doing something wrong that IE is doing right.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title> new document </title>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<style type="text/css">
			#container {
				width: 400px;
				height: 600px;
				border: 1px solid #000;
				position: relative;
			}

			#right {
				float: right;
				width: 200px;
				height: 300px;
				border: 1px solid red;
			}

			#left {
				/*--- this breaks in FF... ---*/
				float: left;
				font-size: 10px;
				border-bottom: 1px solid #000;
			}
		</style>
	</head>

	<body>
		<div id="container">
			<div id="right">

			</div>
			<div id="left">
				<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget sem augue, non pellentesque nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin iaculis quam et velit facilisis vel iaculis odio viverra. Ut in lectus eu erat placerat sodales. Suspendisse potenti. Maecenas a mauris vitae est bibendum tristique. Nulla facilisi. Curabitur blandit metus id lacus gravida a pretium felis ullamcorper. Ut adipiscing ligula et nunc imperdiet suscipit. Nullam euismod sem vulputate enim ornare non porta urna tempor. Nam vulputate, nisi tristique tempor pretium, nunc ipsum malesuada purus, quis mollis urna arcu a augue. Nulla. 				
				</span>
			</div>
		</div>
	</body>
</html>

In IE and FF, "#right" floats to the right correctly.

In IE, "#left" floats to the left correctly. More importantly, it takes up the right amount of space and the text wraps under the right (if it's long enough).

In FF, "#left" tries to take up the full width of the "#container" and goes under #right. What gives?

Question one is probably "Why are you floating #left? It seems to behave correctly in IE and FF if you don't float #left". Well, that's true, BUT notice that the border spans the entire #container if you remove the float.

So CSS-GAF, help a brotha out here. The gist of it is that I'd like the content on the right to take up the remaining space and it should have a bottom border that spans only the available space.

reilo · Jul 17, 2009

You need to define a width on #left, otherwise it will fill up the available space at 100% and it's then overflowing.

If #container is 500px, #left is 300px, then #right has to be less than or equal to 200px to fit correctly.

#left.width + #right.width <= #container.width

Also, you can set #right to float: left, and it will line up with #left correctly. You should use float: right when you actually want to float right. If you want two divs to float next to each other, then you need to set them both to be float: left.

Also, make sure that you clear any floats after you've set them.

CharlieDigital · Jul 17, 2009

That's the thing: I don't want it to have a fixed width -- the width of #left should change with the size of the container (in this example, it's fixed, but in the actual page, it's not).

I don't actually want them to float next to each other per se; I want #right to say on the right (a small info panel) and the text contents of #left to fill the space and wrap under if the text is long. If you open it in IE7 or IE8, you'll see the desired behavior: #right fills up its width and #left is correctly sized automatically to fill the remaining space.

Floating them both left is incorrect in both IE and FF as it forces #right under #left (if I reorient them in page order properly).

Let's put it another way: given that #container is not fixed width and #right is supposed to be fixed width, what type of CSS+markup will cause #left to fill the space but not have the bottom border span the entire container? (if you remove the float:left on #left in the CSS+markup above, it behaves correctly in both IE and FF but the line spans the entire container).

I guess I could just give #right a solid background, but then the border meets up funny with the left edge of #right...maybe double wrap it and give the outer wrapper a 4px white border to simulate proper padding...

Liu Kang Baking A Pie · Jul 17, 2009

It sounds like you want #right to be floating right within #left, not having both floating apart from each other.

IE is definitely doing it wrong.

Why don't you want #left's border to be all the way across with how long #left really is?

CharlieDigital · Jul 17, 2009

Liu Kang Baking A Pie said:
It sounds like you want #right to be floating right within #left, not having both floating apart from each other.

IE is definitely doing it wrong.

That markup would be structurally incorrect in this case.

The container is holding several messages. Each message is contained in a <div> (#left) while there is a panel with metadata that is supposed to be in the #container, but not contained inside of a specific message div.

It would work, no doubt, but it would mean that the metadata panel would be contained inside of a div for a message...that seems structurally incorrect not to mention the incorrect behavior of subsequent message divs.

Liu Kang Baking A Pie said:
Why don't you want #left's border to be all the way across with how long #left really is?

Cuz it's urgly like that...

This gets the desired effect but it seems like hackery (I let the border go all the ways across, but hide it with a fat left border on the #right):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title> new document </title>
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<style type="text/css">
			#container {
				width: 400px;
				height: 600px;
				border: 1px solid #000;
				position: relative;
			}

			#right {
				float: right;
				border-left: 10px solid #fff;
			}

			#inner {
				width: 200px;
				background: #fff;
				height: 300px;
				border: 1px solid red;
			}

			#left {
				margin: 10px;
				/*--- this breaks in FF... ---*/
				font-size: 10px;
				border-bottom: 1px solid #000;
			}

		</style>
	</head>

	<body>
		<div id="container">
				<div id="right">
					<div id="inner">

					</div>
				</div>
				<div id="left">
					<span>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget sem augue, non pellentesque nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin iaculis quam et velit facilisis vel iaculis odio viverra. Ut in lectus eu erat placerat sodales. Suspendisse potenti. Maecenas a mauris vitae est bibendum tristique. Nulla facilisi. Curabitur blandit metus id lacus gravida a pretium felis ullamcorper. Ut adipiscing ligula et nunc imperdiet suscipit. Nullam euismod sem vulputate enim ornare non porta urna tempor. Nam vulputate, nisi tristique tempor pretium, nunc ipsum malesuada purus, quis mollis urna arcu a augue. Nulla. 				
					</span>
				</div>

		</div>
	</body>
</html>

CharlieDigital · Jul 17, 2009

Thanks for the help guys. I think I'm going to just stick with the hackery; I don't hate it enough to spend more time on it

(but if you do come up with a more elegant solution, I'd love to see it).

Liu Kang Baking A Pie · Jul 17, 2009

Nah, that's not hacky. It seems a good solution, but is it okay if #left's content is too long and the border goes all the way across again?

reilo · Jul 17, 2009

Ah, I see, I misunderstood what you were trying to accomplish. That solution with #inner you came up with is as good as any, and I would not consider it hackery, but rather smart.

cosmod · Jul 17, 2009

Code:

#container {
	width: 400px;
	height: 600px;
	border: 1px solid #000;
	position: relative;
}

#right {
	float: right;
	width: 200px;
	height: 300px;
	border: 1px solid red;
}/*200px width + 2px border(left and right) = 202px*/

#left {
	width:398px;
	float: left;
	font-size: 10px;
	border-bottom: 1px solid #000;
}/*398px + 202px = 600px*/

http://css-tricks.com/the-css-box-model/
Is that what you had in mind? I wasn't sure what you meant by bottom border taking up the remaining space.

CharlieDigital · Jul 17, 2009

cosmod said:
http://css-tricks.com/the-css-box-model/
Is that what you had in mind? I wasn't sure what you meant by bottom border taking up the remaining space.

Close, but fixed widths on anything except the #right is undesirable as in the actual layout, the container is not fixed (and I don't want to write the resize script to force it).

Liu Kang Baking A Pie said:
... is it okay if #left's content is too long and the border goes all the way across again?

Not okay for the border to go across the whole thing...it should cut off at the start of #right (as it does properly in IE when I float #left). To account for the fact that I don't want the silly line under #right, I used the simple fix I posted...which does the same thing, but would have been cleaner with one less (otherwise uselss) container.

Support NeoGAF

CSS GAF, help a brotha out (floats in FF).

CharlieDigital

Banned

reilo

learning some important life lessons from magical Negroes

CharlieDigital

Banned

Liu Kang Baking A Pie

Member

CharlieDigital

Banned

CharlieDigital

Banned

Liu Kang Baking A Pie

Member

reilo

learning some important life lessons from magical Negroes

cosmod

Neo Member

CharlieDigital

Banned

Similar threads