another nested divs problem

J

julian_m

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
 
G

Greg N.

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>
 
J

Jim Moe

julian_m said:
<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.
 
J

Jonathan N. Little

Guybrush said:
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.
 
A

anibalpedersen

Greg said:
julian_m wrote:



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.
 
J

julian_m

Greg said:
julian_m wrote:



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
 
J

Jim Moe

Guybrush said:
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.
 
J

Jim Moe

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.
 
J

julian_m

Jim said:
"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
 
T

trippy

julian_m took the hamburger, threw it on the grill, and I said "Oh
wow"...
(It was me with another mail)


Yes, you're absolutely correct

now I updated my demo: (url changed)

http://msys.com.ar/round.php

And I can't imagine how sould work with the bottom border. Any hint ?
(the last I hope ;)

Thanks for your time

Fatal error: Call to undefined function: hacerclass() in
/home/ke000067/public_html/round.php on line 33


--
trippy
mhm31x9 Smeeter#29 WSD#30
sTaRShInE_mOOnBeAm aT HoTmAil dOt CoM

NP: "The Way It Is" -- Tesla

"Now, technology's getting better all the time and that's fine,
but most of the time all you need is a stick of gum, a pocketknife,
and a smile."

-- Robert Redford "Spy Game"
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top