Re: [css-d] Clearing a float

[Todd Richards]

Thanks Thierry - I'll give that a shot.  Do I have to remove the float from
the #leftSidebar nav then?

Todd


-Original Message-
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Thierry Koblentz
Sent: Monday, October 04, 2010 11:08 PM
To: t...@promisingsites.com; css-d@lists.css-discuss.org
Subject: Re: [css-d] Clearing a float

 I have a float that is giving me problems.  You can see a test page
 here:
 http://test.magnoliasonline.com/public/gallery/before_after
 
 
 
 This particular page is simply groups of thumbnail images.  My plan 
 was to have a hr in between the groups to show that they are 
 separate.
 However,
 when I add a clear:all to the hr tag, it is actually clearing the 
 floated left column.  So it pushes my next group down the page.

This is because of your construct.

Instead of this:

#content {
margin:0 0 40px 180px;
padding:10px;
}

Try this:

#content {
display:inline-block;
margin:0 0 40px;
padding:10px;
width:783px;
}

That way your main content creates a block formatting context [1] in which
you can freely clear floats 

http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/ List policies --
http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing a float

[Thierry Koblentz]

 Thanks Thierry - I'll give that a shot.  Do I have to remove the float
 from
 the #leftSidebar nav then?

No, you'd leave the float in.
The idea is to create two block formatting contexts. The float declaration
does this for the left column, the rule I sent you does this for the right
column.
Note that you could also float both columns. That would work more or less
the same. 

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing a float

[Todd Richards]

Hi Everyone -

 

I have a float that is giving me problems.  You can see a test page here:
http://test.magnoliasonline.com/public/gallery/before_after

 

This particular page is simply groups of thumbnail images.  My plan was to
have a hr in between the groups to show that they are separate.  However,
when I add a clear:all to the hr tag, it is actually clearing the
floated left column.  So it pushes my next group down the page.

 

I know I've fixed this before but can't recall how.  If anyone would have a
second to look at it and give me some feedback, I would appreciate it.

 

Thanks!

 

Todd

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing a float

[John D]

I know I've fixed this before but can't recall how.  If anyone would have 
a

second to look at it and give me some feedback, I would appreciate it.




Di you by any chance used any one of the following to fix this:

clear: both;
clear: left;
clear: none:
clear: right;
clear: inherit;

Hope this might trigger your memory!

Good luck.


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing a float

[Todd Richards]

Hi John -

I did try them.  Anything that works first works on the floated left
column.  After that, they work fine.  I've tried the clear both on the
hr tag in the ext. CSS, as well as an inline br / tag.

Todd

-Original Message-
From: John D [mailto:xfs...@hotmail.com] 
Sent: Monday, October 04, 2010 4:47 PM
To: t...@promisingsites.com; css-d@lists.css-discuss.org
Subject: Re: [css-d] Clearing a float




 I know I've fixed this before but can't recall how.  If anyone would 
 have a second to look at it and give me some feedback, I would 
 appreciate it.



Di you by any chance used any one of the following to fix this:

clear: both;
clear: left;
clear: none:
clear: right;
clear: inherit;

Hope this might trigger your memory!

Good luck.
 


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing a float

[Thierry Koblentz]

 I have a float that is giving me problems.  You can see a test page
 here:
 http://test.magnoliasonline.com/public/gallery/before_after
 
 
 
 This particular page is simply groups of thumbnail images.  My plan was
 to
 have a hr in between the groups to show that they are separate.
 However,
 when I add a clear:all to the hr tag, it is actually clearing the
 floated left column.  So it pushes my next group down the page.

This is because of your construct.

Instead of this:

#content {
margin:0 0 40px 180px;
padding:10px;
}

Try this:

#content {
display:inline-block;
margin:0 0 40px;
padding:10px;
width:783px;
}

That way your main content creates a block formatting context [1] in which
you can freely clear floats 

http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz



__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing a float

[Thierry Koblentz]

 Di you by any chance used any one of the following to fix this:
 
 clear: both;
 clear: left;
 clear: none:
 clear: right;
 clear: inherit;

I don't think inherit is a proper value for clear.

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing a float

[Philippe Wittenbergh]

On Oct 5, 2010, at 1:09 PM, Thierry Koblentz wrote:

 I don't think inherit is a proper value for clear.

it is:
http://www.w3.org/TR/CSS21/visuren.html#flow-control

Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CLearing woes

[Tom Livingston]

Thanks David. THat did the trick. I figured I'd be sending those 2
browsers their own thing, but was hoping not to...


 *:first-child + html #fullwidth1Wrap {
 margin-top : 10px;
 } /* 4 IE/7 */

 * html #fullwidth1Wrap {
 margin-top : 10px;
 height : 110px;
 }/* 4 IE/6 */

 Best,
 ~d





-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] CLearing woes

[Tom Livingston]

List,

I am attempting to use the famed clearfix for the first time, and on
a rather complex layout (imho). Can anyone take a peek and let me know
what is wrong? I am getting extra spacing in Safari 5 mac and IE 8,
missing some space in IE 6 and getting NO spacing in IE 7.

FF 3.6.6 Mac is looking correct - for reference.

Help!

Thanks!!

-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CLearing woes

[Tom Livingston]

Can you tell I'm going completely nuts? The issue that remains is in IE 6 and 7.

[slinks away in embarrassment]



On Thu, Jul 15, 2010 at 10:32 AM, Tom Livingston tom...@gmail.com wrote:
 OMG. Time for more coffee I think...

 Here's the missing link. Sorry guys/gals...

 http://proof.mlinc.com/mlinc.com/testpages/clearing/

 I now have only one issue left. I am missing some spacing above Live
 Photostream area.

 Thanks. Sorry!


-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CLearing woes

[Tom Livingston]

UPDATE: I found a typo, and am now getting most spacing I need in IE
7, but it is still missing the same spacing as IE 6.

On Thu, Jul 15, 2010 at 10:14 AM, Tom Livingston tom...@gmail.com wrote:
 List,

 I am attempting to use the famed clearfix for the first time, and on
 a rather complex layout (imho). Can anyone take a peek and let me know
 what is wrong? I am getting extra spacing in Safari 5 mac and IE 8,
 missing some space in IE 6 and getting NO spacing in IE 7.

 FF 3.6.6 Mac is looking correct - for reference.

 Help!

 Thanks!!



-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CLearing woes

[Tom Livingston]

OMG. Time for more coffee I think...

Here's the missing link. Sorry guys/gals...

http://proof.mlinc.com/mlinc.com/testpages/clearing/

I now have only one issue left. I am missing some spacing above Live
Photostream area.

Thanks. Sorry!



On Thu, Jul 15, 2010 at 10:17 AM, Tom Livingston tom...@gmail.com wrote:
 UPDATE: I found a typo, and am now getting most spacing I need in IE
 7, but it is still missing the same spacing as IE 6.

 On Thu, Jul 15, 2010 at 10:14 AM, Tom Livingston tom...@gmail.com wrote:
 List,

 I am attempting to use the famed clearfix for the first time, and on
 a rather complex layout (imho). Can anyone take a peek and let me know
 what is wrong? I am getting extra spacing in Safari 5 mac and IE 8,
 missing some space in IE 6 and getting NO spacing in IE 7.

 FF 3.6.6 Mac is looking correct - for reference.

 Help!

 Thanks!!



 --

 Tom Livingston | Senior Interactive Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com




-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CLearing woes

[Tom Livingston]

It appears I found the error. Thanks to anyone who took the time to look.

On Thu, Jul 15, 2010 at 10:34 AM, Tom Livingston tom...@gmail.com wrote:
 Can you tell I'm going completely nuts? The issue that remains is in IE 6 and 
 7.

 [slinks away in embarrassment]



 On Thu, Jul 15, 2010 at 10:32 AM, Tom Livingston tom...@gmail.com wrote:
 OMG. Time for more coffee I think...

 Here's the missing link. Sorry guys/gals...

 http://proof.mlinc.com/mlinc.com/testpages/clearing/

 I now have only one issue left. I am missing some spacing above Live
 Photostream area.

 Thanks. Sorry!


 --

 Tom Livingston | Senior Interactive Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com




-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CLearing woes

[Tom Livingston]

I spoke too soon.

The issue, I think, revolves around this area:

#group2Wrap, #group3-4Contain{float: left;}
#group2Wrap{margin-right: 10px; margin-bottom: 10px;}
#group2_a{background-color: #fff; width: 205px; min-height: 25em;
_height: 25em;}

If I add my margin-bottom: 10px; to #group2_a, I get my desired space
I want in IE6-7 (above Live Photostream area), but it then the space
is double everywhere else, because there is already a margin-bottom on
#group2Wrap. What am I missing for IE6-7???

THanks again all...



On Thu, Jul 15, 2010 at 1:26 PM, Tom Livingston tom...@gmail.com wrote:
 It appears I found the error. Thanks to anyone who took the time to look.




-- 

Tom Livingston | Senior Interactive Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CLearing woes

[David Laakso]

Tom Livingston wrote:
 I spoke too soon.

  What am I missing for IE6-7???




   





Not sure if this is what you after? Try:


#fullwidth1Wrap {
background-color : blue;
margin-bottom : 10px;
min-height : 150px;
}/* 4 compliant browsers */

.scrollable {
background : yellow;
position : relative;
width : 915px;
height : 110px;
overflow : hidden;
float : left;
}/* 4 compliant browsers */

*:first-child + html #fullwidth1Wrap {
margin-top : 10px;
} /* 4 IE/6 */

* html #fullwidth1Wrap {
margin-top : 10px;
height : 110px;
}/* 4 IE/7 */

Best,
~d

-- 
desktop
http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] CLearing woes

[David Laakso]

Whoops. Should read:



#fullwidth1Wrap {
background-color : blue;
margin-bottom : 10px;
min-height : 150px;
}/* 4 compliant browsers */

.scrollable {
background : yellow;
position : relative;
width : 915px;
height : 110px;
overflow : hidden;
float : left;
}/* 4 compliant browsers */

*:first-child + html #fullwidth1Wrap {
margin-top : 10px;
} /* 4 IE/7 */

* html #fullwidth1Wrap {
margin-top : 10px;
height : 110px;
}/* 4 IE/6 */

Best,
~d





-- 

http://chelseacreekstudio.com/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing floats with display: table: an improvement to the Easy Clearing for the new browser generation

[Gabriele Romanato]

Hi folks,
since I'm again in the manic phase of my BD, I've done some tests that  
I've summarized in this post:

http://onwebdev.blogspot.com/2010/05/clearing-css-floats-with-css-table.html

I hope to get better soon. In the meantime, hope you can appreciate my  
efforts.
ps. you can  visit me in some psychiatric county hospital with a good  
Wi-Fi connection. :-D

Gabriele Romanato


http://www.css-zibaldone.com
http://www.css-zibaldone.com/test/  (English)
http://www.css-zibaldone.com/articles/  (English)
http://onwebdev.blogspot.com/  (English)








__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats with display: table: an improvement to the Easy Clearing for the new browser generation

[Thierry Koblentz]

Hi Gabriele,

 since I'm again in the manic phase of my BD, I've done some tests that
 I've summarized in this post:
 
 http://onwebdev.blogspot.com/2010/05/clearing-css-floats-with-css-
 table.html

The clearing is done via the creation of a new block formatting context [1],
so I don't think it is display:table that contains the float, but a
implicit display:table-cell. 

The spec says something like this: [display:table] can generate anonymous
boxes, one of them (with display:table-cell) establishes a new block
formatting context.

This may explain the issue you're experiencing with WebKit (?).

[1]
http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/

--
Regards,
Thierry
www.tjkdesign.com | www.ez-css.org | @thierrykoblentz

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats with display: table: an improvement to the Easy Clearing for the new browser generation

