homepage Welcome to WebmasterWorld Guest from 54.205.254.108
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Float Issue ¦ CSS Layout
Tricker




msg:3693164
 12:41 pm on Jul 8, 2008 (gmt 0)

when i am using the float left and right on two different div..
facing an issue in a parent div..


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<div style="background:#CCCCCC; border:1px solid blue; position:relative;">
<div style="background-color:#009933; float:right;">sdfsdfdfsdfsd</div>
<div style="background-color:#666666; float:left;">dsfsdsdfsdfds</div>
</div>
</body>
</html>

any pointer or help will be highly appreciable..

Thanks,
Tricker

 

Fotiman




msg:3693210
 1:41 pm on Jul 8, 2008 (gmt 0)

"an issue"? You will likely get better replies if you can be more specific as to what your problem is.

In this case, I'm guessing you are expecting a gray background to extend the height of both the floated items. However, when you float an element, you take it out of the flow, so your parent div doesn't contain anything to give it height.

There are many ways to fix this. You could add an element below that floated elements that clears them. Or you could float the parent div as well. Or you could give overflow: hidden to the parent... just to name a few.

Lastly, (and not related to your issue) I recommend you read Why most of us should NOT use XHTML [webmasterworld.com].

4css




msg:3693254
 2:22 pm on Jul 8, 2008 (gmt 0)

Hi Tricker,

I loaded your code into my computer and did some playing with it.

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/*\*/
* html .clearfix {height: 1%;display: block;}
/**/
-->
</style>

</head>

<body>
<div style="background:#CCCCCC; border:1px solid blue; position:relative;" class="clearfix"><p>Come content in here</p>
<div style="background-color:#009933; float:right; clear: both;">sdfsdfdfsdfsd</div>
<div style="background-color:#666666; float:left;">dsfsdsdfsdfds</div>
</div>
</body>
</html>

Above is what I have done, see if this works for you.

When you use floats you need to clear them.

For some reading on floats the W3.org [w3.org] has some information that you might wish to look at. Also Here [w3.org] is another link for you. As you read the information the page has links for you to click on for additional reading. You might also wish to google floats and css to learn more about them. :)

I have used the alsett clearing method, if you google it, you can find information on this as well that you might wish to read.

Keep us posted on how this works out for you, and if you have any more questions please post them. We are here to help you as you need it.

~4~css

I'm not going to get into the argument of to or not to use xhtml. I believe that it is up to the individual doing the design to decide if this is the method they wish to use. I also don't feel that it is something that you should put into a post for someone asking for help ;)

appi2




msg:3693280
 2:52 pm on Jul 8, 2008 (gmt 0)

OK I'm confused, what's the point of this alset thing? It looks different in IE6 to 7 to ff2 to ff3 to opera9.5.
I suppose ff3 and safari agreeing could be a pro.

4css




msg:3693299
 3:23 pm on Jul 8, 2008 (gmt 0)

The alset clearing method is for clearing your floats. I find that it works better then a clear: both on most issues with floated containers. The only issue where I found that it didn't work was when I had 3 images across in a div. I had to add a clear:both to the last image.

I'm curious, have you posted all of your css? None of your divs have a width set for them.

What is the size of your containing div? And the floated divs?

You can look this up on PIE's site (position is everything) John and Holly have an article on this clearing method that will explain it really good for you.

appi2




msg:3693369
 4:18 pm on Jul 8, 2008 (gmt 0)

Think your confusing me with the OP ;)
re

You can look this up on PIE's site (position is everything) John and Holly have an article on this clearing method that will explain it really good for you.

would that be the one that has the warning that says

Notice as of March 4th, 2008: The article you are reading is getting a bit old and much new information on the subject of clearing has appeared since it was written...

like
overflow:auto or hidden

SuzyUK




msg:3693506
 5:49 pm on Jul 8, 2008 (gmt 0)

the Aslett/PIE method is indeed getting a bit outdated, but is still perfectly OK if you use it in the style of the clearing for which it filled a role :)

trouble I've now been finding is that it is now overused as a catchall (specially in Drupal's core code :o) and applied to the wrong elements at times

