Floating li is out of the container

[perpetual_dream]

Hello,

I am trying to float two divs (blocks) infront of each other within a container

I want them to appear like this:

<div id="center-content">
<h4>BLABLAB BALA BLABLA</h4>
<p>
ARABIC TEXT<br /><br>
&#1601;&#1608;&#1575;&#1574;&#1583; &#1575;&#1604;&#1575;&#1588;&#1578;&#1585;&#1575;&#1603;:<br>
-&#1578;&#1587;&#1608;&#1610;&#1602; &#1604;&#1605;&#1593;&#1575;&#1585;&#1590;&#1603; &#1608;&#1605;&#1581;&#1604;&#1575;&#1578;&#1603; &#1608;&#1605;&#1606;&#1578;&#1580;&#1575;&#1578;&#1603;.<br>
-&#1578;&#1587;&#1608;&#1610;&#1602; &#1604;&#1605;&#1593;&#1575;&#1585;&#1590;&#1603; &#1608;&#1605;&#1581;&#1604;&#1575;&#1578;&#1603; &#1608;&#1605;&#1606;&#1578;&#1580;&#1575;&#1578;&#1603;.<br>
-&#1578;&#1587;&#1608;&#1610;&#1602; &#1604;&#1605;&#1593;&#1575;&#1585;&#1590;&#1603; &#1608;&#1605;&#1581;&#1604;&#1575;&#1578;&#1603; &#1608;&#1605;&#1606;&#1578;&#1580;&#1575;&#1578;&#1603;.<br>
<br>
&#1602;&#1608;&#1575;&#1606;&#1610;&#1606;:<br>
-&#1578;&#1587;&#1608;&#1610;&#1602; &#1604;&#1605;&#1593;&#1575;&#1585;&#1590;&#1603; &#1608;&#1605;&#1581;&#1604;&#1575;&#1578;&#1603; &#1608;&#1605;&#1606;&#1578;&#1580;&#1575;&#1578;&#1603;.<br>
-&#1578;&#1587;&#1608;&#1610;&#1602; &#1604;&#1605;&#1593;&#1575;&#1585;&#1590;&#1603; &#1608;&#1605;&#1581;&#1604;&#1575;&#1578;&#1603; &#1608;&#1605;&#1606;&#1578;&#1580;&#1575;&#1578;&#1603;.<br>

</p>

<ul class="subscription">
<li>
1ST BLOCK CONTENT</li>

<li>
2ND BLOCK CONTENT</li>
</ul>

</div><!-- END CENTER CONTENT -->

This is my CSS:

#center-content h4 {
	text-align:right;
	color:#333333;
	font-size:1.5em;
	margin:0px;
	padding:0px;
	margin-bottom:15px;	
}	

#center-content p {
	clear:both;
	margin:0px;
	margin:0px;
	text-align:right;
	direction:rtl;
	font-size:1.1em;
}

ul.subscription {
	list-style:none;
	padding:0 0 10px ;
	margin:0;
	margin-top:20px;
	width:100%;
	border:1px solid #D8D8D8;
	
}

ul.subscription li {
	padding:10px;
	width:250px !important;
	background: #F4F4F4;
	border:1px solid #d8d8d8;	
	float:left;
	overflow:hidden;
	text-align:right;
}

However, with ul.subscription li float:left it appears like follows: as if the li is laid out the container.

Any ideas on what I am missing

[Stomme_poes]

Hi,

Well I had no idea about floating enclosure . I have used overflow:hidden while specifying a width.

The width

• should be ok
• shouldn’t actually be needed (a block who’s not absolutely positioned or floated should naturally take up 100% of the available space without you needing to say anything… unless you have limited widths on ul’s from earlier?)

The issue is, overflow: hidden does what it says: hides overflow. You only have overflow when you state set dimensions on a container, and then have content inside who is larger (either in width, height, or both). By default, you have overflow: visible on all boxes, so any children who are too big, they just… overflow out : )
hidden will just cut them off… you can’t see any part of a child who overflows.
overflow: auto will make scrollbars on the box.

So, whenever you use overflow: hidden for something other than its Day Job (using it to enclose floats for example), you check to make sure you don’t have any dimensions set that could potentially cut off content (so, if you set a height on a box, test that text-enlarge doesn’t also break anything!).

I have used overflow hidden on the li because I thought that li is overflowing the ul. I didn’t know that the issue is the float issue.

Whoever you actually put the overflow: hidden on will overflow however it normally would, but will hide any overflowing children it has.

Normally, the specs say a container should not be able to “see” its floated children, so if that’s all it has, it acts as if it’s empty and has no height (or will set its height to whatever non-floated child may be inside). But when you tell a box it has to deal with overflow, then the rules change: it can “see” the floats, how else could it know if they are overflowing? And when it “sees” them, it encloses them just like regular containers do with non-floated children.