[Philippe Wittenbergh]

On May 24, 2010, at 1:56 AM, Gabriele Romanato wrote:

 http://onwebdev.blogspot.com/2010/05/clearing-css-floats-with-css-table.html

On May 24, 2010, at 2:52 AM, Thierry Koblentz wrote:

 The clearing is done via the creation of a new block formatting context [1],
 so I don't think it is display:table that contains the float, but a
 implicit display:table-cell. 

Indeed, display: table generates an element with display: table-cell, per 17.2.1
http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

 The spec says something like this: [display:table] can generate anonymous
 boxes, one of them (with display:table-cell) establishes a new block
 formatting context.

The spec doesn't say that exactly, but 9.4.1 explicitly says that display: 
table-cell generates a new block formatting context.
http://www.w3.org/TR/CSS21/visuren.html#block-formatting

 This may explain the issue you're experiencing with WebKit (?).

The issue in WebKit based browsers is that the element with display:table in 
the test-case is **narrower** than it should be (based on the specified width 
and padding).
I'm not 100% sure, but I think this is due to the way padding on display:table 
is handled. WebKit includes the padding in the width here (treating the element 
with display:table as if it had box-sizing: border-box set ).
http://www.w3.org/TR/css3-ui/#box-sizing
I'm not quite sure who's correct; table width algorithms are a complicated mess.

If you remove the padding on both boxes in the testcase, then all browsers fall 
in line. Similarly, if you specify 'border-collpase: collapse' for  the element 
with display: table, browser fall in line (padding does not apply in that case).

---
Side note: using display: table (or display:table-cell) to generate a new block 
formatting context (BFC) can have other unwanted effects. If the block contains 
long unbreakable strings, or elements with overflow:hidden/auto whose width 
depends on the width of the parent, the BFC-blocks width may end up very wide.
And if no width is specified on the BFC block, its width may collapse to the 
minimum intrinsic width. That is how table/display: table works.


Philippe
---
Philippe Wittenbergh
http://l-c-n.com/





__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing floats in a dl clears a previous float I didn't want cleared...

[Theophan Dort]

I am a volunteer webmaster for a couple of churches, and on one site all pages 
have a header div across the top, and below that a navigation div floated left 
with main content div flowing to its right.

One page lists parish events of which we have photos and/or video elsewhere on 
the site. Currently, I just describe those events in paragraphs with links to 
pages with the photos/video.  It works, but I recently decided it would be both 
more visually interesting and more helpful to put an illustrative photo to the 
left of the description of each event.

So instead of just paragraphs, I set up a dl with a series of list items each 
of which is as follows:
   dttitle/dt
   ddimage file/dd
   ddtext about the event/dd
and used CSS to format it, floating the dds with an img to the left, allowing 
the other dds with the descriptive text to flow to the right, and I put a 
clear float in the dt to separate them, because there wasn't always enough 
text to prevent the next list item from stacking to the right of the previous 
one. I could probably fine-tune the formatting a bit, but basically it does 
what I want.

The problem is that when I clear the dt it clears the previously left-floated 
navigation div, which forces the entire dl below that, which I don't want!  I 
tried floating the images right and clearing right on the dt which indeed 
solved that problem, but unfortunately it just looks a whole lot better to me 
with the images at the left.

I have the old/current version with just paragraphs, here:
http://www.holycrossoca.org/phot/photos.html

And the newer one I'm working on here (with just 2010, so far, in the new 
format):
http://www.holycrossoca.org/phot/photos2.html

And the newer one with the images floated right and cleared right here:
http://www.holycrossoca.org/phot/photos4.html

I could easily do this with a table, and I suppose I could convince myself that 
it's semantically tabular in that the rows are events, the left column is image 
data and the right column is text data of the event constituting each row.

But I'd rather use CSS to format this. I confess that I'm scared of using 
absolute or relative positioning because in lurking on this list, gosh it seems 
like even the professionals have trouble making those things work right, but by 
all means I'll consider all options.

Do you have any suggestions?

Many thanks!

Theophan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats in a dl clears a previous float I didn't want cleared...

[David Laakso]

Theophan Dort wrote:
 I am a volunteer webmaster for a couple of churches, and on one site all 
 pages have a header div across the top, and below that a navigation div 
 floated left with main content div flowing to its right.




 Do you have any suggestions?



 Theophan
   

Hi Theophan,

A fast and dirty suggestion. Nothing wrong with using a dl I guess. I 
just did it different.
http://chelseacreekstudio.com/ca/cssd/o.htm
CSS Embedded
Cursory checked in IE 6/78, Safari, Camino, SeaMonkey, FF.  And Mac 
Opera at 32px minimum font-size.

br class=clearfloat!--this was deleted as it is no loger needed
h2Photos and Videos from 2009/h2
Best,
~d



-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats in a dl clears a previous float I didn't want cleared...

[Theophan Dort]

 A fast and dirty suggestion. Nothing wrong with using a dl I guess. I just 
 did it different.

It works -- it's perfect!  I have to study up on that overflow hidden that 
seems to be a key in how it works even when the text in one div is short.  I'll 
go back to my books, and if I can't figure it out, I'll ask again.

MANY thanks!

Theophan
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats in a dl clears a previous float I didn't want cleared...

[David Laakso]

Theophan Dort wrote:
 A fast and dirty suggestion. Nothing wrong with using a dl I guess. I just 
 did it different.
 

 It works -- it's perfect!  I have to study up on that overflow hidden that 
 seems to be a key in how it works even when the text in one div is short.  
 I'll go back to my books, and if I can't figure it out, I'll ask again.

 MANY thanks!

 Theophan
   

O.K. This stuff drives me nuts.
http://www.w3.org/TR/CSS2/visuren.html
see css2.1-- block formatting context
9.4.1 Block formatting contexts
Floats, absolutely positioned elements, inline-blocks, table-cells, 
table-captions, and elements with 'overflow' other than 'visible' 
(except when that value has been propagated to the viewport) establish 
new block formatting contexts.

Best,
~d


-- 
desktop
http://chelseacreekstudio.com/
mobile
http://chelseacreekstudio.mobi/

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing spans?

[Chris Blake]

HI,

ul

   li class=views-row views-row-1 views-row-odd views-row-first
   span class=views-field-title
 a href=/blog-title title=This is the Blog  
Titlealt=This is the Blog TitleThis is the Blog Title/a
   /span

   span class=views-field-created
   label class=views-label-created
 Post date:
   /label
 Wed, 2009-10-14 12:49
   /span

/li /ul

How can I stop the date sitting on the same line as the title?


TITLE post date

to

TITLE
post date

I have tried to float the title and then use clear: both but it didn't  
work.

Thanks, CB
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing spans?

[Chris Blake]

I had a play around and;

.views-field-created{
color: #AA;
display: block;
}

fixed the problem.




On 26/10/2009, at 6:05 PM, Chris Blake wrote:

 HI,

 ul

   li class=views-row views-row-1 views-row-odd views-row-first
   span class=views-field-title
 a href=/blog-title title=This is the Blog
 Titlealt=This is the Blog TitleThis is the Blog Title/a
   /span

   span class=views-field-created
   label class=views-label-created
 Post date:
   /label
 Wed, 2009-10-14 12:49
   /span

 /li /ul

 How can I stop the date sitting on the same line as the title?


 TITLE post date

 to

 TITLE
 post date

 I have tried to float the title and then use clear: both but it didn't
 work.

 Thanks, CB
 __
 css-discuss [cs...@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing floats with position: relative

[Joseph Sims]

Okay, so the way I expect this to act, with my understanding of positioning, 
floats,  and clears, is not the way it acts. I want to know if there is a way I 
can get it to act right.

Basically, Is there a way to get an element to only clear floated elements 
within the same parent containing element as it is in? I thought position 
relative would do this, but it doesn't.

example (notice how the red border boxes fall down below the Side box):

head
titleClearTest/title
style type=text/css
!--
#Main .right{
clear: right;
float: right;
width: 100px;
margin: 5px;
border: thin solid #FF;
}
#Main {
width: 500px;
}
#Side {
float: right;
width: 200px;
margin-left: 10px;
border: thin solid #FF;
height: 500px;
}
--
/style
/head

body
div id=SideJust a box floated :right outside of the Main to mess up the 
clears on the right boxes/div
div id=Main
div class=rightSome image or something./div
div class=rightSome image or something./div
div class=rightSome image or something./div
div class=rightSome image or something./div
div class=rightSome image or something./div
pLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum 
justo vitae ligula pharetra sed euismod sapien sodales. Praesent eleifend velit 
vitae lacus aliquam varius. Vestibulum dolor libero, iaculis gravida fringilla 
sed, placerat a arcu. Mauris porttitor tincidunt varius. Sed vitae lectus non 
mi egestas congue. Nullam pharetra mollis interdum. Fusce vel lorem dolor, eu 
pellentesque neque. Nullam erat dolor, tempus vitae ornare et, condimentum a 
tellus. Nunc consectetur adipiscing enim, non tempor lectus commodo vel. 
Curabitur imperdiet nisi et ligula ultricies porttitor. Pellentesque dolor 
tortor, rutrum id cursus vitae, feugiat vel lectus. Curabitur tellus sem, 
laoreet sed tempor nec, hendrerit eget nisl. Lorem ipsum dolor sit amet, 
consectetur adipiscing elit. Pellentesque purus magna, vulputate eget dapibus 
ac, fringilla eu justo. Sed dolor justo, auctor at aliquet sed, tincidunt sit 
amet mi. Sed non est risus./p
pNunc risus quam, dignissim at cursus in, commodo non risus. Ut dolor ante, 
facilisis quis molestie a, adipiscing a mi. Sed lorem erat, dapibus non gravida 
a, viverra sed nulla. Cras fermentum, nisi quis tempor viverra, justo magna 
condimentum lectus, sit amet dapibus magna sapien sed eros. Fusce ornare erat 
nec orci feugiat euismod. Mauris elit enim, ornare ut convallis ac, dictum non 
ligula. Quisque at ante risus, non volutpat risus. Nullam lobortis dignissim 
mauris, at facilisis magna scelerisque sit amet. Pellentesque lobortis, orci 
sit amet tincidunt imperdiet, lorem est faucibus urna, eu tincidunt felis leo 
sed odio. Fusce in ligula id arcu sollicitudin accumsan./p
pMauris felis metus, hendrerit at convallis vitae, fringilla id tortor. Cum 
sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
mus. Suspendisse potenti. Phasellus tempus cursus magna, et pharetra libero 
vestibulum vitae. Vestibulum porttitor placerat diam, a posuere nulla mattis 
non. Aliquam eleifend blandit odio, vel interdum sapien tincidunt eget. 
Phasellus pellentesque magna et elit sagittis volutpat. Ut metus ante, 
porttitor eu iaculis quis, molestie sit amet purus. Aenean sit amet tortor dui, 
et feugiat sem. Suspendisse ac est at felis ultricies laoreet non ut nulla. 
Aenean condimentum adipiscing elit vel laoreet. Curabitur faucibus nisi ac 
risus vestibulum iaculis. Aenean iaculis metus eu orci vestibulum molestie. Nam 
felis est, faucibus sit amet congue non, imperdiet id lectus. Proin imperdiet 
pharetra blandit./p 
/div
/body
/html



  
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing floats with position: relative

[Christian Kirchhoff]