anyway back to the old (pre aslett) way of clearing floats, if you had two (or more) floats that you needed to clear the simplest way was to input an extra HTML element and have it as clear:both, whether that was an empty div, br or hr it didn't matter as long as it was an empty element

so the structure would look like this

<wrapper>
<float><float><float>
--<the clearing element>--
</wrapper>

the clearing element made the wrapper think it had content and pulled the bottom of the wrapper below the bottom of the "empty" element creating the desired look

then along came the Aslett/PIE method which actually relied on creating generated content, which was then made into a block element and clear both was applied to it, in other words you still needed a wrapper to wrap the floats in:

<wrapper>
<float><float><float>
</wrapper>
[generated content - cleared]

it wasn't that the wrapper or floats were cleared but it had the desired effect, it cleared the floats after the generated content

It should have only ever been applied to the <wrapper> element by generating content after itself BUT it has got to the point of being overused, like a "magic bullet" where some will now apply this technique to the float itself. Thing is this will work (I think) in some cases, i.e. if it's the last float of a series, but you see the misunderstanding here.. (I haven't though about it that deeply, as it's now obsolete..)

In theory it should be OK if you know the last float of a series and want to clear it.. but if you're going to that you may as well use the last float's sibling and apply clear: left; to it, in other words why use the workaround.

so yes the newer techniques of floating the wrapper or adding overflow (anything other than visible) to the wrapper make it much clearer again, and of course that means we take IE's auto clearing behaviour into play like before too

in other words, in this interim phase between IE6 and advanced selector support I'd continue to use a wrapper and clear that wrapper with the method of your choice. and fwiw I would use a newer method over the Aslett method these days too, in fact I've only found the Aslett method 'necessary' for NN6 for the last couple years (and support of that is now ditched so not worth it) hence PIE's note I presume.

Since FF got overflow right, overflow or float are the tools for the job .. Opera afaik, has worked with both the IE dimensioning method and the overflow method for a while too

edited to reflect that two in the original sample can be two or more

[edited by: SuzyUK at 7:31 pm (utc) on July 8, 2008]

appi2




msg:3693642
 8:04 pm on Jul 8, 2008 (gmt 0)

Just my opinion but sometimes the CSS Gods should just stop messing about. That aslett mess (still just my opinion;)) over a simple br and clear, glad I missed that one.

SuzyUK




msg:3693691
 8:47 pm on Jul 8, 2008 (gmt 0)

OK I'm confused, what's the point of this alset thing? It looks different in IE6 to 7 to ff2 to ff3 to opera9.5.

we tried to help your confusion over that question, even explained the thought process.. but not good enough apparently

Just my opinion but sometimes the CSS Gods should just stop messing about. That aslett mess (still just my opinion ;))

seems like you're now taking the mickey ;) - going from "what's the point" to "it's a mess" in one thread is disrespectful whether you're right or not!

IMHO, it's only a mess if you don't understand why it might be needed, float clearance was never intended to be used to "stretch" parent containers, floats were never intended for layout, but over time it was one of those things that was going to happen so as CSS evolved they gave us 2 legitimate ways to do it

the Aslett method is not a 'mess', it is another of those CSS Only workarounds that enables/d folks to achieve a goal without messing with the HTML, much like Tantek's filters.

If you've missed it then, good for you unfortunately it's built into to a lot of templates out there so it's still best to at least understand it.. again just an opinion

[edited by: SuzyUK at 4:41 am (utc) on July 9, 2008]

Tricker




msg:3694019
 3:27 am on Jul 9, 2008 (gmt 0)

Thanks alot Guys!

but the problem i am facing is:

if i use float left and right on two different divs then the height of the parent div becomes 0px.

but logically parent div is a container div which contains both the div. in this case parent div should adjust the height accordingly.

any solution or workaround for the same would be great..

Thanks,
Tricker

SuzyUK




msg:3694055
 4:52 am on Jul 9, 2008 (gmt 0)

but logically parent div is a container div which contains both the div. in this case parent div should adjust the height accordingly.

Hi tricker.. see fotiman's post#2

floats are removed from the flow, this is the correct behaviour.. anyway when using floats for layout this means the the parent doesn't "contain" them any more so you need to tell the parent div

