div with nested links has no height?

Discussion in 'HTML' started by Kyle James Matthews, Jun 4, 2004.

  1. Hello all,

    I am nesting a set of links within a div with a background color and a
    width of 100%. Opera 7.5 and IE 6.0 display the design I am attempting
    to achieve, no doubt quite incorrectly. FireFox and Netscape assume
    that the div has a height of 0. How can I get the div to stretch to the
    height of the text without setting that height manually?

    Example page if needed: http://www.digitalovertone.com/new/index2.php.

    Many thanks,

    Kyle
    Kyle James Matthews, Jun 4, 2004
    #1
    1. Advertising

  2. Kyle James Matthews wrote:
    > Hello all,
    >
    > I am nesting.....


    That is great news.
    Disco Octopus, Jun 4, 2004
    #2
    1. Advertising

  3. Toby A Inkster, Jun 4, 2004
    #3
  4. Kyle James Matthews

    Steve Pugh Guest

    Kyle James Matthews <> wrote:

    >I am nesting a set of links within a div with a background color and a
    >width of 100%. Opera 7.5 and IE 6.0 display the design I am attempting
    >to achieve, no doubt quite incorrectly. FireFox and Netscape assume
    >that the div has a height of 0. How can I get the div to stretch to the
    >height of the text without setting that height manually?
    >
    >Example page if needed: http://www.digitalovertone.com/new/index2.php.


    #navbar a {
    display:block;
    float:right;
    }

    As the links are floated they are taken outside of the context of
    their parent. Hence their parent has no content and thus has no
    height.

    You need to include an element with clear: right; after the last of
    the links but before the end of the parent element.

    Steve

    --
    "My theories appal you, my heresies outrage you,
    I never answer letters and you don't like my tie." - The Doctor

    Steve Pugh <> <http://steve.pugh.net/>
    Steve Pugh, Jun 4, 2004
    #4
  5. Kyle James Matthews

    rf Guest

    "Steve Pugh" <> wrote in message
    news:p...
    > Kyle James Matthews <> wrote:
    >
    > >Example page if needed: http://www.digitalovertone.com/new/index2.php.

    >
    > #navbar a {
    > display:block;
    > float:right;
    > }
    >
    > As the links are floated they are taken outside of the context of
    > their parent. Hence their parent has no content and thus has no
    > height.
    >
    > You need to include an element with clear: right; after the last of
    > the links but before the end of the parent element.


    Or even better, firmly keeping the KISS principle in mind:

    Remove float: right;
    Then of course - remove display: block:
    Then, to put it all back together, suggest text-align: right for the parent
    div.

    The more CSS (and to a certain extent HTML) you throw at browsers the more
    likelihood one of them will barf.

    Hmmm... just glanced at the rest of the CSS file. Veritable overkill. Kyle:
    Rewrite it from the ground up, considering very carefully each thing you put
    in there.

    Cheers
    Richard.
    rf, Jun 4, 2004
    #5
  6. rf wrote:
    > The more CSS (and to a certain extent HTML) you throw at browsers the more
    > likelihood one of them will barf.


    Actually, I'm going for projectile vomiting. Do you think I have a shot?

    > Hmmm... just glanced at the rest of the CSS file. Veritable overkill. Kyle:
    > Rewrite it from the ground up, considering very carefully each thing you put
    > in there.


    Thank you for that advice, but I have a follow-up question. When you
    refer to my CSS as "veritable overkill," are you suggesting that the
    design I am trying to achieve is too complicated and I should simplify,
    or that the CSS I am using to achieve my design is too complicated and
    can be achieved more concisely? If it is the former, I am content to
    have a complicated and potentially barf-inducing CSS, as my intent for
    now is to learn what I can do and how I can do it. If it is the latter,
    can you please be more specific? I am always hoping to learn from the
    people in this group.

    The only caveat is that the background images have to stay in the CSS.
    I would like to be able to design multiple styles without having to
    change my HTML markup. Perhaps that is why the CSS is a little bloated?

    Thanks,

    Kyle
    Kyle James Matthews, Jun 5, 2004
    #6
  7. Steve Pugh wrote:

    > As the links are floated they are taken outside of the context of
    > their parent. Hence their parent has no content and thus has no
    > height.
    >
    > You need to include an element with clear: right; after the last of
    > the links but before the end of the parent element.


    Of course. Thank you. This worked perfectly.
    Kyle James Matthews, Jun 5, 2004
    #7
  8. Kyle James Matthews

    rf Guest

    "Kyle James Matthews" <> wrote in message
    news:r_9wc.3424$HG.726@attbi_s53...
    > rf wrote:
    > > The more CSS (and to a certain extent HTML) you throw at browsers the

    more
    > > likelihood one of them will barf.

    >
    > Actually, I'm going for projectile vomiting. Do you think I have a shot?
    >
    > > Hmmm... just glanced at the rest of the CSS file. Veritable overkill.

    Kyle:
    > > Rewrite it from the ground up, considering very carefully each thing you

    put
    > > in there.

    >
    > Thank you for that advice, but I have a follow-up question. When you
    > refer to my CSS as "veritable overkill," are you suggesting that the
    > design I am trying to achieve is too complicated and I should simplify,
    > or that the CSS I am using to achieve my design is too complicated and
    > can be achieved more concisely?


    The latter. The design *is* too complicated for what it does but that is how
    you wrote it so that's OK. My problem is with the CSS.

    You seem to be using a seperate CSS rule to describe each element on the
    page. This is reinforced by the fact that you select based on id, not class
    (*). This makes it tricky to change one single CSS rule and have the entire
    page or site change.

    You compound this by having a body.index rule, replicating most of what is
    in the body rule anyway. Do you intend to have your index.html with <body
    class="index"> and your arts.html with <body class="arts">? Confusing and
    needless replication.

    CSS is meant to describe the whole site, not each individual page or each
    individual bit of a page. That is, change one single rule and your entire
    site changes from dark purple to shocking pink.

    (*) It is better to use class as then you can have several elements on the
    page with the same class.

    Keep inheritance in mind. For example, only specify font once, in the body
    rule and let it inherit down to the child elements. Don't replicate it all
    over the place, this just makes it harder to change.

    Don't have rules like .hidden, .center, .left etc. You end up with (in your
    HTML) something like
    <div class="center">
    which is exactly the same as
    <div style="text-align: center">
    A style rule should not describe just a single property. It should describe
    the entire visual appearance of the element it selects.

    Hmmm. A bit rambly :) How to end...

    Don't write your HTML in anticipation of how it will look on the page. HTML
    is for content. Get that content in there first. Things like your header
    block, your navigation block, your content block.

    Only once that is done think about how each block should look and create a
    CSS rule, selecting that block, that describes how it should look.

    Conversly, don't write the CSS rules in anticipation of what the content
    will be (your .center rules). You might just as well include all the CSS in
    a style attribute.

    Finally, KISS principle. If you can remove something without affecting the
    look of the page then do so.

    Cheers
    Richard.
    rf, Jun 5, 2004
    #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. Replies:
    8
    Views:
    6,687
    Neredbojias
    Dec 9, 2005
  2. HJ
    Replies:
    5
    Views:
    844
    Jonathan N. Little
    Sep 1, 2006
  3. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    862
    muggslab
    Feb 1, 2010
  4. Don Vaillancourt

    How to tell height of div where height is not set?

    Don Vaillancourt, Jan 28, 2005, in forum: Javascript
    Replies:
    8
    Views:
    145
    Dietmar Meier
    Jan 31, 2005
  5. Replies:
    0
    Views:
    123
Loading...

Share This Page