Joseph Sims schrieb:
 Okay, so the way I expect this to act, with my understanding of positioning, 
 floats,  and clears, is not the way it acts. I want to know if there is a way 
 I can get it to act right.

 Basically, Is there a way to get an element to only clear floated elements 
 within the same parent containing element as it is in? I thought position 
 relative would do this, but it doesn't.

 example (notice how the red border boxes fall down below the Side box):

 head
 titleClearTest/title
 style type=text/css
 !--
 #Main .right{
 clear: right;
 float: right;
 width: 100px;
 margin: 5px;
 border: thin solid #FF;
 }
 #Main {
 width: 500px;
 }
 #Side {
 float: right;
 width: 200px;
 margin-left: 10px;
 border: thin solid #FF;
 height: 500px;
 }
 --
 /style
 /head

 body
 div id=SideJust a box floated :right outside of the Main to mess up the 
 clears on the right boxes/div
 div id=Main
 div class=rightSome image or something./div
 div class=rightSome image or something./div
 div class=rightSome image or something./div
 div class=rightSome image or something./div
 div class=rightSome image or something./div
 pLorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum 
 justo vitae ligula pharetra sed euismod sapien sodales. Praesent eleifend 
 velit vitae lacus aliquam varius. Vestibulum dolor libero, iaculis gravida 
 fringilla sed, placerat a arcu. Mauris porttitor tincidunt varius. Sed vitae 
 lectus non mi egestas congue. Nullam pharetra mollis interdum. Fusce vel 
 lorem dolor, eu pellentesque neque. Nullam erat dolor, tempus vitae ornare 
 et, condimentum a tellus. Nunc consectetur adipiscing enim, non tempor lectus 
 commodo vel. Curabitur imperdiet nisi et ligula ultricies porttitor. 
 Pellentesque dolor tortor, rutrum id cursus vitae, feugiat vel lectus. 
 Curabitur tellus sem, laoreet sed tempor nec, hendrerit eget nisl. Lorem 
 ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque purus magna, 
 vulputate eget dapibus ac, fringilla eu justo. Sed dolor justo, auctor at 
 aliquet sed, tincidunt sit amet mi. Sed non est risus./p
 pNunc risus quam, dignissim at cursus in, commodo non risus. Ut dolor ante, 
 facilisis quis molestie a, adipiscing a mi. Sed lorem erat, dapibus non 
 gravida a, viverra sed nulla. Cras fermentum, nisi quis tempor viverra, justo 
 magna condimentum lectus, sit amet dapibus magna sapien sed eros. Fusce 
 ornare erat nec orci feugiat euismod. Mauris elit enim, ornare ut convallis 
 ac, dictum non ligula. Quisque at ante risus, non volutpat risus. Nullam 
 lobortis dignissim mauris, at facilisis magna scelerisque sit amet. 
 Pellentesque lobortis, orci sit amet tincidunt imperdiet, lorem est faucibus 
 urna, eu tincidunt felis leo sed odio. Fusce in ligula id arcu sollicitudin 
 accumsan./p
 pMauris felis metus, hendrerit at convallis vitae, fringilla id tortor. Cum 
 sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 
 mus. Suspendisse potenti. Phasellus tempus cursus magna, et pharetra libero 
 vestibulum vitae. Vestibulum porttitor placerat diam, a posuere nulla mattis 
 non. Aliquam eleifend blandit odio, vel interdum sapien tincidunt eget. 
 Phasellus pellentesque magna et elit sagittis volutpat. Ut metus ante, 
 porttitor eu iaculis quis, molestie sit amet purus. Aenean sit amet tortor 
 dui, et feugiat sem. Suspendisse ac est at felis ultricies laoreet non ut 
 nulla. Aenean condimentum adipiscing elit vel laoreet. Curabitur faucibus 
 nisi ac risus vestibulum iaculis. Aenean iaculis metus eu orci vestibulum 
 molestie. Nam felis est, faucibus sit amet congue non, imperdiet id lectus. 
 Proin imperdiet pharetra blandit./p 
 /div
 /body
 /html



   
 __
 css-discuss [cs...@lists.css-discuss.org]
 http://www.css-discuss.org/mailman/listinfo/css-d
 List wiki/FAQ -- http://css-discuss.incutio.com/
 List policies -- http://css-discuss.org/policies.html
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
   
Hello,

you could define float:left; or position: absolute; for #Main. 
Either way will cause the clears of the inner objects only to be 
influenced by the other floated objects within #Main, but not by #Side.

Christian
*Editura Gesellschaft für Verlagsdienstleistungen mbH*
Tempelhofer Damm 2 · 12101 Berlin
www.editura.de
AG Berlin-Charlottenburg · HR B 81823 · USt.Id. DE217180548
Geschäftsführer: Ralf Szymanski

__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing floats with position: relative

[Joseph Sims]

 Joseph Sims:

  Okay, so the way I expect this to act, with my understanding of 
  positioning, 
 floats,  and clears, is not the way it acts. I want to know if there is a way 
 I 
 can get it to act right.
 
  Basically, Is there a way to get an element to only clear floated elements 
 within the same parent containing element as it is in? I thought position 
 relative would do this, but it doesn't.
 

 Hello,
 
 you could define float:left; or position: absolute; for #Main. 
 Either way will cause the clears of the inner objects only to be 
 influenced by the other floated objects within #Main, but not by #Side.
 
 Christian

Yeah, that would work in this situation, but in my actual implementation there 
is quite a bit more going on. I really feel like you SHOULD be able to define a 
clear to being relative to it's parent box, or being relative to the entire 
page. Just as you can with relative positioning. CSS3 should take this into 
consideration. Mr. Meyer, can you push this one through please? ;-)

Any other insights from anyone?

~ Joseph  



  
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing problem...only on Vista machines??

[Suzie Henderson]

On Sun, Dec 7, 2008 at 3:22 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:

 Suzie Henderson wrote:

  http://www.txfannin.org/cemeteries


  http://www.txfannin.org/screenshot.jpg


 Can't reproduce that at my end, neither on or off line.
 A simpler and more friendly solution would be to add...

 #leftcol {margin-bottom: -1px;}

 ...which simply makes #leftcol take up no space - removed float.
 regards
Georg


Just got word from the next county over!  Worked like a charm!

Thanks, Georg
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing problem...only on Vista machines??

[Suzie Henderson]

Every one of my cemetery pages has a left column of maps and links. Then
the main content starts with a Headline and a large photo at the top.  I
recently discovered that the large photos are sometimes being pushed down to
be even with the bottom of the content of the left column.  I suspect
something needs to be cleared but I am unsure of what clearing needs to
happen (clear the photo? clear the left right on the left column?) and I
can't test to troubleshoot.

I think it is only happening on machines running Vista.  I have been unable
to replicate the problem except on newer pcs running IE7 but I THINK I also
had the problem with Firefox on one Vista machine. (I may be confused on
that one.) I work on a Mac and only occasionally have access to a Vista
machine. Netrenderer displays the pages fine on all versions of IE so they
must not be running Vista.

Pages that have text entered below the headline but above the photo don't
seem to have the display problem.

Direct links to some sample cemeteries:
http://www.txfannin.org/cemeteries/ceme-blanton/index.html
http://www.txfannin.org/cemeteries/ceme-cedarhill/index.html
http://www.txfannin.org/cemeteries/ceme-hudsonville/index.html

http://www.txfannin.org/styles1.css

Home page: http://www.txfannin.org
Main Cemetery Page: http://www.txfannin.org/cemeteries (with links to more
samples)

Thanks in advance,
Suzie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing problem...only on Vista machines??

[Gunlaug Sørtun]

Suzie Henderson wrote:
 http://www.txfannin.org/cemeteries

 I recently discovered that the large photos are sometimes being 
 pushed down to be even with the bottom of the content of the left 
 column.

When window-width shrinks below a certain width, the wide image drops
below left column. The content area then continues to shrink as the
window is narrowed further.
Happens in all IE/win versions, regardless of OS - tested in IE6
(win2K), IE7 (XP  Vista) and IE5.5 to IE8b2 (IETester on XP).

Only cure seems to be to declare a 'min-width' on #content or body -
value depends on image-size, which saves IE7 and above. Doesn't help on
IE6 and lower though.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing problem...only on Vista machines??

[Suzie Henderson]

On Sun, Dec 7, 2008 at 1:05 PM, Gunlaug Sørtun [EMAIL PROTECTED] wrote:

 Suzie Henderson wrote:

 http://www.txfannin.org/cemeteries


  I recently discovered that the large photos are sometimes being pushed
 down to be even with the bottom of the content of the left column.


 When window-width shrinks below a certain width, the wide image drops
 below left column. The content area then continues to shrink as the
 window is narrowed further.
 Happens in all IE/win versions, regardless of OS - tested in IE6
 (win2K), IE7 (XP  Vista) and IE5.5 to IE8b2 (IETester on XP).

 Only cure seems to be to declare a 'min-width' on #content or body -
 value depends on image-size, which saves IE7 and above. Doesn't help on
 IE6 and lower though.

 regards
Georg
 --
 http://www.gunlaug.no


Thanks for the heads up on that one BUT...

The first time I discovered the problem was on a 27inch monitor at full
window.  I design on a 15 inch screen to be sure not to go too wide with my
layout.

With the window filling the full width of the wide screen monitor, the
headline is at the top of the page and the photo is down even with the end
of the information in the left column. It's behaving just like something is
not cleared.

It happened on the Vista machine owned by the Wicked Step Mother (WSM). It
happened yesterday at the Library and it happens on a brand new machine just
purchased by a friend in the next county over.  None of these machines are
readily accessible to me to make a screen shot for you.

Here's one a faked to show you the alignment... it is consistently right at
the end of the left column content...

http://www.txfannin.org/screenshot.jpg

The only pages that display correctly are those that have text after the
headline but before the photo. Then it works fine. (I've considered typing
the word hack in a font matching the background color above every photo!
It would likely play hell with screen readers but would get my photos up
where they belong!)

Suzie
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing problem...only on Vista machines??

[Gunlaug Sørtun]

Suzie Henderson wrote:

 http://www.txfannin.org/cemeteries

 http://www.txfannin.org/screenshot.jpg

Can't reproduce that at my end, neither on or off line.

It is probably caused by IE being unable to determine the size of the
image correctly in time, in relation to the space it's given by CSS. If
so, then it's a complex timing-issue for loading and rendering, and may
well be tied to a particular browser-version/OS combination.

 The only pages that display correctly are those that have text after 
 the headline but before the photo. Then it works fine. (I've 
 considered typing the word hack in a font matching the background 
 color above every photo! It would likely play hell with screen 
 readers but would get my photos up where they belong!)

A simpler and more friendly solution would be to add...

#leftcol {margin-bottom: -1px;}

...which simply makes #leftcol take up no space - removed float. Then
IE won't have anything to drop the image below, so it should stay up
there where it belongs. No other style or source-code modifications
necessary.

Provided the #content area is _always_ taller than #leftcol, that'll
solve all drop-problems all IE/win versions may have, and won't disturb
more decent browsers since they'll interpret removed float the same way.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing a CSS float

[Ingo Chao]

Bill Brown wrote:
 ...
 Try this:
 ul, li {
list-style: none;
margin: 0;
padding:0;
}
 ul {
display:inline-block; /* IE Float Clear, Part 1 */
overflow:   hidden;   /* Float Clear */
}
 ul {
display:block;/* IE Float Clear, Part II */
}
 li {
display:inline;   /* IE Double Margins Bug Fix */
float:  left;
padding:0 10px 0 0;
}
 
 That should put anything after the UL below the UL. The only time this 
 fix won't work obviously is if you're using a fly-out menu. In that 
 case, you can leave the IE fix in place, but would need to adjust the 
 fix for other browsers using the :after pseudo element on the UL.
 

I would not recommend this inline-block/block trip-switch combination. 
It is complicated, and someone who does not know about this peculiar 
hasLayout-sidenote (that is, display:inline-block sets haslayout in a 
silent way that cannot be reset later on) won't understand it no matter 
what or how much you are commenting at its side.