I didn’t check out your link, but took a look at your code. The box that’s misplaced is the Subscribe Now box, right? You’ve absolutely positioned it and set the bottom, but you didn’t set a left or right. I’m not sure, but it’s possible that IE want to be told where from left or right of that rel-positioned container to place the box.

ul.subscription .col-left .subscribe-now {
margin-bottom:5px;
border:1px solid #E9EDEF;
width:70px;
height:40px;
text-align:center;
color:#FFFFFF;
font-weight:bold;
font-size:1.1em;
position:absolute; bottom:0px; height:50%;
[b]left: 0;[/b]??
} 

I wonder if simply stating left: 0 would do the trick? IE6 in particular has various issues with absolute positioning… for your future sanity you might want to check out Big John’s page (if you haven’t already run across it before): PositionIsEverything.net

Both IE6 and IE7 have Haslayout. Sometimes the fact that both of them but not IE8 show some bug causes me to make sure it’s not somehow a Haslayout issue… however, absolutely positioned elements have Layout so I don’t think that’s what’s going on here.

It is strange to me that IE is placing the subscribe-now button outside its positioned parent… but I would still see if left: 0 would fix it. I vaguely remember IE6 had a problem with absolute positioning when the parents had text-align other than left…

*edit I’ve now seen your page… and I was surprised you didn’t set the direction of the page to rtl (right to left). Was that because you have a lot of IE6 users visiting?

I’ve debugged several rtl pages and frankly, Opera seemed to be the only browser that got it right every time. Firefox and Safari and Chrome were often very good, but had hiccups (an old Safari bug with text-align in form controls seems to be fixed). IE7 did the scrollbars all wrong, and IE6 was so horribly confused it needed to be put to sleep for its own good.

If you are pretty sure (or stats tell you) that you don’t have any significant number of IE6 users visiting, consider setting rtl on your page. It will make the scrollbars in the Good browsers act the way most users expect (if they are usually on arabic, farsi, or hebrew etc lang pages). You could change the dir for IE6 and 7 in an IE stylesheet called with an IE conditional comment as well.

[perpetual_dream]

Hi,
left:0px did the trick … Thank you…

I have specified the width of the ul because according to the link you referred me to :

“If the parent element has an overflow: value other than the default “visible”, the height of the element will be sufficient to contain child floats.
Notice that IE≤6 fails to follow the rules. IE will work if the parent is given a width. That is due to a dimensioned element in IE expanding to enclose its content. IE7 has added {overflow: hidden || auto;} to the list of properties that trigger hasLayout”

Yea, I’m not sure it is a good idea to specify rtl for the document in my case… But I have faced certain problems in the past when it comes to running certain script especially in IE .

Thank you for your help …

[Stomme_poes]

I have specified the width of the ul because according to the link you referred me to :

Duh, why didn’t I see that? : ) You are correct, and I’ve done the same to have Haslayout without resorting to a * html hack line.

Yeah rtl is still a little off, but I would hope in a few years it could be used without fear. When it works, it works so very nicely with rtl languages.

[RyanReese]

Is there anyway we could get a live link? It would make debugging so much easier, being able to see the full page (and I’ve been run ragged these past few days doing almost every thread here :p)

[perpetual_dream]

Well I had no idea about floating enclosure . I have used overflow:hidden while specifying a width.

I have used overflow hidden on the li because I thought that li is overflowing the ul. I didn’t know that the issue is the float issue.

I’m using !important on the width in order to make sure the rule is applied. Even though I am specific to a certain rule a less specific rule is being applied. I need to give it a second look.

Now, I have a problem of compatibility with internet explorer 6 and 7.

Here is my code:

ul.subscription {
	list-style:none;
	padding:0 0 10px;
	margin:20px 0px 0px 0px;
	width:100%;
    overflow:hidden;
}

ul.subscription li {
	padding:10px;
	width:268px;
	border:1px solid #d8d8d8;	
	text-align:right;
	height:110px;
}
ul.subscription li.golden {
float:left;
background: #CBA660;

}

ul.subscription li.basic {
float:right;
background: #D8D8D8;
}

ul.subscription li ul {
list-style:none;
width:100%;
margin:0px;
padding:0px;
height:100%;
}

ul.subscription li ul li {
margin:0px;
padding:0px;
width:auto;
border:none;	
text-align:right;
height:auto;
}

ul.subscription li h6 {
font-size:1.1em;		
}

ul.subscription li.col-left {
float:left;
width:80px;
margin-right:5px;
margin-bottom:10px;
position:relative;
height:100%;
}

ul.subscription li.col-center {
float:left;
width:80px;
text-align:right;
direction:rtl;
}

ul.subscription li.col-right {
float:right;
width:70px;

}

ul.subscription .col-left .subscribe-now {
margin-bottom:5px;
border:1px solid #E9EDEF;
width:70px;
height:40px;
text-align:center;
color:#FFFFFF;
font-weight:bold;
font-size:1.1em;
position:absolute; bottom:0px; height:50%;
}