a: that it's got some content, add <br style="clear: both;"> (or some other empty element) after the two floats but before you close the parent div - this makes the parent think it's got some content

or

b: use a CSS workaround like the "easyclearing" (Aslett) method - if you want search for that you'll find it on P.I.E.

or

c: either add float: left or overflow: auto; (or hidden) to the parent div, these are the two newer/"correct" ways to instruct the parents to contain their floats.. whichever you choose will depend on your layout, e.g. float might not be so good if you've a centered layout

all the above might have a drawback depending on your design and which browsers you're looking at supporting

Tricker




msg:3694090
 6:04 am on Jul 9, 2008 (gmt 0)

Hey Suzy,
First of all thankyou for you prompt reply..

yes i know there are couple of ways to fix this issue infact i fixed it by using the clear:both method before starting this thread.

but at the same time couple of question comes up in my mind like:
- Is this the right way to fix it?
- what would be the other ways to float two div one on the left and second on the right?

so currently the supporting browser are:
IE6 & 7, firefox2.0 and safari on mac

Pls. don't mind but still i am not getting another ways to do this yet.

so it would be great if you provide an pointer or link for the same.

Thanks,
Tricker

SuzyUK




msg:3694185
 9:51 am on Jul 9, 2008 (gmt 0)

Hi Tricker,

There is really no "right way". Floats were not really meant to be used like this, i.e. stretching the background of the parent is considered a Layout or pretty effect only. However because of the absence of anything else it's only natural that their use has been stretched for other reasons..

I assume you have something like this then:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> floats </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">