For the 17 lines of code, 5 are just because of IE 6. From an conformant 
browser's point of view, the code is hermetic and makes not much sense.

To makes things worse, the overflow-clearing is far from 
self-explaining. So maintaining this code will lead to further questions 
or further bugs. It should not be that difficult to clear something in CSS.

I'm not saying the code would be bad or would not work. I am using the 
word hermetic here as Those who could understand this code would not 
have to ask for it.

Ingo

-- 
http://www.satzansatz.de/css.html
http://www.dolphinsback.com
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing a CSS float

[Luther Baker]

I often run into something like this:

ul id=menu
   lia href=..Link A/a/li
   lia href=..Link B/a/li
/ul

h1Fancy Title/h1
pBlah blah blah ... /p

Where I am using floats in the ul menu above. This happens when I am using
columns as well.

The problem is that h1 shows up just to the right of the menu.

To try and correct that - I've added h1 { clear: both } but this obviously
doesn't work. If I wrap the h1 in a div, then all is well if the div has
style=clear: both ... but that sounds like html for the sake of style.

I'd like to keep layout OUT of the html but I'm not sure what the common
approach is here ... I've even gone as far as adding

div style=clear: bothnbsp;/div to get out of float mode ... which
works great ... but isn't elegant and not in the spirit of CSS at all.

Thoughts?

-Luther


*
HOPED FOR:*

*LinkA*   *LinkB*

*Fancy Title
*
Blah Blah





*ACTUAL (not exactly, but similar):*

*LinkA*   *LinkB** Fancy Title
*
Blah Blah






*Current CSS:
*

ul,
ul li
{
list-style: none;
float: left;
margin: 0;
padding: 0;
}

ul li
{
display: block;
float: left;
padding-right: 10px;
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing a CSS float

[Bill Brown]

Luther Baker wrote:
 ul id=menu
lia href=..Link A/a/li
lia href=..Link B/a/li
 /ul
 h1Fancy Title/h1
 pBlah blah blah ... /p
 Current CSS:
 ul,
 ul li
 {
 list-style: none;
 float: left;
 margin: 0;
 padding: 0;
 }
 ul li
 {
 display: block;
 float: left;
 padding-right: 10px;
 }

Hi Luther,

Try this:
ul, li {
   list-style: none;
   margin: 0;
   padding:0;
   }
ul {
   display:inline-block; /* IE Float Clear, Part 1 */
   overflow:   hidden;   /* Float Clear */
   }
ul {
   display:block;/* IE Float Clear, Part II */
   }
li {
   display:inline;   /* IE Double Margins Bug Fix */
   float:  left;
   padding:0 10px 0 0;
   }

That should put anything after the UL below the UL. The only time this 
fix won't work obviously is if you're using a fly-out menu. In that 
case, you can leave the IE fix in place, but would need to adjust the 
fix for other browsers using the :after pseudo element on the UL.

Hope it helps.
Bill



-- 
~~~
Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
The intuitive mind is a sacred gift and the rational mind is a
faithful servant. We have created a society that honors the servant and
has forgotten the gift. -- Albert Einstein
~~~
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing a CSS float

[Luther Baker]

Wow!

Krystian - h1 doesn't seem to clear for me by default (XHTML strict,
firefox) - but when I explicitly include it - it DOES work. I mistyped it
earlier but thanks to you, I revisited it and noticed ':' instead of ';'

Bill - wow! Now that's what I was looking for. Only the LIs are floating so
it makes perfect sense that UL starts and closes that box.

Super! Thanks so much!

-Luther



On Fri, Sep 19, 2008 at 2:08 PM, Bill Brown [EMAIL PROTECTED] wrote:

 Luther Baker wrote:

 ul id=menu
   lia href=..Link A/a/li
   lia href=..Link B/a/li
 /ul
 h1Fancy Title/h1
 pBlah blah blah ... /p
 Current CSS:
 ul,
 ul li
 {
list-style: none;
float: left;
margin: 0;
padding: 0;
 }
 ul li
 {
display: block;
float: left;
padding-right: 10px;
 }


 Hi Luther,

 Try this:
 ul, li {
  list-style: none;
  margin: 0;
  padding:0;
  }
 ul {
  display:inline-block; /* IE Float Clear, Part 1 */
  overflow:   hidden;   /* Float Clear */
  }
 ul {
  display:block;/* IE Float Clear, Part II */
  }
 li {
  display:inline;   /* IE Double Margins Bug Fix */
  float:  left;
  padding:0 10px 0 0;
  }

 That should put anything after the UL below the UL. The only time this fix
 won't work obviously is if you're using a fly-out menu. In that case, you
 can leave the IE fix in place, but would need to adjust the fix for other
 browsers using the :after pseudo element on the UL.

 Hope it helps.
 Bill



 --
 ~~~
 Bill Brown, MacNimble.com :: From dot concept to dot com since 1999
 WebDevelopedia.com, TheHolierGrail.com, Cyber-Sandbox.com, Anytowne.com
 The intuitive mind is a sacred gift and the rational mind is a
 faithful servant. We have created a society that honors the servant and
 has forgotten the gift. -- Albert Einstein
 ~~~

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing a float

[Gunlaug Sørtun]

Christina Hawkins :: GlobalSpex wrote:
 I just can't seem to wrap my head around IE and it's reasons for not 
 letting my clearfloat div make my 2 columns play nice. IE is 
 causing my MainContent1 to be placed below the leftcolumn1 div.
 
 Index: http://www.globalspex.com/clients/ti/index.php

HasLayout[1] triggers in the form of specific width on a container with
margins and IE/win's old 3px jog bug, all in tight corners, makes IE6
run out of space pretty quickly.

Delete 'width: 590px;' on #mainContent, and IE6 will play somewhat nice.
The 3px jog bug is still there though.


Alternatively - and *much* better, turn #mainContent into a float, by
using these styles...

#mainContent {
padding: 5px;
float: right;
margin: 0 -20px 0 0;
width: 600px;
background: #efefef;
}

...which will make IE6 play a lot nicer and render identical to other
browsers.

regards
Georg

[1]http://www.satzansatz.de/cssd/onhavinglayout.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing a float

[Alan Gresley]

Christina Hawkins :: GlobalSpex wrote:
 Hello. 
 I just can't seem to wrap my head around IE and it's reasons for not letting
 my clearfloat div make my 2 columns play nice. IE is causing my
 MainContent1 to be placed below the leftcolumn1 div.
 
 Index: http://www.globalspex.com/clients/ti/index.php 
 CSS: http://www.globalspex.com/clients/ti/style_main.css 
 
 Any help is greatly appreciated.
 
 -Christina



#leftcolumn1 {
float: left;
width: 190px;
}


#mainContent {
margin: 0 0 0 190px;
padding: 5px;
width:590px; /* hasLayout [1] trigger */
}

190px + 590px + 10px = 790px

#container {
width: 780px;
overflow: hidden; /* a clue [2] */
}


What do you think the the good browsers are doing? IE5.5, IE6, IE7 all 
shows a differences but they all have the same problem with the above CSS.


[1] http://www.satzansatz.de/cssd/onhavinglayout.html
[2] http://www.w3.org/TR/CSS21/visufx.html#overflow


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing a float

[Christina Hawkins :: GlobalSpex]

Hello. 
I just can't seem to wrap my head around IE and it's reasons for not letting
my clearfloat div make my 2 columns play nice. IE is causing my
MainContent1 to be placed below the leftcolumn1 div.

Index: http://www.globalspex.com/clients/ti/index.php 
CSS: http://www.globalspex.com/clients/ti/style_main.css 

Any help is greatly appreciated.

-Christina

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing non-floats

[Brian Cummiskey]

Hi guys,

i'm trying to get rid of a br / I have to split up some footer text.

I'm currently using:


div id=footer_nav
h2a href=#Link1 /a/h2
h2a href=#Link2 /a/h2
h2 class=lasta href=#Link3 /a/h2  
br /
h2a href=#Link4 /a/h2
h2 class=lasta href=#Link5 /a/h2
br /
h2a href=#Link6/a/h2
h2 class=lasta href=#Link 7/a/h2
   /div

#footer_nav h2 {
display: inline;
padding: 0 6px;
border-right: 1px solid #000;
}

#footer_nav h2.last {
border-right: none;
}


the class of last removes the right border and I end up with a nice 3 
row list:

Link1 | Link2 | Link3
Link4 | Link5
Link6 | Link7



Using this same 'last' class, can I apply a clearing element of some 
sort, so that I can take the br / out of the xhtml?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing problem on footer

[Ian Young]

 Hi List,
  working on a new css layout and now i have a clearing Problem on the
 Footer in IE7 and 6 here. I cant really figure out whats going on :(

 http://www.pessewenk.de/neu/?page=kontakt

 Thanks in advance,
 Martin

Hi Martin

First off, 26 errors in your mark-up which will not be helping.

http://validator.w3.org/check?verbose=1uri=http%3A%2F%2Fwww.pessewenk.de%2F
neu%2F%3Fpage%3Dkontakt

Sort these out first and then we can look at problem more closely.

Cheers

Ian
No virus found in this outgoing message.
Checked by AVG Free Edition.
Version: 7.5.476 / Virus Database: 269.11.2/931 - Release Date: 01/08/2007
16:53

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing absolutely positioned elements

[Shelly]

I know I don't contribute a lot to this list (kind of hard to offer 
advice when you're in the ranks that some of you all are in - I 
sometimes feel like a Private standing in front of Patton, if you know 
what I mean) - but I found something I thought was interesting.

I was having an issue with an experiment someone laid on the the other 
day, and I was - for a short time - looking for a way to clear an 
absolutely positioned div in the same way you could clear a float.  I 
was pretty sure it couldn't be done (in fact, in my search, I found a 
response from Ingo to a thread written a little over a year ago that 
specified no to this exact question - which sort of made it a definite 
for me).

However, I *did* find this:

http://www.shauninman.com/assets/examples/si-clear-absolutes-1.6/nested.html

Now, I haven't given it a good look, and I only tested it in Firefox 2.0 
and IE 6 and 7.  But whatever it is this guy did, it seems to work.  I 
was wondering if I could get some alternate thoughts on this method. 
Where could you see it being bad to use?  Has anyone seen anything 
like this before? (and for the record, I don't know what the CDATA is 
for, or what effect it has on this method...)

I thought it was pretty interesting, and just wanted to get some input 
on what you all thought of it.

~Shelly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing absolutely positioned elements

[Roger Roelofs]

Shelly,

On Jun 9, 2007, at 1:54 PM, Shelly wrote:

 I know I don't contribute a lot to this list (kind of hard to offer
 advice when you're in the ranks that some of you all are in - I
 sometimes feel like a Private standing in front of Patton, if you know
 what I mean) - but I found something I thought was interesting.
I know how you feel.  I felt the same way a few years ago and Zoe had  
to push me to participate on-list.

 I was having an issue with an experiment someone laid on the the  
 other
 day, and I was - for a short time - looking for a way to clear an
 absolutely positioned div in the same way you could clear a float.  I
 was pretty sure it couldn't be done (in fact, in my search, I found a
 response from Ingo to a thread written a little over a year ago that
 specified no to this exact question - which sort of made it a  
 definite
 for me).

 However, I *did* find this:

 http://www.shauninman.com/assets/examples/si-clear-absolutes-1.6/ 
 nested.html
Ingo is still right.  This page is just absolutely positioning  
everything and using overflow hidden to keep things from  
overlapping.  But that means text is lost/hidden if it can't fit (try  
increasing your tet size to see what I mean).  It may look like  
clearing, but it isn't.

