floats and collapsing divs

Discussion in 'HTML' started by JL, Sep 13, 2007.

  1. JL

    JL Guest

    Hi

    Suppose I have a footer div with a background colour and, in the footer,
    I'd like to have some links on the left and a copyright notice on the
    right. I'd do something like this:

    #footer {
    color: #FFF;
    background-color: #000;
    padding: 4px 10px;
    }

    <div id="footer">
    <div style="float: left">
    <a href="#">Privacy Policy</a> | <a href="#">Site Map</a>
    </div>
    <div style="float: right">
    Copyright &copy 2007 MyComp
    </div>
    </div>

    However, if I do this, the black background of the footer div
    disappears. I know this is because the floated contents do not prop up
    the footer container.

    The only workarounds I know are to give #footer a height, which ruins
    things when fonts are resized, or putting an element inside the footer,
    after the other two div's, that is clear:both; but neither option is
    satisfactory.

    Am I missing something here? What do you guys do?
     
    JL, Sep 13, 2007
    #1
    1. Advertising

  2. JL

    Ben C Guest

    On 2007-09-13, JL <> wrote:
    > Hi
    >
    > Suppose I have a footer div with a background colour and, in the footer,
    > I'd like to have some links on the left and a copyright notice on the
    > right. I'd do something like this:
    >
    > #footer {
    > color: #FFF;
    > background-color: #000;
    > padding: 4px 10px;
    > }
    >
    ><div id="footer">
    > <div style="float: left">
    > <a href="#">Privacy Policy</a> | <a href="#">Site Map</a>
    > </div>
    > <div style="float: right">
    > Copyright &copy 2007 MyComp
    > </div>
    ></div>
    >
    > However, if I do this, the black background of the footer div
    > disappears. I know this is because the floated contents do not prop up
    > the footer container.
    >
    > The only workarounds I know are to give #footer a height, which ruins
    > things when fonts are resized, or putting an element inside the footer,
    > after the other two div's, that is clear:both; but neither option is
    > satisfactory.


    Those are both good ways, although not without their drawbacks as you
    say.

    > Am I missing something here? What do you guys do?


    You can make the footer overflow:hidden.

    Not because you care about what happens when it overflows but to make it
    start a new block formatting context, and block formatting context roots
    _do_ grow in height to fit floats in.
     
    Ben C, Sep 13, 2007
    #2
    1. Advertising

  3. JL

    dorayme Guest

    In article <>,
    JL <> wrote:

    > The only workarounds I know are to give #footer a height, which ruins
    > things when fonts are resized,


    Even when given in em?

    --
    dorayme
     
    dorayme, Sep 13, 2007
    #3
  4. JL

    JL Guest

    Ben C wrote:
    > On 2007-09-13, JL <> wrote:
    >> Hi
    >>
    >> Suppose I have a footer div with a background colour and, in the footer,
    >> I'd like to have some links on the left and a copyright notice on the
    >> right. I'd do something like this:
    >>
    >> #footer {
    >> color: #FFF;
    >> background-color: #000;
    >> padding: 4px 10px;
    >> }
    >>
    >> <div id="footer">
    >> <div style="float: left">
    >> <a href="#">Privacy Policy</a> | <a href="#">Site Map</a>
    >> </div>
    >> <div style="float: right">
    >> Copyright &copy 2007 MyComp
    >> </div>
    >> </div>
    >>
    >> However, if I do this, the black background of the footer div
    >> disappears. I know this is because the floated contents do not prop up
    >> the footer container.
    >>
    >> The only workarounds I know are to give #footer a height, which ruins
    >> things when fonts are resized, or putting an element inside the footer,
    >> after the other two div's, that is clear:both; but neither option is
    >> satisfactory.

    >
    > Those are both good ways, although not without their drawbacks as you
    > say.
    >
    >> Am I missing something here? What do you guys do?

    >
    > You can make the footer overflow:hidden.
    >
    > Not because you care about what happens when it overflows but to make it
    > start a new block formatting context, and block formatting context roots
    > _do_ grow in height to fit floats in.


    Works nicely in FF but not IE6. Is there a way to get this to work in IE6?
     
    JL, Sep 15, 2007
    #4
  5. JL

    JL Guest

    dorayme wrote:
    > In article <>,
    > JL <> wrote:
    >
    >> The only workarounds I know are to give #footer a height, which ruins
    >> things when fonts are resized,

    >
    > Even when given in em?


    No! Funnily enough I'd never thought of that.

    I've tried this with height: 1.5em; but the text is vertically aligned
    to the top of the container div. How do I vertically align the text in
    the middle of the container?
     
    JL, Sep 15, 2007
    #5
  6. JL

    BootNic Guest

    JL <> wrote: news::

    [snip]
    >>>
    >>> #footer {
    >>> color: #FFF;
    >>> background-color: #000;
    >>> padding: 4px 10px; }
    >>>
    >>> <div id="footer">
    >>> <div style="float: left">
    >>> <a href="#">Privacy Policy</a> | <a href="#">Site Map</a> </div>
    >>> <div style="float: right">
    >>> Copyright &copy 2007 MyComp </div> </div>
    >>>
    >>> However, if I do this, the black background of the footer div
    >>> disappears. I know this is because the floated contents do not prop
    >>> up the footer container.

    [snip]
    >> You can make the footer overflow:hidden.
    >>
    >> Not because you care about what happens when it overflows but to make
    >> it start a new block formatting context, and block formatting context
    >> roots _do_ grow in height to fit floats in.

    >
    > Works nicely in FF but not IE6. Is there a way to get this to work in
    > IE6?


    <!--[if lt IE 7]>
    <style type="text/css">
    #footer {
    height:0;
    overflow:visible;
    }
    </style>
    <![endif]-->

    --
    BootNic Saturday September 15, 2007 9:56 AM
    They always say time changes things, but you actually have to change
    them yourself.
    *Andy Warhol*
     
    BootNic, Sep 15, 2007
    #6
  7. JL

    Bergamot Guest

    JL wrote:
    > Ben C wrote:
    >>
    >> You can make the footer overflow:hidden.
    >>
    >> Not because you care about what happens when it overflows but to make it
    >> start a new block formatting context, and block formatting context roots
    >> _do_ grow in height to fit floats in.

    >
    > Works nicely in FF but not IE6. Is there a way to get this to work in IE6?


    add property

    zoom: 1;

    It's an IE proprietary property that other browsers ignore, but does
    absolute wonders for pretty much all versions of IE.

    --
    Berg
     
    Bergamot, Sep 15, 2007
    #7
  8. JL

    dorayme Guest

    In article <>,
    JL <> wrote:

    > dorayme wrote:
    > > In article <>,
    > > JL <> wrote:
    > >
    > >> The only workarounds I know are to give #footer a height, which ruins
    > >> things when fonts are resized,

    > >
    > > Even when given in em?

    >
    > No! Funnily enough I'd never thought of that.


    Try it, it worked well enough on your page, I gave it 1.5em. It
    is simple at least.

    --
    dorayme
     
    dorayme, Sep 15, 2007
    #8
    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. rich
    Replies:
    0
    Views:
    751
  2. Kosio

    Floats to chars and chars to floats

    Kosio, Sep 16, 2005, in forum: C Programming
    Replies:
    44
    Views:
    1,342
    Tim Rentsch
    Sep 23, 2005
  3. Agix
    Replies:
    7
    Views:
    348
    dorayme
    May 10, 2007
  4. Chris K.
    Replies:
    4
    Views:
    890
    Bergamot
    Jun 4, 2008
  5. D. Alvarado

    collapsing space between hidden divs

    D. Alvarado, Sep 3, 2004, in forum: Javascript
    Replies:
    1
    Views:
    125
    D. Alvarado
    Sep 4, 2004
Loading...

Share This Page