#floatwrap {background: #dad;}
.col {width: 45%; border: 1px solid #000; background: #fff;}
.fl {float: left;}
.fr {float: right;}

</style>
</head>
<body>
<div id="floatwrap">
<div class="col fl">left floated div</div>
<div class="col fr">right floated div</div>
<br style="clear: both;">
</div>
</body>
</html>

that is fine, it works, it's simple as noted earlier, but in the grand scale of CSS design and layouts this is not considered a true CSS way as it involves you having to know the design in advance of the HTML coding in order to have that extra element in the right place in the source code. In other words it's OK if you know you'll never need to change the design using CSS only.

back in the days IE would do this without that extra element, simply by adding a width to the float wrapper was enough.. (Opera also tried adopting this method for a while but I see it's dropped now)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> floats </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
#floatwrap {background: #dad; width: 100%;}
.col {width: 45%; border: 1px solid #000; background: #fff;}
.fl {float: left;}
.fr {float: right;}
</style>
</head>
<body>
<div id="floatwrap">
<div class="col fl">left floated div</div>
<div class="col fr">right floated div</div>
</div>
</body>
</html>

This behaviour (auto enclosing behaviour) turned out to be liked, which is possibly why Opera decided to try including it too? BUT then it was discovered that the behaviour also led to an awful lot of IE Bugs (it was using IE's hasLayout engine)

also at the time support for generated content was starting to increase so the clever CSS people discovered they could generate a block level element and use it for clearance, therefore a pure CSS 'fix'.. IE didn't support generated content but we could use their hasLayout quirk to keep it happy.. thus the "Easyclearing" method was born

adding this to the CSS for compliant browsers shows what it does

#floatwrap:after {
content: "some fake content usually just a full stop .";
display: block;
height: 0;
clear: both;
/*visibility: hidden;*/
}

leave the visibility:hidden bit commented out and you will see that the generated sentence is the bit that actually clears the floats, much like the <br> was doing before

FF/Moz actually used to need to have some content in there or it wouldn't generate the block, so usually the hack is seen with just a "." in there. I just put in a sentence to make it clearer, although I think it can be used with a space only now?

Then it's simple matter of making that generated element have no height and making it invisible.. job done

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> floats </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">

#floatwrap {background: #dad;}
.col {width: 45%; border: 1px solid #000; background: #fff;}
.fl {float: left;}
.fr {float: right;}

#floatwrap:after {
content: "some fake content ususally just a full stop .";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div id="floatwrap">
<div class="col fl">left floated div</div>
<div class="col fr">right floated div</div>
</div>
</body>
</html>

job done for compliant browsers anyway.. IE still needed hasLayout triggered on the float wrapper and that could be done by giving a width if you know it or adding a second part to hack above

in the past this has looked like this:
#floatwrap {display: inline-block;}

/* Hides from IE-mac \*/
* html #floatwrap {height: 1%;}
#floatwrap {display: block;}
/* End hide from IE-mac */

it looks unecessarily complicated, but this again is due to the browsers it was required to support at the time it came about.. support goes back to IE5 for both Mac and Windows

IE/Mac needed the display: inline-block;
{which is why the display: block; rule is hidden from it}
it also honoured height and read the * html hack
(which is why the Windows height hack rule was hidden from it)

IE5/Win needed the hack height: 1%; {it didn't support the inline-block method of setting hasLayout=true)

IE5.x-7 gets their hasLayout fix from the combination of (display: inline-block;} and {display: block;} one set the hasLayout property to true the other corrected the actual display back to what it should be, the second display property also reset the display for all browsers, not all supported inline-block anyway (though they do now) but it was display block that was needed

But of course support for IE/Mac and IE5 win is now virtually non-existent so it can be safely reduced now, IE up to and including 7 still needs hasLayout so.. it could look something like this now

#floatwrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#floatwrap {display: inline-block;}
#floatwrap {display: block;}

or

#floatwrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#floatwrap {width: 100%;}

that still works just fine too, but as always as we working around IE, the other browsers were leading the way and the CSS Spec writers realised there was need for an easier way to clear floats until they could give us a proper Layout Module..

The first way was always existent, if you float the parent wrapper it will contain its floated children. [I so can't find the bit in the specs that explains this point but it's well known that using a float to clear a float is one of the methods)

#floatwrap {background: #dad; float: left; width: 100%;}
.col {width: 45%; border: 1px solid #000; background: #fff;}
.fl {float: left;}
.fr {float: right;}

the above method won't work very well for centered layouts unless the parent float is wrapped inside another div which takes care of the centering

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> floats </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">

#wrapper {width: 600px; margin: 0 auto;}

#floatwrap {background: #dad; float: left; width: 100%;}
.col {width: 45%; border: 1px solid #000; background: #fff;}
.fl {float: left;}
.fr {float: right;}

</style>
</head>
<body>
<div id="wrapper">
<div id="floatwrap">
<div class="col fl">left floated div</div>
<div class="col fr">right floated div</div>
</div>
</div>
</body>
</html>

That should work fine too

Now we have just about correct support for the fact that applying the overflow property (anything other than visible) in order to establish a new block formatting context to the float wrapper will also force containment of child floats.. (it actually works to clear floats in both directions, horizontally and vertically) - this came about slowly, although it's been in the specs for ages, because support for overflow was buggy in FF for a long time

10.6.7 'Auto' heights for block formatting context roots [w3.org]

In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> floats </title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css" media="screen">
#floatwrap {background: #dad; overflow: auto;}
.col {width: 40%; border: 1px solid #000; background: #fff; }
.fl {float: left;}
.fr {float: right;}
</style>
</head>
<body>
<div id="floatwrap">
<div class="col fl">left floated div</div>
<div class="col fr">right floated div</div>
</div>
</body>
</html>

one thing to possibly be aware of is that although the overflow method appears to work as expected in IE7, it's not. IN IE7 overflow was also added to the list of hasLayout= true triggering properties, so IE7 is actually using hasLayout to contain the floats.. while this is not necessarily damaging yet.. you need to be aware that IE6 will still need another way to trigger hasLayout (possibly zoom: 1;) until support for it is no longer required, and watch for IE8 maintaining the correct behaviour for overflow now that hasLayout is no longer

so in all, I'd say the 'easyclearing' fix is not totally outdated yet, it still has a purpose to serve until stability is achieved both with IE and the overflow situations

hth, and that the examples help you choose what's best for you

Eric Meyer wrote an article [complexspiral.com] back in 2003, which might help explain why floats are in CSS and why they act as they do.. this might help you get started if you want the actual low down

Tricker




msg:3694253
 11:42 am on Jul 9, 2008 (gmt 0)

Thanks a ton suzy..

with this great help not only my problem has been resolved also i learnt couple of new things as well..

Thanks alot once again,
Tricker

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