input.btnsubscribe {
	padding:0;
	border:none;
	background:url(../images/btn2.png) 0 0 no-repeat;
	width:42px;
	height:17px;
	cursor:pointer;
	margin:4px auto;
	display:block;
	
}
input.btnsubscribe:hover {
	background-position:0 -17px;
}

ul.subscription li ul li ul {
list-style:circle;
margin:0px;
padding:0px;
}

ul.subscription p.header {
	text-align:right;
	color:#333333;
	font-size:1.1em;
	margin:0px;
	padding:0px;
	font-weight:bold;
}

Here is my HTML Code:

<ul class="subscription">
<li class="golden">
<ul>
<li class="col-left">
<div class="subscribe-now">
&#1571;&#1587;&#1601;&#1604; &#1575;&#1604;&#1589;&#1601;&#1581;&#1577;
<p>
<input type="submit" class="btnsubscribe" value="" >
</p>
</div>
</li>
<li class="col-center">
<ul>
<li>
&#1588;&#1593;&#1575;&#1585; &#1575;&#1604;&#1605;&#1589;&#1604;&#1581;&#1577;
</li>

<li>
&#1578;&#1601;&#1575;&#1589;&#1610;&#1604; &#1575;&#1604;&#1605;&#1589;&#1604;&#1581;&#1577;
</li>

<li>
&#1578;&#1601;&#1575;&#1589;&#1610;&#1604; &#1604;&#1604;&#1578;&#1608;&#1575;&#1589;&#1604;
</li>

<li>
&#1571;&#1585;&#1602;&#1575;&#1605; &#1607;&#1575;&#1578;&#1601;</li>

<li>
3 &#1589;&#1608;&#1585;</li>

</ul>
</li>

<li class="col-right">
<p class="header">
&#1605;&#1588;&#1578;&#1585;&#1603; &#1571;&#1587;&#1575;&#1587;&#1610;
</p>
</li>
</ul>
</li>
<li class="basic">
<ul>
<li class="col-left">
<div class="subscribe-now">
&#1571;&#1587;&#1601;&#1604; &#1575;&#1604;&#1589;&#1601;&#1581;&#1577;
<p>
<input type="submit" class="btnsubscribe" value="" >
</p>
</div>
</li>
<li class="col-center">
<ul>
<li>
&#1588;&#1593;&#1575;&#1585; &#1575;&#1604;&#1605;&#1589;&#1604;&#1581;&#1577;
</li>

<li>
&#1578;&#1601;&#1575;&#1589;&#1610;&#1604; &#1575;&#1604;&#1605;&#1589;&#1604;&#1581;&#1577;
</li>

<li>
&#1578;&#1601;&#1575;&#1589;&#1610;&#1604; &#1604;&#1604;&#1578;&#1608;&#1575;&#1589;&#1604;
</li>

<li>
&#1571;&#1585;&#1602;&#1575;&#1605; &#1607;&#1575;&#1578;&#1601;</li>

<li>
3 &#1589;&#1608;&#1585;</li>

</ul>
</li>

<li class="col-right">
<p class="header">
&#1605;&#1588;&#1578;&#1585;&#1603; &#1571;&#1587;&#1575;&#1587;&#1610;
</p>
</li>
</ul>
</li>

</ul>

Things look fine on Internet explorer 8 and firefox and chrome

But it looks like this on Internet explorer 6, 7

[perpetual_dream]

Ok I uploaded a version on the server:

Please not that the database is not set and the images folder was not uploaded… but it doesn’t affect the normal flow of the document on the specific case I’m talking about.

http://tinyurl.com/28le99p

[Stomme_poes]

Hi,
This is an easy one, I think.

Your grey boxes are your li’s? And you have a grey border around the ul… your first screen shot doesn’t show the ul wrapping around anything, so if that’s your true goal, it doesn’t really matter too much unless you also want that ul to be able to push stuff down with a bottom margin.

Basically your ul isn’t enclosing your floated li’s. There are various bits of code you can use to enclose your floats. The two most common methods are either adding overflow: hidden to your container (the ul) or floating it (course, then #center_content might then need to enclose the ul!).

So long as you set no dimensions (or at least not a height) on the ul, overflow: hidden would be the easiest method, but you should read this article to see what’s going on better:

http://gtwebdev.com/workshop/floats/enclosing-floats.php

If you want to “see” enclosement + IE bugs in action, look here in a modern browser and then IE7 (it’s missing the “float the container” solution though).

If you are already familiar with float enclosement, disregard : )

PS I’m surprised you’re floating these li’s to the left and not the right??

What is overflow: hidden doing on the li’s themselves? (just curious)
Also, why do you need !important on the widths? In general we want to avoid that since it overrides user style sheets (which a user may need to have in order to view your site properly if they have certain needs).