PDA

Click to See Complete Forum and Search --> : Floating DIVs

tbirnseth
04-20-2007, 02:49 PM
I'm having trouble between IE and FF. For once, IE behaves as I would expect, but FF doesn't.

Basically I have a container with two floating DIVs in it. One floats left and the other right. I then have a table which should fill between the two floating DIVs if there is space. If there's not space, it should push down and display as a separately centered table. IE (7) behaves as I would expect, but FF seems to overlay the right side of the table into the right-floated DIV causing garbled text.

Any insights would be greatly appreciated. Html follows.

thanks in advance,
tony


<!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>Test Div</title>
<style type="text/css">
#divPage div, #divPage p {
margin: 5px;
}
.fullPage {
width:98%;
/* z-index:0; */
margin: 5px 5px 5px 5px;
padding: 1px 1px 1px 1px;
border: 1px solid black;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10pt;
}
.alignRight {
text-align:right;
font-weight:bold;
}
.alignCenter {
text-align:center;
}
.alignLeft {
text-align:left;
font-weight: normal;
margin: 5px 5px 5px 20px;
}
div.clear {
clear: both;
height: 1px;
margin: 0;
padding: 0;
line-height: 1px;
font-size:1px;
}
.divOrderDetail {
text-align:center;
width:98%;
margin: 5px;
padding: 5px;
border: 1px solid #FFCC00;
color:#990000;
}
.orderDetail th {
background-color:#F4F2F3;
font-size:larger;
font-weight:bold;
color:#990000;
}
.divOrderDetail table, .orderDetail table {
margin-bottom:0;
padding-bottom:0;
margin-left:auto;
margin-right:auto;
border:0;
font-size: 8pt;
}
.orderDetail {
font-size:8pt;
}
.orderDetail td.alignLeft, .orderDetail td.alignCenter, .orderDetail td.alignRightNoBold {
color:blue;
}
.alignRightNoBold {
text-align:right;
}

</style>
</head>

<body>
<div id="divPage" class="fullPage">

<div class="divOrderDetail">
<div id="anchorEditNames" class="orderDetail" align="left" style="float:left;color:blue;">

<span id="anchorPayInfo" style="background-color:#F4F2F3;text-align:center;font-weight:bold;color:#990000;width:50%;">Bill To</span><br/>
Some Guy's Name<br/> Maybe a Company<br/> 123 SomeStreet Which is a loooonnnnnggggg addresss<br/> Apt ABC<br/> SomeCity<br/> SomeState<br/> (503) 123-4567<br/> <a href="mailto:foo@example.com">foo@example.com</a> </div>

<div align="left" class="orderDetail" style="float:right;color:blue;">
<span style="background-color:#F4F2F3;text-align:center;font-weight:bold;color:#990000;width:50%;">Ship To</span><br/>
Some Guy's Name<br/> Maybe a Company<br/> 123 SomeStreet Which is a loooonnnnnggggg addresss<br/> Apt ABC<br/> SomeCity<br/> SomeState<br/> (503) 123-4567<br/> <a href="mailto:foo@example.com">foo@example.com</a> </div>

<table class="orderDetail cardInfoTab" border="0" cellpadding="0" cellspacing="0" style="margin-left:auto;margin-right:auto;border:1px solid #FFCC00;" >
<tr>
<td colspan="6">
<span style="background-color:#F4F2F3;text-align:center;font-weight:bold;color:#990000;width:50%;">
Card Info
</span>
</td>
</tr>
<tr>

<td class="alignRight">Method:</td>
<td class="alignLeft">A Payment method</td>
<td class="alignRight">Card #:</td>
<td class="alignLeft">123456789012345</td>
<td class="alignRight">Exp.:</td>
<td class="alignLeft">03/2008</td>

</tr>
<tr>
<td class="alignRight">Auth:</td>
<td class="alignLeft">Some Authorization Code</td>
<td class="alignRight">AVS:</td>
<td class="alignLeft">YYY</td>
<td class="alignRight">CVV:</td>

<td class="alignLeft">666</td>
</tr>
<tr>
<td colspan="6">
<span style="background-color:#F4F2F3;text-align:center;font-weight:bold;color:#990000;width:50%;">
Pay Provider Info
</span>
</td>
</tr>

