homepage Welcome to WebmasterWorld Guest from 54.237.78.165
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
'Shrink-to-fit' div with a nested floated element
FF/IE Width of left-float that contains a right-floated element
pinguino

5+ Year Member



 
Msg#: 3811603 posted 10:06 pm on Dec 19, 2008 (gmt 0)

Hi everyone,

I'm a little puzzled about something and I'd love some help.

Here's some code to demonstrate the source of my current pain:



<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Floats</title>
<style type="text/css" media="screen">

#container {
float: left;
border: solid 2px black;
}

#right-floated {
float: right;
border: solid 2px black;
}

#width-definer {
width: 400px;
clear: both;
border: solid 2px black;
}
</style>
</head>
<body>
<div id="container">

<div id="right-floated">
<p>I hope I haven't gone too far</p>
</div>

<div id="width-definer">
<p>I decide how wide the container div will be!</p>
</div>

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

On Firefox the container div, being floated, shrinks to the width of its widest child element (id of width-definer here).

On IE6/7 the right-floated div forces the container to be full-width across the page.

I'd really like it behave as it does in FF on all browsers. I want to use it to display content at the top right of a div, but allow the div to change size depending on the content. I'm sure I'm not the first person to want to do this, so I'm guessing I'm doing something silly...

Any help you could offer would be appreciated!

Many thanks
Pao

 

swa66

WebmasterWorld Senior Member swa66 us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3811603 posted 2:21 am on Dec 24, 2008 (gmt 0)

If you now the height of your real-world #right-floated, you could give the @container "position" with "position:relative" so that its absolutely positioned children would be positioned inside it and avoid the float there.

Not sure if it works at all, I didn't test it.

pinguino

5+ Year Member



 
Msg#: 3811603 posted 5:02 pm on Dec 24, 2008 (gmt 0)

Hey, thanks for replying swa66.

Unfortunately, the right-floated content will not always be present, and may vary in height, so absolute positioning is not ideal.

I appreciate the response anyway.

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3811603 posted 2:18 am on Dec 29, 2008 (gmt 0)

Hi pinguino,
I'm a little puzzled about something and I'd love some help
The difference is caused because div#container is display:block, so ie extends it the full viewport width. The float:right on div#right-floated means it is positioned with its right edge aligned to the right edge of the containing box - in this case the right edge of div#container, which is at the visual right edge of the viewport.

I have been trying to figure your real-world use given the purpose of floats is to remove the element from the normal flow and position it left/right of following content which will flow around the opposite side. As your goal seems to be to align a block element to the right, reinforced by setting clear:both on div#width-definer, it doesn't seem as if you are seeking float behaviour at all.

If that's the case, it is possible to achieve your alignment goal by removing the float from div#right-floated and replacing it with text-align:right. That would also mean the clear:both on div#width-definer could be removed as well.

pinguino

5+ Year Member



 
Msg#: 3811603 posted 3:35 pm on Dec 29, 2008 (gmt 0)

Hey alt131

Thanks for your response!

The real world use is a number of divs, all floated left (so resizing the browser window will allow them to wrap). That was my thinking behind floating them. So if you've got a form made up of, say, 4 sections, you might see them all in a row (if you've got a huge monitor), 2 rows of 2, or a vertical list of sections. At the top right of some sections is the right-floated content.

The thing that puzzles me is that the behaviour is different in IE and FF (nothing new there, I know :-). FireFox says "Ok, the container div is x pixels wide (because the widest content is x pixels wide). I'll just put the right-floated content on the right"

IE seems to see the right-floated content and, in a paperclippy* voice, "It looks like you're building a standards-compliant web page. Right floated content? Let's stretch the container div out".

Oh well, I'll just use absolute positioning and deal with the extra overhead of managing vertical spacing when the top-right content is there.

* I have no idea

alt131

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 3811603 posted 12:08 am on Dec 30, 2008 (gmt 0)

The thing that puzzles me is that the behaviour is different in IE and FF (nothing new there, I know :-).

Depends which version of ff you are looking at ;)

ff2 and earlier stretches the div#container the full viewport width - but doesn't honour the clear:both so that div#right-floated and div#width-definer are on the same visual "line". (For the record Op9.6 shrink-wraps to the 400px total width, does not honour the clear:both but honours float:right, and allocates 50% width to each div so div#width-definer is to the left, but on the same line as div#right-floated.)

I suggest checking the recommendations for a more technical explanantion for the differences, but simply put, the behaviour of floats changed between css2(1998) and css2.1(a couple months of 2005, and then 2007). Per css2 it was mandatory to set a width on floats, while the "shrink-wrapping" you see in ff3 is css2.1. That means pre-Jul/2007 browsers are conforming to the recommendation relevant to their time of manufacture when they stretch div#container the full viewport width. (Which doesn't explain Opera, but it always has done its own thing.)

When old/new browsers behave differently, useful to quickly check the "changes" section in the recommendations for clues.

Back to your code, from your enhanced description, it seems you definitely only want float behaviour on the outer divs - not the inner content. As you don't want float behaviour on the inner content text-align:right on div#right-floated seems more correct, and works with multiple div#container's, so I can't see what is gained by loading in more code, plus the maintenance issue by using absolute positioning.

That said, given you've also mentioned forms, am also wondering if it possible to achive your layout aim without using any divs at all.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved