another nested divs problem

Discussion in 'HTML' started by julian_m, Mar 23, 2006.

  1. julian_m

    julian_m Guest

    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
     
    julian_m, Mar 23, 2006
    #1
    1. Advertising

  2. julian_m

    Greg N. Guest

    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/
     
    Greg N., Mar 23, 2006
    #2
    1. Advertising

  3. julian_m

    Jim Moe Guest

    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)
     
    Jim Moe, Mar 23, 2006
    #3
  4. 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
     
    Guybrush Threepwood, Mar 24, 2006
    #4
  5. 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
     
    Jonathan N. Little, Mar 24, 2006
    #5
  6. julian_m

    Guest

    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.
     
    , Mar 24, 2006
    #6
  7. julian_m

    julian_m Guest

    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
     
    julian_m, Mar 24, 2006
    #7
  8. julian_m

    Jim Moe Guest

    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)
     
    Jim Moe, Mar 24, 2006
    #8
  9. julian_m

    Jim Moe Guest

    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)
     
    Jim Moe, Mar 24, 2006
    #9
  10. julian_m

    julian_m Guest

    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
     
    julian_m, Mar 24, 2006
    #10
  11. julian_m

    julian_m Guest

    Jim Moe wrote:
    > wrote:


    (It was me with another mail)

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


    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

    regards - jm
     
    julian_m, Mar 24, 2006
    #11
  12. julian_m

    julian_m Guest

    julian_m, Mar 24, 2006
    #12
  13. julian_m

    Jim Moe Guest

    julian_m wrote:
    >
    > 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 ;)
    >

    See <http://www.sohnen-moe.com/test/t.html>.
    It is important to use HTML 4.01 Strict to minimize differences in the
    way IE renders a page vs. everyone else.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Mar 24, 2006
    #13
  14. julian_m

    julian_m Guest

    Jim Moe wrote:
    > julian_m wrote:
    > >
    > > 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 ;)
    > >

    > See <http://www.sohnen-moe.com/test/t.html>.
    > It is important to use HTML 4.01 Strict to minimize differences in the
    > way IE renders a page vs. everyone else.
    >


    Hey! Great work!!. Many thanks for your time.

    regards - jm
     
    julian_m, Mar 24, 2006
    #14
  15. julian_m

    trippy Guest

    In article <>,
    julian_m took the hamburger, threw it on the grill, and I said "Oh
    wow"...

    >
    > Jim Moe wrote:
    > > wrote:

    >
    > (It was me with another mail)
    >
    > > >
    > > > 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.

    >
    > 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"
     
    trippy, Mar 25, 2006
    #15
  16. julian_m

    Rob_W Guest

    julian_m wrote:
    > Jim Moe wrote:
    >
    >>julian_m wrote:
    >>
    >>>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 ;)
    >>>

    >>
    >> See <http://www.sohnen-moe.com/test/t.html>.
    >> It is important to use HTML 4.01 Strict to minimize differences in the
    >>way IE renders a page vs. everyone else.
    >>

    >
    >
    > Hey! Great work!!. Many thanks for your time.
    >
    > regards - jm
    >


    Maybe this is helpful:

    http://www.alistapart.com/articles/slidingdoors/

    Rob
     
    Rob_W, Mar 27, 2006
    #16
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Guadala Harry

    Nested DIVs - is there a better way?

    Guadala Harry, Oct 26, 2004, in forum: ASP .Net
    Replies:
    2
    Views:
    505
    Guadala Harry
    Oct 26, 2004
  2. dbunder

    XHTML and nested divs

    dbunder, Dec 20, 2003, in forum: HTML
    Replies:
    2
    Views:
    1,099
    John McGaw
    Dec 20, 2003
  3. Bernd Liebermann

    nested divs - newbie question

    Bernd Liebermann, Dec 17, 2004, in forum: HTML
    Replies:
    2
    Views:
    429
    Travis Newbury
    Dec 17, 2004
  4. rich
    Replies:
    0
    Views:
    756
  5. maya
    Replies:
    4
    Views:
    265
Loading...

Share This Page