<tr>
<td class="alignRight">Auth:</td>
<td class="alignLeft">Provider Specific Auth Code</td>
<td class="alignRight">Tx ID:</td>
<td class="alignLeft">Some Really Long Transaction ID 1234567890</td>
<td class="alignRight">Merch. ID:</td>

<td class="alignLeft">123-0987</td>
</tr>
<tr>
<td class="alignRight">Status:</td>
<td class="alignLeft">Charged</td>
<td class="alignRight">BuyerID:</td>
<td class="alignLeft">Some Buyer ID</td>

<td colspan="2">&nbsp;</td>
</tr>
<tr>
<td colspan="6" class="editLink">
<a class="editLink" href="#">edit - not here</a>
</td>
</tr>
</table>

<div class="clear">&nbsp;</div>
</div>
</div>
</body>
</html>
tbirnseth
04-20-2007, 02:51 PM
PS, page can be viewed at http://www.ez-order-manager.com/y.php
bubbisthedog
04-20-2007, 03:47 PM
PS, page can be viewed at http://www.ez-order-manager.com/y.php
URL is messed up.
tbirnseth
04-20-2007, 04:00 PM
Oops, sorry. had only propagated it to my test server. Should be okay now.
toicontien
04-20-2007, 05:38 PM
I've noticed this behavior before with Gecko browsers, and I've never known if that's the correct thing to do. I think It's actually Firefox that's acting correctly. Remember that floated elements exist on a different plane than non floated elements. IE tends to screw up the float model. Here's a quick explanation of how floats work: Quick Floated Elements Explanation (http://www.webdeveloper.com/forum/showthread.php?s=&threadid=51576#post289178)

And the standard from the W3C: http://www.w3.org/TR/CSS21/visuren.html#floats

Lastly, more info from Position Is Everything: http://www.positioniseverything.net/explorer/floatmodel.html

In a nut shell, you'll either have to ensure the TABLE is never too wide, or clear the table so no floated elements are beside it.
tbirnseth
04-21-2007, 12:43 AM
I read your post on the various layers. The problem is that a table is a block element, not an in-line. If the block element doesn't fit, it should go to the first available space. Hence it seems to me that IE is behaving correctly (amazing I know).

Now, if I put the table inside a <div width="300px"> then IE will generate the same behaviour as FF. So it seems that FF is inheriting (and forcing) the 100% width from the container but is not seeing the available space. At least that's what I've observed so far.

Still looking for a way to get FF & IE to both either fit in available space, or to shift down to the next available space.
tbirnseth
04-21-2007, 12:46 AM
I use this same structure on other pages. If/when I put an <img> into the space that is too wide, it pushes down correctly. So I'm kind of stumped!:confused:
ray326
04-21-2007, 01:07 AM
I think if you change the markup so the table is between the divs then you may start to see what the problem is. Of course fixing it or declaring fault are whole other animals.
tbirnseth
04-21-2007, 01:18 AM
Changing the markup by placing the table between the divs has the behavior I'd expect. The right div is pushed down and floated to the right (per its definition). So I'm unclear on what that should tell me? I've tried putting the table inside a div float:left with the same results (both IE and FF).

Still trying to understand why a block element that won't fit into the space tries to force-fit itself and overlays the other block element (the div float:right).
toicontien
04-23-2007, 03:19 PM
If the block element doesn't fit, it should go to the first available space. Hence it seems to me that IE is behaving correctly (amazing I know).
That's actually incorrect. Block elements ride underneath floated elements. Block, unfloated elements do not crop or push floated elements. If the browser is behaving correctly, the floated element literally floats over top of block elements, and takes up no space in the unfloated block elements.
tbirnseth
04-23-2007, 08:58 PM
That's actually incorrect. Block elements ride underneath floated elements. Block, unfloated elements do not crop or push floated elements. If the browser is behaving correctly, the floated element literally floats over top of block elements, and takes up no space in the unfloated block elements.

Okay, I buy that. So next step is... If I put the table into a div with float:left, why does it ALWAYS push down even if it should fit? At least that's the behavior in FF. IE seems to float if there's room but ignores the margin-left:auto;margin-right:auto.

Do you know how I can get the behavior I desire? I would like to have the table between the left and right floated divs if it fits. If it doesn't fit, I'd like it to push down and center itself.
bubbisthedog
04-23-2007, 09:30 PM
Okay, I buy that. So next step is... If I put the table into a div with float:left, why does it ALWAYS push down even if it should fit? At least that's the behavior in FF. IE seems to float if there's room but ignores the margin-left:auto;margin-right:auto.

Do you know how I can get the behavior I desire? I would like to have the table between the left and right floated divs if it fits. If it doesn't fit, I'd like it to push down and center itself.

It appears to me that the layout that you desire isn't really doable without using JavaScript (unless some relatively sophisticated CSS is applied that I have not tried). The only CSS option that you may have left, while allowing the left and right divs to expand freely, is to apply a width to the center div.

Is there a reason why you can't have the left div on top of right div on top of center div? It seems like a logical order to me. By the way, IE's behavior is most certainly is the 'wrong-doer' in this case; FF is working correctly.
tbirnseth
04-23-2007, 09:43 PM
Is there a reason why you can't have the left div on top of right div on top of center div? It seems like a logical order to me. By the way, IE's behavior is most certainly is the 'wrong-doer' in this case; FF is working correctly.

I don't know what you mean by on top of... Can you reference the code and provide a suggestion? When the divs are on top of each other, the information they contain is unreadable.

Regarding IE's behavior... I can't address the right/wrong of either. But I do know that the way IE is behaving is what I would like. So I'm trying to find what the "right" way is to do it so that it will work in both browsers.

I use this method in many other pages throughout my product with the difference being that I use specific widths for the left/right floated elements. But with this dataset I don't have that luxury. I.e. I can't control the length of an address or email where in my other pages, I control the content.
bubbisthedog
04-23-2007, 09:53 PM
I don't know what you mean by on top of... Can you reference the code and provide a suggestion? When the divs are on top of each other, the information they contain is unreadable.

Unreadable? The left div expands freely, the center div (the table) expands freely and the right div expands freely. If you take the floats off of all of them, thus allowing all block elements to stack on top of each other, your flow will be vertically 'logical.'

Regarding IE's behavior... I can't address the right/wrong of either. But I do know that the way IE is behaving is what I would like. So I'm trying to find what the "right" way is to do it so that it will work in both browsers.

Yeah, and it's difficult sometimes, as I'm sure you know. Unfortunately, sometimes the 'right' way can be a difficult way, since IE thinks that it can assume what you want. Firefox goes by standards, and that's how I, personally, like to write my markup. Like I said, you may have to resort to some rather sophisticated CSS or JavaScript to accomplish your desired result --in both IE and Firefox, that is.

I use this method in many other pages throughout my product with the difference being that I use specific widths for the left/right floated elements.

And that's a huge exception, in this case, unfortunately.

But with this dataset I don't have that luxury. I.e. I can't control the length of an address or email where in my other pages, I control the content.

I certainly empathize with your position here, but I, for one, have provided all of the non-specific advice that I can provide. Best of luck.
tbirnseth
04-23-2007, 10:55 PM
Unfortunately, loosing the real estate that "stacking the divs on top of each other" would do doesn't fit the paradigm. I guess I could return to the tried and true way of just putting the stuff in tables embedded within tables... But was trying to avoid that. Guess I'll have to return to the drawing board. And I thought CSS was supposed to solve all our problems! ;)
bubbisthedog
04-23-2007, 11:08 PM
Unfortunately, loosing the real estate that "stacking the divs on top of each other" would do doesn't fit the paradigm. I guess I could return to the tried and true way of just putting the stuff in tables embedded within tables... But was trying to avoid that. Guess I'll have to return to the drawing board. And I thought CSS was supposed to solve all our problems! ;)
It's taken a lot of time for me to learn how to use CSS and div-based layouts, and, I agree, it has it's frustrating ups and downs. But, overall, it's made my pages easier to maintain, on top of the many other benefits of having a div-based layout. I will say that I am happy that I am one of those people who began his development work right around the time when div-based layouts became 'the way to go.' I've seen the incredible damage that table-based layouts can cause. Again, best of luck.