-- 
Roger Roelofs



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing absolutely positioned elements

[Audra Coldiron]

 Ingo is still right.  This page is just absolutely positioning  
 everything and using overflow hidden to keep things from  
 overlapping.  But that means text is lost/hidden if it can't fit (try  
 increasing your tet size to see what I mean).  It may look like  
 clearing, but it isn't.

I could be wrong (wouldn't be the first time) but it looks to me like 
it's all done with iframes and javascript.  I'm not sure what the 
advantage of doing things this way would be as opposed to simply using 
floats but it was interesting none the less :-)

AC
-- 
Audra Coldiron

Rock-n-Roll Design  Hosting
http://rock-n-roll-design.com

KarmaCMS ( http://karmawizard.com ) - the ultimate CSS styled CMS. 
Pre-made designs, designer tools, and reseller program available!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing absolutely positioned elements

[Shelly]

Thanks for that - I didn't even notice it was doing that.  Too bad, 
though - I was all excited there for a second ;)

~Shelly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing div - when does it require a nbsp

[Conjurer]

In another thread I saw a note reproduced below suggesting use of a 
clearing div.  I have seen clearing divs with and without a non-breading 
space nbsp

What browsers require the nbsp to make this work correctly?

James Gadrow wrote:
 To fix this add a clearing element below your content divs such as (of 
 course, you should make the style for the clear element external to be 
 of most use):

 div class=container
 div class=content
 !-- content goes here --
 /div
 div class=content
 !-- content goes here --
 /div
 div class=clear style=clear: left; nbsp;
 /div
 /div

   

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing div - when does it require a nbsp

[Melianor]

The clearing div, should if possible not contain any letter, or HTML
element at all, but some browsers, specifically IE 6 and lower will
try to apply, default line-height, font-size and so on, although there
is no content present, meaning that the clearing div will then occupy
some space and so leave gaps between various elements, where none
should be.

Another way to circumvent this, is to simply play !-- -- comment
tags inside the clearing div. Also be sure to add some CSS attributes
to the clearing div, like line-height: 0; height: 1px; and others
that will override possible default styles for content.

regards, Jens

-- 
So long, and thanks for all the fish!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing issue

[Shelly]

I was wondering if someone could help me here.  I'm styling out a CMS 
right now (using WordPress) and I've been asked to do a little avatar 
thing for each person that writes a post.  I'm using a rounded corners 
method I found here at CSS-D (and works very well, by the way), and for 
this case, I needed to float the section right.  I'm also using the 
.clearfix method to clear my floats - which also works well.

However I have an odd instance, where, if a post is very short, the 
avatar section overlaps the whole content section, rather than being 
contained inside of it.  I know the float is what's doing it, but none 
of my clearing methods wan to take hold (I've even tried an hr 
class=clearing / method, which didn't work, either - not the :after 
trick, but the actual .clearing {clear:right;} thing.)

http://anekostudios.com/help/ provides a list of the files you need if 
anyone feels like offering a hand here.  I can't name who the client is, 
so I had to provide a screenshot to remove names (help.jpg), so you 
could see the problem.  The help-code.txt file is the HTML output from 
the CMS - it's exactly what you'd see if you viewed the source code of 
the page in question.  The other two are the two stylesheets that affect 
this page.

I've tried various methods to clear the float, but I can't seem to get 
the content bottom to push past my floated avatar.  I don't *want* to 
set a min-height for the content area, but if that's the only method 
that will work, it's what I must do (it's the only other thing I can 
think of to do).  But I'm hoping someone here can help me figure out 
what I'm overlooking, 'cause y'all are smarter than I am. ;)

Thanks for any help you can give :)

~Shelly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing issue

[Mauricio Samy Silva]

- Original Message - 
From: Shelly [EMAIL PROTECTED]
To: CSS-D css-d@lists.css-discuss.org
 http://anekostudios.com/help/
 I've tried various methods to clear the float, but I can't seem to get
 the content bottom to push past my floated avatar.  I don't *want* to
 set a min-height for the content area, but if that's the only method
 that will work, it's what I must do (it's the only other thing I can
 think of to do).  But I'm hoping someone here can help me figure out
 what I'm overlooking, 'cause y'all are smarter than I am. ;)
---
Hi Shelly,
Use the following to clear the div.entry

div.entry  {width:100%; overflow:auto;}

Regards,

Maurício Samy Silva
http://www.maujor.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing issue

[Shelly]

 Use the following to clear the div.entry

div.entry  {width:100%; overflow:auto;} 

I *love* you!  Thank you so much :)

~Shelly
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing only a nested float

[martin f krafft]

Hi there,

I am trying to clear after a right-float inside a div which has
something floating to it's right too. E.g.:

  div id=1
  div id=2
ul id=2.1 /
pSome text/p
  /div

1 floats to the right of 2, and 2.1 should align with the right
border of 2, so I floated it right. This works, even if 2.1 has
nothing to float right against.

The problem is when I try to add the p, since it will appear left
of 2.1. However, I want it to appear *below*. But if I set
clear:right on the p, it also clears the right wrt 1 and thus p
will appear at the very bottom of the page, below the content of
1 (but inside 2).

Example page:

  http://martin-krafft.net/new/ [valid]
  CSS: http://martin-krafft.net/new/css/base.css [valid]

How can I achieve what I want, without assuming the height of the
ul (and ideally without hardcoding a width)?

I tried making the ul (2.1) inline and text-aligning it right, but
that does not work either. And neither does
position:relative;right:0

-- 
martin;  (greetings from the heart of the sun.)
  \ echo mailto: !#^.*|tr * mailto:; [EMAIL PROTECTED]
 
spamtraps: [EMAIL PROTECTED]
 
whoever fights monsters should see to it that in the process he does
 not become a monster. and when you look into an abyss, the abyss also
 looks into you.
 - friedrich nietzsche


signature.asc
Description: Digital signature (GPG/PGP)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing only a nested float

[martin f krafft]

also sprach martin f krafft [EMAIL PROTECTED] [2007.03.13.2110 +0100]:
   http://martin-krafft.net/new/ [valid]
   CSS: http://martin-krafft.net/new/css/base.css [valid]

Never mind that IE* barfs on the page big time. I am just doing some
design studies right now and will probably simplify the layout by
much later.

-- 
martin;  (greetings from the heart of the sun.)
  \ echo mailto: !#^.*|tr * mailto:; [EMAIL PROTECTED]
 
spamtraps: [EMAIL PROTECTED]
 
the less you know about computers the more you want micro$oft!
-- micro$oft ad campaign, circa 1996
(proof that micro$oft's advertising _isn't_ dishonest!)


signature.asc
Description: Digital signature (GPG/PGP)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing floats in same DIV but not external floats...

[Michael Stevens]

I've got a normal 3 column layout with a header, left menu floated left,
right menu floated right, and content DIV with margins equal to the left 
right menus so it's centered. I don't have the current incarnation up but
you can see a moderatly close sample of what I'm doing at
www.bctphoenix.com. The current site IS NOT XHTML/CSS but tables and I'm
working on a remake to fix that.

Inside the content DIV I've got other images that are floated with text to
the right of them (see the Sales  Marketing and Product Offerings tabs).
The images are floated and the text to the right is variable. There may be
extra white space at the end of the text. This extra space can cause the
next tab underneath it to flow under the text and not to the left of the
DIV.

Here is the DIV and CSS inside the content DIV:
div class=tabimg src=/images/marketing.gif width=225 height=22
alt=Marketing //divbr /

div class=infoimg src=images/marketing.jpg width=190 height=150
alt=Marketing /
span class=indenttext.../span
/div

div.tab {display: block;margin: 0px;padding: 0px;border-bottom: 1px solid
#00;clear: left;}
div.info {padding: 5px 0px;margin: auto 0px;}
div.info img {float: left;margin: 5px 10px 5px 0px;}

I can clear: left; the tab DIV but if, at some point, I remove some of the
images above the tabs it will cause the first tab to completely clear the
left menu leaving a lot of white space.

I want the tab DIV to clear the other items in the content DIV but not to
worry about the leftmenu DIV. Can I do this any other way besides adding br
/ after the text to force the next tab to start on a new line?

Mike


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats in same DIV but not external floats...

[Gunlaug Sørtun]

Michael Stevens wrote:
 I've got a normal 3 column layout with a header, left menu floated 
 left, right menu floated right, and content DIV with margins equal to
  the left  right menus so it's centered.
[...]
 I want the tab DIV to clear the other items in the content DIV but 
 not to worry about the leftmenu DIV. Can I do this any other way 
 besides adding br / after the text to force the next tab to start 
 on a new line?

Add 'clear: both' to the next tab..?

Imagining that your 'content DIV' is addressed by '#content' in your
stylesheet, try adding...

#content {overflow: hidden;}
* html #content {overflow: visible;}

...which will let you add 'clear: both' - or any kind of clearers -
inside the 'content DIV', without having to worry about 'leftmenu DIV'.

The above addition is establishing a new 'block formatting contexts'[1]
which will isolate children of that 'content DIV' from all elements
outside it. The '* html' addition is there to save older IE versions
from something they don't understand and might mishandle.

IE6 and older may need more help, but I can't say without seeing the
actual layout.

regards
Georg

[1]http://www.w3.org/TR/CSS21/visuren.html#q15
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing

[Raymond Rodriguez]

First, thank you guys for being so helpful. I've greatly appreciated  
the assistance you've given me.

Well I'm stumped again. I'm having a problem with clearing a small  
floated div that contains one image and a brief caption underneath.  
The div floats just before a paragraph, which wraps nicely around  
it...except for the bullets of the UL that's within that paragraph.  
They get caught behind the caption only.

Here's what it looks like and here's the CSS.

I read a great article about clearing HERE but it doesn't seem to  
work for this unless I bungled the directions. Specifically, I added  
this to my css page and then included the selector clearfix in the  
div:

.clearfix:after {
 content: .;
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */

And here's the html:

div id=inlinePhoto class=imageLavendarWomen clearfixh4Pioneer  
Founders are instrumental in providing leadership and direction to  
the Foundation/h4/div

Also, notice that in the html I put this for the floating div. It has  
an ID as well as two classes. Is this a bad idea?

Thanks,

Raymond 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing

[Ed Seehouse]

On 10/30/06, Raymond Rodriguez [EMAIL PROTECTED] wrote:

 Well I'm stumped again. I'm having a problem with clearing a small
 floated div that contains one image and a brief caption underneath.
 The div floats just before a paragraph, which wraps nicely around
 it...except for the bullets of the UL that's within that paragraph.

Stop right there.  So far as I know in any recent version of html a UL
inside a paragraph is illegal html.  P elements can contain only
inline elements, and a UL is a block element.  Since CSS is designed
to apply to valid html or xhtml there's no telling how any particular
browser will apply any particular CSS rule to your invalid code.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing a table

[Zoe M. Gillenwater]

Ross Hulford wrote:
 I have some text above and below a table but the bottom text wraps around the 
 table. How to I clear the table on both ends in the cleanest way possible- 
 not clearing div or wapping the text in tags.
   

It sounds like you want to add a clear to the text below the table, not 
to the table itself. But we need to see a page to be able to help you. 
Please send the list a URL.

Thanks,
Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing a table

[Ross Hulford]

I have some text above and below a table but the bottom text wraps around the 
table. How to I clear the table on both ends in the cleanest way possible- not 
clearing div or wapping the text in tags.




Ross


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing logo in print output

[Maren Child]

This is so silly, I can't clear the logo in the print output. I did have 
it, briefly and only in Firefox, but then I changed something to fix it 
in IE and it's not clearing again.

I can't see why the clearing div isn't working, since it works on the 
screen.

Thanks
Maren

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats problem: Comment after clear element messes up clearing in IE?

[francky]

francky wrote:

[...]
According to browsershots.org:

* Opera 9.01 on Ubuntu Dapper (Linux): not ok, bottom corners + some 
more cut off (why?? / what to do??)
  See: 
http://browsershots.org/screenshots/1b7ac1e86d9c68f9f50719a37ea1cb1a/
  

Without changing the essentials of the page, for safety I asked 
Browsershots again.
Now all of a sudden Opera 9.01 on Ubuntu Dapper is fine!
See: http://browsershots.org/screenshots/8a7aab74ce656254e5920ab05f505282/
O wonder! :-)

francky

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats problem: Comment after clear element messes up clearing in IE?

[francky]

Arian Hojat wrote:

 I updated the files, the element is cleared properly now, BUT in IE
 has this new problem (errr why cant IE leave me alone hehe)...
 When you highlight text in #content or #sidebar, the background color
 of the div 'behind' the #body3 div leaks though...
 http://arihoj.freehostia.com/rsfc/rsfc_fixed3.html
 Any idea why they leak through francky :)?
 [...]

