css: fill regardless

[DuncanIdaho]

Good Morning

Firefox/2.0.0.14
IE/7.0.5730.11
Opera/9.27

I thought I'd test out my new free server with a couple of URLs (see below)

I want an area to 'fill right' regardless of it's contents. If it
contains nothing I don't want anything to appear. If something does
appear then it must have a 10px left margin and a 10px top margin. I
understand the problems with using pixel values but this is just an
illustration.

This question is quite explicit and concerns only <div id='contentbit'>
as far as I can tell. The example is incomplete in that eventually
contentbit will contain three columns (either <tdor <divdepending on
what I can get working).
If I 'float:left; contentbit then I get the result at

http://duncanidaho.0fees.net/threecolumnfloat.html

This is no good because contentbit does not fill the space available.

If I don't float:left contentbit then I get the result at

http://duncanidaho.0fees.net/threecolumnnofloat.html

This is no good because contentbit overlaps leftbit.
What I'd like is contentbit to float:left and fill it's space (with
appropriate margins) I would have thought this is a common requirement
but I just can't crack it without introducing some sort of explicit
value for the width of contentbit.

Any advice much appreciated

TIA

--
Idaho

[Ben C]

On 2008-05-10, DuncanIdaho <Du**************@googlemail.comwrote:

Good Morning

Firefox/2.0.0.14
IE/7.0.5730.11
Opera/9.27

I thought I'd test out my new free server with a couple of URLs (see below)

I want an area to 'fill right' regardless of it's contents. If it
contains nothing I don't want anything to appear. If something does
appear then it must have a 10px left margin and a 10px top margin. I
understand the problems with using pixel values but this is just an
illustration.

This question is quite explicit and concerns only <div id='contentbit'>
as far as I can tell. The example is incomplete in that eventually
contentbit will contain three columns (either <tdor <divdepending on
what I can get working).
If I 'float:left; contentbit then I get the result at

http://duncanidaho.0fees.net/threecolumnfloat.html

This is no good because contentbit does not fill the space available.

If I don't float:left contentbit then I get the result at

http://duncanidaho.0fees.net/threecolumnnofloat.html

This is no good because contentbit overlaps leftbit.
What I'd like is contentbit to float:left and fill it's space (with
appropriate margins) I would have thought this is a common requirement
but I just can't crack it without introducing some sort of explicit
value for the width of contentbit.

You're setting an explicit width for leftbit, so just give contentbit a
margin left of 10.5em or so. 10em to get it past leftbit and another
0.5em because you wanted about 10px.

I think that's the easiest thing to do there, but there is a way to get
exactly the behaviour you want which is to make contentbit a
block formatting context but not a float. You can do that by making it
overflow: hidden (this probably doesn't work in IE).

You might ask what has overflow got to do with the width of a box. Long
story, but one of the side-effects of overflow: hidden is that it starts
a new block formatting context, and the basic rule here is that floats
don't cross block formatting context boundaries.

So your float on the left (leftbit) is not allowed inside contentbit if
contentbit is a BFC.

The CSS 2.1 spec allows browsers to do one of two things: make
contentbit narrower (which is what you want) or drop it below the float
(which you don't want, but which none of them do in practice).

If you're putting a table in contentbit anyway, just don't bother with
the div. The table (well the table cells actually) start BFCs so they
will go to the right of the float in the way you want anyway.

[Gus Richter]

DuncanIdaho wrote:

>
If I don't float:left contentbit then I get the result at

http://duncanidaho.0fees.net/threecolumnnofloat.html

This is no good because contentbit overlaps leftbit.

What I'd like is contentbit to float:left and fill it's space (with
appropriate margins)

#contentbit{
border: 1px solid black;
/*margin-left: 10px;*/ /* delete this */
margin-top: 10px;
margin-left: 10em; /* moves the container */
padding-left: 10px; /* moves the content */
}

--
Gus

[DuncanIdaho]

Ben C wrote:

On 2008-05-10, DuncanIdaho <Du**************@googlemail.comwrote:

>Good Morning

Firefox/2.0.0.14
IE/7.0.5730.11
Opera/9.27

I thought I'd test out my new free server with a couple of URLs (see below)

I want an area to 'fill right' regardless of it's contents.

snip]

>...but there is a way to get
exactly the behaviour you want which is to make contentbit a
block formatting context but not a float. You can do that by making it
overflow: hidden (this probably doesn't work in IE).

Ah, well I'm starting to understand a bit about overflow but this is a
new wrinkle (maybe the main one), anyway It does seem to work in my
selected browsers. It's the solution I was looking for as in the real
world the leftbit will be able to grow and shrink depending on the depth
of nodes in the navigation tree. The only odd thing is that if I set
contentbit.margin-left: 0.5em; the margin doesn't appear in IE but if I
set leftbit.margin right 0.5em all of a sudden I get a marging between
leftbit and contentbit. I'm not trying to understand why this should be
at the moment, anyway, thanks for taking the time to reply.

--
Idaho