clear:left problems

Discussion in 'HTML' started by Malcolm Collett, Jan 19, 2004.

  1. On this page:
    http://users.iafrica.com/m/mc/mcollett/SPS/Castle/Castle.htm
    I am having some problems with clear:left.

    Below the Gladiator Castle div is a <hr> with clear:left on it. What I would
    like is that <hr> should clear the photo in the same div, but it is clearing
    nav list as well. This results in a large blank space below the photo.
    How do I get rid of this blank space?

    (I tried floating the photos to the right and using clear:right on the <hr>,
    but then the image of the main content div leaks to the left and fills the
    space below the nav list.)

    Malcolm
     
    Malcolm Collett, Jan 19, 2004
    #1
    1. Advertising

  2. In article Malcolm Collett wrote:
    > On this page:
    > http://users.iafrica.com/m/mc/mcollett/SPS/Castle/Castle.htm
    > I am having some problems with clear:left.
    >
    > Below the Gladiator Castle div is a <hr> with clear:left on it. What I would
    > like is that <hr> should clear the photo in the same div, but it is clearing
    > nav list as well. This results in a large blank space below the photo.
    > How do I get rid of this blank space?


    Use absolute postioning for your navigation. It works just as well as
    float, as you already use margin for content.

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
    tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.
     
    Lauri Raittila, Jan 19, 2004
    #2
    1. Advertising

  3. Malcolm Collett

    Paul Furman Guest

    Malcolm Collett wrote:

    > On this page:
    > http://users.iafrica.com/m/mc/mcollett/SPS/Castle/Castle.htm
    > I am having some problems with clear:left.
    >
    > Below the Gladiator Castle div is a <hr> with clear:left on it. What I would
    > like is that <hr> should clear the photo in the same div, but it is clearing
    > nav list as well. This results in a large blank space below the photo.
    > How do I get rid of this blank space?
    >
    > (I tried floating the photos to the right and using clear:right on the <hr>,
    > but then the image of the main content div leaks to the left and fills the
    > space below the nav list.)


    Strange: in IE6 if I scroll down then back up a gap revealing the
    background image apprears. Before that I can see a slight diff in width
    of the foreground color where the menu cuts into it. It works as you
    wish in mozilla.
     
    Paul Furman, Jan 19, 2004
    #3
  4. "Lauri Raittila" <> wrote in message
    news:...
    > In article Malcolm Collett wrote:
    > > On this page:
    > > http://users.iafrica.com/m/mc/mcollett/SPS/Castle/Castle.htm
    > > I am having some problems with clear:left.
    > >
    > > Below the Gladiator Castle div is a <hr> with clear:left on it. What I

    would
    > > like is that <hr> should clear the photo in the same div, but it is

    clearing
    > > nav list as well. This results in a large blank space below the photo.
    > > How do I get rid of this blank space?

    >
    > Use absolute postioning for your navigation. It works just as well as
    > float, as you already use margin for content.


    Thanks Lauri

    I ended up making just one small change.
    I replaced
    #NavLeft {float:left; ...}
    with
    #NavLeft {position:absolute; left:0; ...}
    I haven't specified top, right or bottom, as they should default to auto.

    Is this useage of position:absolute correct? Works great in IE!

    Malcom
     
    Malcolm Collett, Jan 20, 2004
    #4
  5. Malcolm Collett

    altamir Guest

    "Malcolm Collett" <> wrote in news:400cdb84.0
    @news1.mweb.co.za:

    > I ended up making just one small change.
    > I replaced
    > #NavLeft {float:left; ...}
    > with
    > #NavLeft {position:absolute; left:0; ...}
    > I haven't specified top, right or bottom, as they should default to auto.
    >
    > Is this useage of position:absolute correct? Works great in IE!


    Many people use absolute positioning. Floating is badly supported,
    specially in IE.
    One more thing: remove background-image declaration from #NavLeft, because
    you've got it already in the 'body' element. Make it transparent.

    --
    altamir
     
    altamir, Jan 20, 2004
    #5
  6. > One more thing: remove background-image declaration from #NavLeft, because
    > you've got it already in the 'body' element. Make it transparent.
    >
    > --
    > altamir


    Thanks, will do.
    Malcolm
     
    Malcolm Collett, Jan 21, 2004
    #6
    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. Jerry
    Replies:
    8
    Views:
    731
    Mark Parnell
    Feb 16, 2004
  2. =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=

    Help on table align on left of page vs left hanging indent

    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=, Jul 10, 2007, in forum: XML
    Replies:
    2
    Views:
    1,046
    =?iso-8859-1?q?Jean-Fran=E7ois_Michaud?=
    Jul 16, 2007
  3. Floortje
    Replies:
    6
    Views:
    1,561
    Floortje
    May 10, 2009
  4. pc
    Replies:
    2
    Views:
    1,391
    crisgoogle
    Jun 8, 2011
  5. lawrence
    Replies:
    13
    Views:
    341
    Thomas 'PointedEars' Lahn
    Sep 4, 2004
Loading...

Share This Page