Hi Arian,
I've some other thing to report:

* just succeeded to get a first working version of the Zoom
  construction for 2 columns
  
http://home.tiscali.nl/developerscorner/css-discuss/zooming-corners_preview.htm.
  :-) :-)

It is working in FF1.07, IE6, Opera8.01, Moz1.71 at my Win98SE machine.

Cheers,
francky



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats problem: Comment after clear element messes up clearing in IE?

[francky]

francky wrote earlier today:

 * just succeeded to get a first working version of the Zoom
   construction for 2 columns:
   
http://home.tiscali.nl/developerscorner/css-discuss/zooming-corners_preview.htm.

Hi Arian  all,
It seems the list server is a bit slow at the moment (last 14 hrs no 
list-mails came in), but here is already version 2 of the Zoomin' 
Corners experiment:

* 
http://home.tiscali.nl/developerscorner/css-discuss/zooming-corners_preview2.htm

I made some refinements in the positioning of the #content and the 
#sidebar, and applied a max-width for not-IE browsers. Results of the 
new version (now valid css/html too ;-) ):
Home tests:

* Firefox 1.07 on Windows 98SE: ok.
* MSIE 6 on Windows 98SE: ok.
* Opera 8.01 on Windows 98SE: ok.
* Opera 7.54 on Windows 98SE: ok.
* Mozilla 1.7.1 on Windows 98SE: ok.

According to browsershots.org:

* Safari 2.0 on Mac OS X: ok
* MSIE 7.0 on Windows XP: ok
* Mozilla 1.7.12 on Ubuntu Dapper (Linux): ok.
* Konqueror 3.5.2 on Ubuntu Dapper (Linux): ok.
* Firefox 1.5.0.5 on Ubuntu Dapper (Linux): ok.
* Opera 9.01 on Ubuntu Dapper (Linux): not ok, bottom corners + some 
more cut off (why?? / what to do??)
  See: 
http://browsershots.org/screenshots/1b7ac1e86d9c68f9f50719a37ea1cb1a/

I think it is a reasonable result. :-)
Hope you can use some of it.
Cheers,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing floats problem: Comment after clear element messes up clearing in IE?

[Arian Hojat]

Hello all,
Been trying to mess with this problem for a few days, can't seem to
solve it although made some interesting discoveries...
I place a comment after an element which clears the previous floats like so...

div class=clearFloat/div!-- clears previous floats: --
seen here
http://arihoj.freehostia.com/rsfc/rsfc_fixed2.html

In IE6 it messes up the clear:both it seems; in FF its fine...
If I take that specific comment out (which you can see by clicking
that link on that page),
IE does a little better, the green background color of the div which
contains the floats inside it is expanded to where it 'kinda' should
be  but if you look at the bottom, it still doesnt quite clear the
floats correctly, as the green background color leaks into the div
below it.

Looking for two answers
1. Why does the comment cause this issue, is an issue like this
documented in IE?
2. Even if the comment is taken away, why don't the floats get cleared
completely? (as seen in the green background-color of #body3 leaking
into the #containerBottom1 div)

Can anyone help?
Thanks in advance,
Arian
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats problem: Comment after clear element messes up clearing in IE?

[Andy Harrison]

On 9/23/06, Arian Hojat [EMAIL PROTECTED] wrote:
 Looking for two answers
 1. Why does the comment cause this issue, is an issue like this
 documented in IE?

Don't know, but I've run into this problem myself - I just had to move
the comment...

 2. Even if the comment is taken away, why don't the floats get cleared
 completely? (as seen in the green background-color of #body3 leaking
 into the #containerBottom1 div)

Unless you're putting content in the .clearFloat div, I don't
understand its purpose.  Anyway, I have a suspicion that the green
leaking into the div underneath is actually IE rendering the
.clearFloat div with a bit of height - though, admittedly, I don't
know why it would do that and why it wouldn't affect the flow of the
following divs.  Try putting some arbitrary text in that div and see
where it ends up. ;-)

- Andy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats problem: Comment after clear element messes up clearing in IE?

[francky]

Hi all,
I wrote to Arian (but forgot to cc the list):

For FF a {height:1px;} is needed for the clearing div. Reason: with a 
{height: 0;}and all other things set to zero too: the div doesn't exist!
To get the 1px back, you can add a (margin-bottom: -1px;}. In this way, 
the green background is coming in FF too (in FF1.07 there is no green).

Greetings,
francky
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats problem: Comment after clear element messes up clearing in IE?

[Arian Hojat]

On 9/23/06, francky [EMAIL PROTECTED] wrote:

 Hi Arian,
 For FF a {height:1px;} is needed for the clearing div. Reason: with a
 {height: 0;}and all other things set to zero too: the div doesn't exist!
 To get the 1px back, you can add a (margin-bottom: -1px;}. In this way,
 the green background is coming in FF too.
 (The comment stuff: time for today is gone...)

Very cool francky, the height:1px now seemed to work with the problem
i had in IE
hmmm FF seemed to have no problem with it a clearing div with no
height though, do you mean IE? the height thing also seems to allow me
to keep that comment there, so i guess the problem was in IE as you
said it needs a little height, i could have swore i have used
height:0px; clearing divs before though in IE and they worked.
So what is the best css for a clearing div that works in both
browsers.., this is what i came up with based on your info

.clearFloat{
clear:both;
margin:0px;
padding:0px;
font-size:0px;
line-height:0px;
height:1px; /* maybe add this to an IE7 specific css file */
margin-bottom: -1px;/* maybe add this to an IE7 specific css file */
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing floats problem: Comment after clear element messes up clearing in IE?

[Arian Hojat]

I updated the files, the element is cleared properly now, BUT in IE
has this new problem (errr why cant IE leave me alone hehe)...
When you highlight text in #content or #sidebar, the background color
of the div 'behind' the #body3 div leaks though...
http://arihoj.freehostia.com/rsfc/rsfc_fixed3.html
Any idea why they leak through francky :)?

(PS I need those extra divs for layout purposes in case someone is
wondering why i layer them like that, the more interesting demo with
background-images instead of colors is here
http://arihoj.freehostia.com/rsfc/rsfc_fixed.html)
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing the bottom of a floated img

[TuteC]

Hello everyone! I´ve got a float:left image between some text in
http://www.dialecticaconsult.com.ar/es/. I´d like the text to be
aligned always at right of the image, no matter if it is occupying
space. I mean:

Not wanted:
[img] text text
[img] text text
 text text

Wanted:
[img] text text
[img] text text
text text

How can I solve it?
Thanks in advance;
Eugenio.
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing the bottom of a floated img

[Gunlaug Sørtun]

TuteC wrote:
 http://www.dialecticaconsult.com.ar/es/

 I´d like the text to be aligned always at right of the image, no 
 matter if it is occupying space.

 How can I solve it?

Here is one possible solution described...
http://www.gunlaug.no/contents/wd_example_01_01.html
...and here is another...
http://www.gunlaug.no/contents/wd_example_01_02.html

I hope one of them can solve your case.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing problem

[beat.beer]

Hi Folks

I have a strange clearing problem. In this site

http://www.stardesign.ch/startup1/kontakt.html

I use a navigation

div id=nav
ul id=navlist
li id=tonea href=index.htmlhome/a/li
li id=ttwoa href=ueber.htmlüber uns/a/li
li id=tthreea href=angebot.htmlAngebote/a/li
li id=tfoura href=anfahrt.htmlAnfahrt/a/li
li id=tfivea href=kontakt.htmlKontakt/a/li
li id=tsixa href=links.htmlLinks/a/li
li id=tsevena href=impressum.htmlImpressum/a/li
/ul
/div

 with the according css


#nav {
background: #999;
margin: 0;
clear: both;
color: white;
}
#navlist
{
margin: 0;
border-bottom: 1px solid #CCFF00;
background: #999;
border-color: #ff9600;
padding: 8px 0 20px;
border-width: 1px;
}

#navlist ul, #navlist li
{
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#navlist a, a:link, #navlist a:visited
{
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 15px;
text-decoration: none;
color: white;
}

body#one #tone a, body#two #ttwo a, body#three #tthree a, body#four  
#tfour a, body#five #tfive a, body#six #tsix a

{
border-bottom: 4px solid #ccff33;
padding-bottom: 2px;
background: transparent;
border-color: #ff9600;
}

#navlist a:hover { color: #ff9600; }


But this css is overriding my links in the content container, even  
when I've used a general link description. What could this be?


thanks for the help


mit freundlichen Grüssen

Beat Beer

--

stardesign
Beat Beer
untere Kirchenzelg 5
3115 Gerzensee
Switzerland





phone: ++41 31 781 4620
mobile: ++41 79 325 1448
mail: [EMAIL PROTECTED]
web: www.stardesign.ch


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing problem

[francky]

beat.beer wrote:

 Hi Folks

 I have a strange clearing problem. In this site

 http://www.stardesign.ch/startup1/kontakt.html

 [...]
 But this css is overriding my links in the content container, even  
 when I've used a general link description. What could this be?

Hi Beat Beer,
It's no clearing thing - it's an omitted #navlist, then all [a:link]'s 
are getting a float-left, a bold weight, and a color white. *) ;-)
See screenshot 
http://home.tiscali.nl/developerscorner/css-discuss/images/screenshot-stardesign.png.

Greetings,
francky

*)
If quick reading, it's a difficult one to catch: quite hidden!
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing Space with inline-table question

[David Hucklesby]

On Mon, 17 Jul 2006 13:23:29 -0500, cj wrote, re. CSS Formatting:

 [...] I prefer using option #2 in the wiki (http://css-
 discuss.incutio.com/?page=ClearingSpace), which doesn't add
 additional markup, either, and perhaps should be mentioned in your
 version of a guideline.
 __

Looking at that Wiki entry, option 2 suggests using the inline-table
property. My memory may be faulty, but I seem to recall that this
recommendation was changed to inline-block as a more cross-browser
solution (for IE 7 perhaps?)

I don't have a reference for this, so perhaps some kind member will
confirm or deny this?

Cordially, David
--

-- 
___
Play 100s of games for FREE! http://games.mail.com/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing Space with inline-table question

[Alex Robinson]

Looking at that Wiki entry, option 2 suggests using the inline-table
property. My memory may be faulty, but I seem to recall that this
recommendation was changed to inline-block as a more cross-browser
solution (for IE 7 perhaps?)

I don't have a reference for this, so perhaps some kind member will
confirm or deny this?


Well, hopefully Big John will stumble upon this thread and tell us 
what's what, but in the meantime I'll have a stab (and no doubt get 
things all wrong).

I think you have it backwards.

