another nested divs problem
 

I've 3 divs ionnside anoter e, for instance

<div id="container">
<div id="left"></div>
<div id="mid"></div>
<div id="right"></div>
</div>

but I can't make it to work as if they were 3 columns

#left {
background: url(tl.png)
float:left;
}

#mid {
float:top;
border-top: solid 3px black;
}

#right {
background: url(tr.png)
float:right;
}

note that both #left and #right will have a background image, and I
need to complete the border with #mid

can anyone give some hints about this problem?

you can see better what I'm looking for here:
http://msys.com.ar/info.png

regards - jm

Re: another nested divs problem
 

julian_m wrote:


> #mid {
> float:top;

I can't find float:top in any documentation.

This one works for me:

<div>
<div style="float:left;">LEFT</div>
<div style="float:right;">RIGHT</div>
<div style="text-align:center;">CENTER</div>
<div>

--
Gregor mit dem Motorrad auf Reisen:
http://hothaus.de/greg-tour/

Re: another nested divs problem
 

julian_m wrote:
>
> <div id="container">
> <div id="left"></div>
> <div id="mid"></div>
> <div id="right"></div>
> </div>
>
The sequence is incorrect. Place "right" after "left", then "mld".

> float:top;
>
No such value. float can only be left or right.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: another nested divs problem
 

On Thu, 23 Mar 2006 11:51:00 -0700, Jim Moe wrote:

> julian_m wrote:
>>
>> <div id="container">
>> <div id="left"></div>
>> <div id="mid"></div>
>> <div id="right"></div>
>> </div>
>>
> The sequence is incorrect. Place "right" after "left", then "mld".
>
I have to admit I don't understand the logic of this. Could you explain?

--
"Don't worry about people stealing your ideas. If your ideas are any
good, you'll have to ram them down people's throats."
-- Howard Aiken

Re: another nested divs problem
 

Guybrush Threepwood wrote:
> On Thu, 23 Mar 2006 11:51:00 -0700, Jim Moe wrote:
>
>> julian_m wrote:
>>> <div id="container">
>>> <div id="left"></div>
>>> <div id="mid"></div>
>>> <div id="right"></div>
>>> </div>
>>>
>> The sequence is incorrect. Place "right" after "left", then "mld".
>>
> I have to admit I don't understand the logic of this. Could you explain?
>

The 'mid' div is the only one position relative so you want it's content
'squeeze' into shape by the two floated div's. That way all three
div's with be aligned at the top. If layout as Julian had 'left' and
'mid' would be aligned at the top but 'right' would float to the right
*after* mid's content.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Re: another nested divs problem
 

Greg N. wrote:
> julian_m wrote:
>
>
> > #mid {
> > float:top;
>
> I can't find float:top in any documentation.

Right, my mistake. I just thought that It should exist somethig like
that...


> This one works for me:
>
> <div>
> <div style="float:left;">LEFT</div>
> <div style="float:right;">RIGHT</div>
> <div style="text-align:center;">CENTER</div>
> <div>
>

It seems to work quite good for the "top part" of my rounded div, but I
can't make it work for the bottom part

http://msys.com.ar/test.htm

Any other advice?

Thanks in advance...

regards, julian.

Re: another nested divs problem
 

Greg N. wrote:
> julian_m wrote:
>
>
> > #mid {
> > float:top;
>
> I can't find float:top in any documentation.

My mistake, you're right


>
> This one works for me:
>
> <div>
> <div style="float:left;">LEFT</div>
> <div style="float:right;">RIGHT</div>
> <div style="text-align:center;">CENTER</div>
> <div>
>

It seems to work well in the "top rounded corners", but i'm having
trouble to make it work in the bottom corners.

Can anyone give it a look?

http://msys.com.ar/test.htm

regards - jm

Re: another nested divs problem
 

Guybrush Threepwood wrote:
>>>
>>> <div id="container">
>>> <div id="left"></div>
>>> <div id="mid"></div>
>>> <div id="right"></div>
>>> </div>
>> The sequence is incorrect. Place "right" after "left", then "mld".
> I have to admit I don't understand the logic of this. Could you explain?
>
"float" is a generalization of <img>'s align attribute. When an object
is floated, it "floats" up left or right within the limits of the
containing object. Inline content flows around floated objects. Floated
content is "shrinkwrapped" by its container.
As you saw, when "mid" is second, "right" floats to the bottom of "mid",
the only place "right" can float since "mid" takes up all the horizontal
space.
By ordering the divs as suggested, "left" can float up to the left of
"container," "right" can float up to the right, and "mid" content flows
around them to fill the space. "mid" itself is actually overlaid by the
floated objects. If you add a border (or a background color or image) to
"mid," it would seem to disappear under the floats.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: another nested divs problem
 

anibalpedersen@gmail.com wrote:
>
> It seems to work quite good for the "top part" of my rounded div, but I
> can't make it work for the bottom part
>
> http://msys.com.ar/test.htm
>
It does not work for the top, either.
The "center" has a line-height that is larger than the floated end
pieces. Thus the lines to not match up. Also you need to add a margin to
the center div to pull the border in to align with the images.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Re: another nested divs problem
 

Jim Moe wrote:
> Guybrush Threepwood wrote:
> >>>
> >>> <div id="container">
> >>> <div id="left"></div>
> >>> <div id="mid"></div>
> >>> <div id="right"></div>
> >>> </div>
> >> The sequence is incorrect. Place "right" after "left", then "mld".
> > I have to admit I don't understand the logic of this. Could you explain?
> >
> "float" is a generalization of <img>'s align attribute. When an object
> is floated, it "floats" up left or right within the limits of the
> containing object. Inline content flows around floated objects. Floated
> content is "shrinkwrapped" by its container.
> As you saw, when "mid" is second, "right" floats to the bottom of "mid",
> the only place "right" can float since "mid" takes up all the horizontal
> space.
> By ordering the divs as suggested, "left" can float up to the left of
> "container," "right" can float up to the right, and "mid" content flows
> around them to fill the space. "mid" itself is actually overlaid by the
> floated objects. If you add a border (or a background color or image) to
> "mid," it would seem to disappear under the floats.
>

Great explanation, really. Now I think that I understand how things
work on this issue.

I just have one "last" problem which maybe you (or anyother of course)
can tell me something about...

http://msys.com.ar/test.htm

regards - jm