Option 2 on the ClearingSpace page of the wiki (ie. PIE's 
EasyClearing) originally used inline-block to conquer Mac IE.[0] 
Subsequently inline-block became inline-table.

Why? inline-block does not validate as CSS2 whereas inline-table does.

I think that's why the technique substituted inline-table for 
inline-block, to prevent cries of but it's not valid CSS' since the 
W3 CSS validator checks against CSS2.


However it should be noted:

1. I've found that inline-table often doesn't work or has crazy 
side-effects in IE Mac 5. Unfortuantely I have never made test cases 
of this so I can't prove it but inline-block always did the trick for 
me.

2. The fact that W3 states that CSS2.1 is the current working version 
(ie supercedes CSS2 - http://www.w3.org/Style/CSS/#specs) raises the 
issue of why on earth the validator checks against CSS2 by default, 
and makes it arguable that inline-block is not invalid at all (it is 
valid CSS2.1), but just appears to be so if you don't understand the 
W3's validator. That however is going off into a whole can of worms 
which has no place on this list but which would be better address to 
the W3's own list.





[0] In fact if you look further down the page you'll note references 
to other side effects of using inline-block that act as a fossilised 
reminder of the article's past...
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing Space with inline-table question

[Ingo Chao]

Alex Robinson wrote:
 Looking at that Wiki entry, option 2 suggests using the inline-table
 property. My memory may be faulty, but I seem to recall that this
 recommendation was changed to inline-block as a more cross-browser
 solution (for IE 7 perhaps?)

 I don't have a reference for this, so perhaps some kind member will
 confirm or deny this?
 
 
 Well, hopefully Big John will stumble upon this thread and tell us 
 what's what, but in the meantime I'll have a stab (and no doubt get 
 things all wrong).
 
 I think you have it backwards.
 
 Option 2 on the ClearingSpace page of the wiki (ie. PIE's 
 EasyClearing) originally used inline-block to conquer Mac IE.[0] 
 Subsequently inline-block became inline-table.

http://css-discuss.incutio.com/?page=ClearingSpace

The variant with inline-block has the slight advantage that IE7 doesn't 
fail to contain the float.

http://www.tanfa.co.uk/archives/show.asp?var=300

The star html hack is not supported, so inline-block introduces layout, 
and display is overwritten later without affecting the haslayout-status 
again.

The block gets haslayout and can therefore contain the floats.


The inline-block and inline-table part was about IE-Mac, so we should 
consider both the IE7 and IEMac problems in a solid method.


Ingo



-- 
http://www.satzansatz.de/css.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing Floats and Removing Vert Space

[Anthony Baker]

Hey Folks,

Am hoping someone might be able to offer a solution here.

I've got a navbar I'm putting together for a template that's in  
progress.
The navbar is inside a couple of containers, allowing me to float the
navbar to the right and still have a background with the same height  
that
spans the entire content area.

My issue is that, when trying to clear the float, I'm getting  
unnecessary
space added beneath the navbar. In IE, of course, the size of this space
doubles over what I see in Safari or Mozilla browsers.

The whole template is underway so there are a few other display errors
you'll see under Firefox, but the code is here:

The template can be found at:
http://www.coachandgrowrich.net/template_drafts/interior_07july2006.php

The CSS can be found at:
http://www.coachandgrowrich.net//css/master_07july2006.css


An excerpt of the code I'm using is here:

div id=navbar

   div id=navbar_box
   !-- navbar goes here --
   /div

   div class=clearnbsp;/div

/div

The navbar_box element handles the color of a box that stretches the
width of the overall content container and the navbar code inside of
that (not shown here) is floated right.

The clear element has the following CSS:

.clear { clear: both; padding: 0; margin: 0; }


Am assuming that one problem is the nbsp; is adding vert space. Am in
the process of trying various methods described at:

http://css-discuss.incutio.com/?page=ClearingSpace

But any methods that include display:hidden properties end up causing
the elements BELOW the navbar to overlap behind the navbar -- a no no.
And, if I try div class=clear /div, the overlap issue happens
too. Seems something (i.e., nbsp;) has to be there for it to work.


Would really appreciate any pointers that y'all can offer.


Thanks in advance,

Anthony

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing Floats and Removing Vert Space

[Michael Landis]

On 7/10/06, Anthony Baker [EMAIL PROTECTED] wrote about
http://www.coachandgrowrich.net/template_drafts/interior_07july2006.php:

 My issue is that, when trying to clear the float, I'm getting
 unnecessary space added beneath the navbar. In IE, of course, the size of 
 this space
 doubles over what I see in Safari or Mozilla browsers.

snip/

 The navbar_box element handles the color of a box that stretches the
 width of the overall content container and the navbar code inside of
 that (not shown here) is floated right.

snip/

 Am in
 the process of trying various methods described at:

 http://css-discuss.incutio.com/?page=ClearingSpace

Hi, Anthony,

If I add background-color: red to the clearing div, it becomes
apparent that the clearing div is clearing *every* element inside the
navigation, including the absolutely positioned ones. I have no idea
why, though.

You might want to consider using a different method of clearing, such
as Big John and Holly's Easy Clearing method[1] applied to navbar, or
floating the navbar right and adding clear:right to your main
content area, since floats will contain other floats. Either way, it
appears that the clearing div is hurting more than it is helping.

HTH,

Michael

[1] http://www.positioniseverything.net/easyclearing.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing Floats and Removing Vert Space

[Audra Coldiron]

My issue is that, when trying to clear the float, I'm getting  
unnecessary
space added beneath the navbar. In IE, of course, the size of this space
doubles over what I see in Safari or Mozilla browsers.

I had that same problem in IE when clearing a floated div, and found 
that putting a height on the clearing div fixed it for me.   I used 
height 100% and found that any % height worked.  I didn't try px or em's 
though since the div needed to expand with unknown content.

AC

-- 
Audra Coldiron

Rock-n-Roll Design  Hosting
http://rock-n-roll-design.com

Affordable, attractive websites for musicians that are a breeze to update.  
Designers - wanna use the tools on your own sites?  Learn how: 
http://bandwebdesign.com

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing div breaks absolute positioning - IE

[Gunlaug Sørtun]

 http://www.loudjoy.com/styled_div.html

 Option 2: add... #newest{float: left; display: inline;}

 If you have time, I'd love a brief explanation of what this is doing.
  I'm afraid I don't really understand it and I wasn't aware of 
 alternatives to using clearing elements in a situation like this.

There are quite a few CSS methods for 'containing floats'[1], which is
what this is all about. Relevant articles, CSS-specs and
demos/descriptions are linked to in that page.


Short about 'float: left/right;':

A float will always expand in height to contain included floats, as long
as we don't restrict its dimensions by setting a height on it.
I base probably some 75% of all 'float containment' solutions on this
simple fact.

IE/win has a nasty bug which affects side-margins on floats - they tend
to be double the given value. The addition of 'display: inline' on the
float - which doesn't make sense at all since floats can't be 'inline' -
will cure that particular 'margin doubling on floats' bug in IE/win.


IE/win has more bugs (of course) - that also affects floats, so you may
want to study some float-constructions where workarounds for these are
demonstrated and explained in some details[2][3].

In-depth understanding of how floats work will make it possible to lay
out the most elaborate designs in a mostly cross-browser stable way.



I only use 'position: absolute' for the odd occasion where I need to
place something in a completely different part of a page. Most other
'positioning-problems' are solved by manipulating floats around.
This is why I added the third option: a 'positioned and removed float'
to solve your original case.

regards
Georg

[1]http://www.gunlaug.no/contents/wd_example_01.html
[2]http://www.gunlaug.no/contents/wd_demo_float_01.html
[3]http://www.gunlaug.no/contents/wd_demo_float_02.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing div breaks absolute positioning - IE

[Gunlaug Sørtun]

Christy Collins wrote:
 I have an absolutely positioned image that isn't appearing in IE -  
 I've isolated the offending code and it seems to be a clearing div.
 http://www.loudjoy.com/styled_div.html

You have (at least) two options. In any case: delete the clearing div first.

Option 1: add...

#newest{display: table;}

Option 2: add...

#newest{float: left; display: inline;}

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing div breaks absolute positioning - IE

[Gunlaug Sørtun]

 Christy Collins wrote:
 
 I have an absolutely positioned image that isn't appearing in IE - 
 I've isolated the offending code and it seems to be a clearing div.
 http://www.loudjoy.com/styled_div.html

I'll mention a third option also, where the inclusion or exclusion of a
clearer-div doesn't matter.

Restyle that image like this...

img#newest_additions{
float: left;
margin: 10px -100px 0 -4px;
position: relative;
}

It's no longer absolute positioned, so IE's bug is avoided. Even IE can
handle floats - with a bit of help :-)

FYI: this is what I sometimes refer to as 'removed floats'[1] in that
such a float doesn't take up any space. It doesn't change the float's
appearance, just its relations to its surroundings.

regards
Georg

[1]http://www.gunlaug.no/contents/wd_demo_float_03.html
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing div breaks absolute positioning - IE

[Christy Collins]

On Apr 26, 2006, at 4:21 AM, Gunlaug Sørtun wrote:

 Christy Collins wrote:
 I have an absolutely positioned image that isn't appearing in IE -
 I've isolated the offending code and it seems to be a clearing div.
 http://www.loudjoy.com/styled_div.html

 You have (at least) two options. In any case: delete the clearing  
 div first.
 Option 1: add...
 #newest{display: table;}
 Option 2: add...
 #newest{float: left; display: inline;}

Option 2 worked - option 1 might have worked on the test page, but on  
the actual page it positioned the image relative to the parent of  
#newest.
If you have time, I'd love a brief explanation of what this is  
doing.  I'm afraid I don't really understand it and I wasn't aware of  
alternatives to using clearing elements in a situation like this.

Many Thanks,
Christy

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing div breaks absolute positioning - IE

[Christy Collins]

I have an absolutely positioned image that isn't appearing in IE -  
I've isolated the offending code and it seems to be a clearing div.
http://www.loudjoy.com/styled_div.html
http://www.loudjoy.com/unstyled_div.html
Can anyone suggest a fix?

Thanks,
Christy
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] clearing floats problem

[Matt Tibbits]

Hello,

 

I'm using a horizontal navbar that is made up of a ul and floats.  After
the div that contains the navbar I have a left floated column and a
content section. I'm trying to use a margin at the top of my content section
and this looks fine in IE. Firefox, however won't put the margin until I
clear the navbar floats. When I do this, it looks fine in Firefox, but IE
has doubled the size of the top margin and also added a margin to the top of
the left floated column.

 

If my explanation doesn't make any sense, you can see this here:
http://www.tibbits.ca/test.php 

 

As it is, I'm clearing the navbar float and it looks good in FF. If you look
at IE both the left floated column and the content section are not where
they should be.  If I don't clear the float, IE looks good but FF doesn't. 

 

Can anyone help me out here? I'd like to understand why this is happening
and if possible fix this without resorting to hacks. 

 

Thanks,

 

Matt

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] clearing floats problem

[Gunlaug Sørtun]

Matt Tibbits wrote:

 http://www.tibbits.ca/test.php

 As it is, I'm clearing the navbar float and it looks good in FF. If
 you look at IE both the left floated column and the content section
 are not where they should be.  If I don't clear the float, IE looks
 good but FF doesn't.

 Can anyone help me out here? I'd like to understand why this is
 happening and if possible fix this without resorting to hacks.

IE/win adds height (font-size  line-height - from body in your case) to
the clearing br / by default, and it is that height that creates the
space.

A more completely styled br / will solve that, like so...

.clear {
clear: both;
font-size: 1px;
line-height: 0;
height: 0;
}

...and will work fine across browser-land.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing 2 floated content areas

[Anthony L]

  http://www.itu.dk/people/antl/Webdesign_06/vestervold148/test1/vestervold148_v2/hjem.html
 
 
  First, the white color behind the tabbed navigation does not extend
  to the far right of the page as it does in Firefox, for example. I
  thought I'd fixed this by giving the #nav div a fixed width of 713px.
 
 
  But IE won't play nice.

 Add...
 * html ul#nav {width: 100%;}
 ...as a correction for IE only.

  The other, more serious problem is that the footer div no longer
  clears the floats and thus my footer now appears to be more of a
  belt, than a footer :-(

 Set...
 #container {height: auto;}
 ...since IE doesn't know that 'height: 100%' should default to 'height:
 auto' in such a layout.

 I have only tested the above with inline-styles and made sure it works.
 I've also only tested in Firefox 1.5.0.1, Opera 9tp2 and IE6, where all
 3 browsers rendered a copy of your page (with changes) identical.

 regards
 Georg

A quick answer as always and right again Georg.

Thanks :-))

Tony
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing 2 floated content areas

[Anthony L]

Hi all,

I know there are a million articles on the subject, but I am stumped.
On a previous incarnation of this page I sucessfully used the footer
div to clear the tow opposingly floated content areas.

Recently, I updated the code to center the content in the browser.

This caused 2 problems in Explorer which baffle me :-(

See here:
http://www.itu.dk/people/antl/Webdesign_06/vestervold148/test1/vestervold148_v2/hjem.html

First, the white color behind the tabbed navigation does not extend to
the far right of the page as it does in Firefox, for example. I
thought I'd fixed this by giving the #nav div a fixed width of 713px.

But IE won't play nice.

The other, more serious problem is that the footer div no longer
clears the floats and thus my footer now appears to be more of a belt,
than a footer :-(

Ideas?

Or pointers to where I might read more on this subject? I've read
through the complexsprial article and the easyclearing article on
positioniseverything, but couldn't see how to apply that knowledge to
this situation.

Thanks :-)
Tony
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing 2 floated content areas

[Gunlaug Sørtun]

 http://www.itu.dk/people/antl/Webdesign_06/vestervold148/test1/vestervold148_v2/hjem.html
 
 
 First, the white color behind the tabbed navigation does not extend
 to the far right of the page as it does in Firefox, for example. I 
 thought I'd fixed this by giving the #nav div a fixed width of 713px.
 
 
 But IE won't play nice.

Add...
* html ul#nav {width: 100%;}
...as a correction for IE only.

 The other, more serious problem is that the footer div no longer 
 clears the floats and thus my footer now appears to be more of a
 belt, than a footer :-(

Set...
#container {height: auto;}
...since IE doesn't know that 'height: 100%' should default to 'height:
auto' in such a layout.

I have only tested the above with inline-styles and made sure it works.
I've also only tested in Firefox 1.5.0.1, Opera 9tp2 and IE6, where all
3 browsers rendered a copy of your page (with changes) identical.

regards
Georg
-- 
http://www.gunlaug.no
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing in IE6

[Chris Ovenden]

I can't replicate it either - IE6.0.2900.2180.xpsp_sp2_rtm.040803-2158
- but it might be worth changing the height: 1% fix to height:1px. The
percent version is known to cause problems in some situations.

Chris

On 3/10/06, Bruce MacKay [EMAIL PROTECTED] wrote:
 Hi folks,

 Some IE 6 users of one of my sites are experiencing problems with the
 following page http://107writing.massey.ac.nz/test.htm

 Specifically, the yellow column is extending past the bottom of
 their browser and they cannot scroll to read the missing material.

 I cannot replicate the fault using IE 6.0.2900 but users of other v6.
 versions are apparently having difficulty.  I cannot see the problem
 in FF or Opera 7/8.

 The CSS is at http://107writing.massey.ac.nz/scripts/master.css

 I thought I was doing the right thing for address the div clearing
 problems in IE 6 by applying height: 1% to the containing div, but
 apparently I'm wrong.

 I'll be grateful for pointers to better practice.

 Thanks,

 Bruce


 __
 css-discuss [EMAIL PROTECTED]
 http://www.css-discuss.org/mailman/listinfo/css-d
 IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
 List wiki/FAQ -- http://css-discuss.incutio.com/
 Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing in IE6

[Zoe M. Gillenwater]

Bruce MacKay wrote:
 Some IE 6 users of one of my sites are experiencing problems with the 
 following page http://107writing.massey.ac.nz/test.htm

 Specifically, the yellow column is extending past the bottom of 
 their browser and they cannot scroll to read the missing material.

 I cannot replicate the fault using IE 6.0.2900 but users of other v6. 
 versions are apparently having difficulty.  I cannot see the problem 
 in FF or Opera 7/8.
   

FYI -- I can't replicate it either in IE6 on WinXP SP2.

Zoe

-- 
Zoe M. Gillenwater
Design Services Manager
UNC Highway Safety Research Center
http://www.hsrc.unc.edu

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing in IE6

[cj]

On 3/9/06, Bruce MacKay [EMAIL PROTECTED] wrote:
 Some IE 6 users of one of my sites are experiencing problems with the
 following page http://107writing.massey.ac.nz/test.htm

 Specifically, the yellow column is extending past the bottom of
 their browser and they cannot scroll to read the missing material.


i can't reproduce it on xp ie 6.0.290.2180.xpsp_sp2_gdr.050301-1519

a couple guesses:
http://positioniseverything.net/explorer/unscrollable.html
http://positioniseverything.net/explorer/guillotine.html
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Clearing in IE6

[Bruce MacKay]

Hi folks,

Some IE 6 users of one of my sites are experiencing problems with the 
following page http://107writing.massey.ac.nz/test.htm

Specifically, the yellow column is extending past the bottom of 
their browser and they cannot scroll to read the missing material.

I cannot replicate the fault using IE 6.0.2900 but users of other v6. 
versions are apparently having difficulty.  I cannot see the problem 
in FF or Opera 7/8.

The CSS is at http://107writing.massey.ac.nz/scripts/master.css

I thought I was doing the right thing for address the div clearing 
problems in IE 6 by applying height: 1% to the containing div, but 
apparently I'm wrong.

I'll be grateful for pointers to better practice.

Thanks,

Bruce


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing internal floats

[Tom Edwards]

Yeah, sorry. My fault for trying to do anything
meaningful at 10:30PM! There is one difference though:
the green div is inside another div, page, that sits
between it and the sidebar in the div hierarchy. I'll
remove that and see where floating gets me.

Yes, I'm trying to make the green area expand to
contain the floated image on the right (i.e. clear the
internal float). And I also want the content to take
up the space below the sidebar, as I sometimes end up
with very long posts
(http://www.steamreview.org/index.php?paged=2) that
look silly wasting the space.

--- Els [EMAIL PROTECTED] wrote:

 As far as I can see, the sidebar _does_ come before
 the content 
 in the above example.
 At the url you gave in your other post - 
 http://www.steamreview.org/files/newstyle.htm , I
 see the same 
 construct as in my example.
 
 What is your goal? extend the green area to
 encompass the image?
 Looking at your main page - do you want the posts to
 take up the 
 space below the sidebar?
 
 -- 
 Els
 http://locusmeus.com/
 http://locusoptimus.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing internal floats

[Tom Edwards]

Oh well, thanks anyway! :-)

--- Els [EMAIL PROTECTED] wrote:

 Well, overflow:auto doesn't have effect in IE, and
 yes, it does 
 give a 'block effect', a clear property has a
 problem with the 
 sidebar, unless the parent (#page) is floated, but
 #page can't be 
 floated if you want the content to extend below the
 sidebar.
 
 Frankly, I don't think there's any option to do what
 you want, 
 unless you would do it on a per post basis. If
 there's an image 
 in a post, set the min-height on that post to the
 height of that 
 image (or higher, if the image doesn't start at the
 top of the 
 post). Won't work in IE, so you'd have to give IE
 just a height, 
 and accept that that post won't flow below the
 sidebar.
 
 -- 
 Els
 http://locusmeus.com/
 http://locusoptimus.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing internal floats

[Tom Edwards]

Unfortunately, that makes everything clear the
sidebar. It was the first thing I tried, should have
mentioned it.

--- Els [EMAIL PROTECTED] wrote:

 Tom Edwards wrote:
  I'd appreciate some help with this problem. Here
 is
  what I'm trying to achieve:
 
  -
  Content#1   --- --|
  | Image   | | Sidebar float  ||
  | float   | |||
  | | |||
  | | |||
  | | |||
  --- |||
  clear |||
  Content#2   |||
  ... --|
  -
 
  Both the sidebar and image are float:right. The
  problem comes when I try to clear Content#2 (a
 blog
  post if that helps visualise) past the image, but
 not
  the sidebar (i.e. at clear). Setting clear:right
  clears both of the floated elements, and
 clear:left
  naturally has no effect.
 
  My content and image are both contained within the
  same div element. Is it possible to specify a
 clearing
  element to ONLY clear floats with a specified
 parent?
 
 No, but if you would float this parent too, the
 floats inside of 
 it wouldn't clear the floats outside of it.
 
 -- 
 Els
 http://locusmeus.com/
 http://locusoptimus.com/
 
 
 
 
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing internal floats

[cj]

do you by chance have a live page that we could play with?
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing internal floats

[Els]

Tom Edwards wrote:

[snip construct of floated sidebar and clearing elements within 
content]

 My content and image are both contained within the
 same div element. Is it possible to specify a clearing
 element to ONLY clear floats with a specified parent?

 No, but if you would float this parent too, the
 floats inside of
 it wouldn't clear the floats outside of it.

 Unfortunately, that makes everything clear the
 sidebar. It was the first thing I tried, should have
 mentioned it.


Maybe I didn't explain it well enough :-)
I use it every day, and it works.
In short:

div id=sidebar
/div
div id=content
  div id=content1
img src=image.jpg alt=alt-text
ptext/p
  /div
  div id=content2
ptext/p
  /div
/div

Don't just float #sidebar and img, but also #content.
If #content (parent of #content1 and #content2) is floated, the 
clear property on #content2 will not clear #sidebar.
Try it. If you have an example of it not working, I'll be happy 
to have a look at it.

-- 
Els
http://locusmeus.com/
http://locusoptimus.com/



__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing internal floats

[Tom Edwards]

Sure:

http://www.steamreview.org/files/newstyle.htm

That's more of a personal testbed (thus all the
Mozilla-specific code), but the float issue affects
the main page too. I've made the entry div green to
show where it lies.

I'm currently using overflow:auto on the main page
which more or less works but turns each post into a
block-level element (look at the third post down). I'm
looking for a better solution...

--- cj [EMAIL PROTECTED] wrote:

 do you by chance have a live page that we could play
 with?
 

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] Clearing internal floats

[Tom Edwards]

Whoops, missed this one. Messages aimed at me get keep
getting sent to the junk folder.

The only difference between your and my pages is that
the sidebar div comes before the content for me. Is
that causing the problem?

--- Els [EMAIL PROTECTED] wrote:

 Maybe I didn't explain it well enough :-)
 I use it every day, and it works.
 In short:
 
 div id=sidebar
 /div
 div id=content
   div id=content1
 img src=image.jpg alt=alt-text
 ptext/p
   /div
   div id=content2
 ptext/p
   /div
 /div
 
 Don't just float #sidebar and img, but also
 #content.
 If #content (parent of #content1 and #content2) is
 floated, the 
 clear property on #content2 will not clear #sidebar.
 Try it. If you have an example of it not working,
 I'll be happy 
 to have a look at it.
 
 -- 
 Els
 http://locusmeus.com/
 http://locusoptimus.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/