setting height on <div>

Discussion in 'HTML' started by shank, Oct 6, 2003.

  1. shank

    shank Guest

    What is the minimum height that can be set on an emtpy <div>...?
    The below appears to get down to about 10px and won't go smaller.
    Is there a way without using <HR>...?

    <div style="width:100%; height:2px; background-color:#AABBCC;
    margin-bottom:0px"></div>

    thanks
    shank, Oct 6, 2003
    #1
    1. Advertising

  2. shank schrieb:
    >
    > What is the minimum height that can be set on an emtpy <div>...?
    > The below appears to get down to about 10px and won't go smaller.
    > Is there a way without using <HR>...?
    >
    > <div style="width:100%; height:2px; background-color:#AABBCC;
    > margin-bottom:0px"></div>


    <div style="border:solid 1px #AABBCC;">Your content here </div>

    Of course it would be better to put the style rule in an embedded or
    linked stylesheet.


    Matthias
    Matthias Gutfeldt, Oct 6, 2003
    #2
    1. Advertising

  3. shank

    shank Guest

    "Matthias Gutfeldt" <> wrote in message
    news:...
    > shank schrieb:
    > >
    > > What is the minimum height that can be set on an emtpy <div>...?
    > > The below appears to get down to about 10px and won't go smaller.
    > > Is there a way without using <HR>...?
    > >
    > > <div style="width:100%; height:2px; background-color:#AABBCC;
    > > margin-bottom:0px"></div>

    >
    > <div style="border:solid 1px #AABBCC;">Your content here </div>
    >
    > Of course it would be better to put the style rule in an embedded or
    > linked stylesheet.
    >
    >
    > Matthias
    >

    Thanks, but that did not resolve my issue. I wanted to make a rectangle
    across the page (100%) and 2px in height. It would imitate a line 2px in
    height. I assumed I could do this with a <div> and setting the height to
    2px. That does not work. The minimum height appears to be 10px. At least
    that's as short as I can get it to go.
    thanks
    shank, Oct 6, 2003
    #3
  4. shank schrieb:
    >
    > "Matthias Gutfeldt" <> wrote in message
    > news:...
    > > shank schrieb:
    > > >
    > > > What is the minimum height that can be set on an emtpy <div>...?
    > > > The below appears to get down to about 10px and won't go smaller.
    > > > Is there a way without using <HR>...?
    > > >
    > > > <div style="width:100%; height:2px; background-color:#AABBCC;
    > > > margin-bottom:0px"></div>

    > >
    > > <div style="border:solid 1px #AABBCC;">Your content here </div>
    > >
    > > Of course it would be better to put the style rule in an embedded or
    > > linked stylesheet.
    > >
    > >
    > > Matthias
    > >

    > Thanks, but that did not resolve my issue. I wanted to make a rectangle
    > across the page (100%) and 2px in height. It would imitate a line 2px in
    > height. I assumed I could do this with a <div> and setting the height to
    > 2px. That does not work. The minimum height appears to be 10px. At least
    > that's as short as I can get it to go.


    Ah, OK - simply notch up the border to 2px.

    But if you insist on torturing that poor innocent empty DIV into
    something it was never meant to be: The problem with minimal element
    height is usually the font-size or the line-height properties, plus
    possibly margin and padding. Set those properties to improbably small
    sizes and see what happens.


    Matthias
    Matthias Gutfeldt, Oct 6, 2003
    #4
  5. shank

    shank Guest

    "Matthias Gutfeldt" <> wrote in message
    news:...
    > shank schrieb:
    > >
    > > "Matthias Gutfeldt" <> wrote in message
    > > news:...
    > > > shank schrieb:
    > > > >
    > > > > What is the minimum height that can be set on an emtpy <div>...?
    > > > > The below appears to get down to about 10px and won't go smaller.
    > > > > Is there a way without using <HR>...?
    > > > >
    > > > > <div style="width:100%; height:2px; background-color:#AABBCC;
    > > > > margin-bottom:0px"></div>
    > > >
    > > > <div style="border:solid 1px #AABBCC;">Your content here </div>
    > > >
    > > > Of course it would be better to put the style rule in an embedded or
    > > > linked stylesheet.
    > > >
    > > >
    > > > Matthias
    > > >

    > > Thanks, but that did not resolve my issue. I wanted to make a rectangle
    > > across the page (100%) and 2px in height. It would imitate a line 2px in
    > > height. I assumed I could do this with a <div> and setting the height to
    > > 2px. That does not work. The minimum height appears to be 10px. At least
    > > that's as short as I can get it to go.

    >
    > Ah, OK - simply notch up the border to 2px.
    >
    > But if you insist on torturing that poor innocent empty DIV into
    > something it was never meant to be: The problem with minimal element
    > height is usually the font-size or the line-height properties, plus
    > possibly margin and padding. Set those properties to improbably small
    > sizes and see what happens.
    >


    What kind of element should I be using? I resorted to <div> because <hr> was
    creating to much margin. If you can picture this scenerio...
    1) a 2px colored line going across the page
    2) a 2 px white space going across the page
    3) a 30px colored area going across the page (I have this)
    4) a 2 px white space going across the page
    5) a 2px colored line going across the page

    I had this using a table, but I'm trying to get the same look with CSS.
    thanks!
    shank, Oct 6, 2003
    #5
  6. shank wrote:

    > Thanks, but that did not resolve my issue. I wanted to make a rectangle
    > across the page (100%) and 2px in height. It would imitate a line 2px in
    > height.


    <div style="border-top: 2px solid #AABBCC;"></div>

    But why not just use <hr>?

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me - http://www.goddamn.co.uk/tobyink/?id=132
    Toby A Inkster, Oct 6, 2003
    #6
  7. shank

    Richard Guest

    Matthias wrote:

    > shank schrieb:


    >> "Matthias Gutfeldt" <> wrote in message
    >> news:...
    >> > shank schrieb:
    >> > >
    >> > > What is the minimum height that can be set on an emtpy <div>...?
    >> > > The below appears to get down to about 10px and won't go smaller.
    >> > > Is there a way without using <HR>...?
    >> > >
    >> > > <div style="width:100%; height:2px; background-color:#AABBCC;
    >> > > margin-bottom:0px"></div>
    >> >
    >> > <div style="border:solid 1px #AABBCC;">Your content here </div>
    >> >
    >> > Of course it would be better to put the style rule in an embedded or
    >> > linked stylesheet.
    >> >
    >> >
    >> > Matthias
    >> >

    >> Thanks, but that did not resolve my issue. I wanted to make a
    >> rectangle
    >> across the page (100%) and 2px in height. It would imitate a line 2px
    >> in
    >> height. I assumed I could do this with a <div> and setting the height
    >> to
    >> 2px. That does not work. The minimum height appears to be 10px. At
    >> least
    >> that's as short as I can get it to go.


    > Ah, OK - simply notch up the border to 2px.


    > But if you insist on torturing that poor innocent empty DIV into
    > something it was never meant to be: The problem with minimal element
    > height is usually the font-size or the line-height properties, plus
    > possibly margin and padding. Set those properties to improbably small
    > sizes and see what happens.



    > Matthias


    IOW, it's easier to do the trick with HR.
    Richard, Oct 6, 2003
    #7
  8. shank schrieb:
    >
    > "Matthias Gutfeldt" <> wrote in message
    > news:...
    > > shank schrieb:
    > > >
    > > > "Matthias Gutfeldt" <> wrote in message
    > > > news:...
    > > > > shank schrieb:
    > > > > >
    > > > > > What is the minimum height that can be set on an emtpy <div>...?
    > > > > > The below appears to get down to about 10px and won't go smaller.
    > > > > > Is there a way without using <HR>...?
    > > > > >
    > > > > > <div style="width:100%; height:2px; background-color:#AABBCC;
    > > > > > margin-bottom:0px"></div>
    > > > >
    > > > > <div style="border:solid 1px #AABBCC;">Your content here </div>
    > > > >
    > > > > Of course it would be better to put the style rule in an embedded or
    > > > > linked stylesheet.
    > > > >
    > > > >
    > > > > Matthias
    > > > >
    > > > Thanks, but that did not resolve my issue. I wanted to make a rectangle
    > > > across the page (100%) and 2px in height. It would imitate a line 2px in
    > > > height. I assumed I could do this with a <div> and setting the height to
    > > > 2px. That does not work. The minimum height appears to be 10px. At least
    > > > that's as short as I can get it to go.

    > >
    > > Ah, OK - simply notch up the border to 2px.
    > >
    > > But if you insist on torturing that poor innocent empty DIV into
    > > something it was never meant to be: The problem with minimal element
    > > height is usually the font-size or the line-height properties, plus
    > > possibly margin and padding. Set those properties to improbably small
    > > sizes and see what happens.
    > >

    >
    > What kind of element should I be using? I resorted to <div> because <hr> was
    > creating to much margin. If you can picture this scenerio...
    >
    > 1) a 2px colored line going across the page
    > 2) a 2 px white space going across the page
    > 3) a 30px colored area going across the page (I have this)
    > 4) a 2 px white space going across the page
    > 5) a 2px colored line going across the page


    Such a simple decorative line is so much easier done with a GIF!

    But you could check out CSS1 and the Decorative HR:
    <http://ppewww.ph.gla.ac.uk/~flavell/www/hrstyle.html>.


    Matthias
    Matthias Gutfeldt, Oct 6, 2003
    #8
  9. shank

    shank Guest

    "Toby A Inkster" <> wrote in message
    news:p...
    > shank wrote:
    >
    > > Thanks, but that did not resolve my issue. I wanted to make a rectangle
    > > across the page (100%) and 2px in height. It would imitate a line 2px in
    > > height.

    >
    > <div style="border-top: 2px solid #AABBCC;"></div>
    >
    > But why not just use <hr>?


    I couldn't get the margin-bottom to reflect 2px. There was too much space
    and it wouldn't go away.
    I did resolve the issue though by using font-size:1% in the <div> tag. Then
    height:2px.
    That worked great... so far...
    thanks!
    shank, Oct 6, 2003
    #9
  10. shank

    kchayka Guest

    Matthias Gutfeldt wrote:

    > shank schrieb:
    >>
    >> I wanted to make a rectangle
    >> across the page (100%) and 2px in height. It would imitate a line 2px in
    >> height.

    >
    > Ah, OK - simply notch up the border to 2px.
    >
    > But if you insist on torturing that poor innocent empty DIV into
    > something it was never meant to be: The problem with minimal element
    > height is usually the font-size or the line-height properties, plus
    > possibly margin and padding. Set those properties to improbably small
    > sizes and see what happens.


    try overflow:hidden

    but I agree that a border might be the best method

    --
    To email a reply, remove (dash)un(dash). Mail sent to the un
    address is considered spam and automatically deleted.
    kchayka, Oct 7, 2003
    #10
  11. shank

    rf Guest

    "shank" <> wrote in message
    news:lmkgb.10981$...
    >
    > What kind of element should I be using? I resorted to <div> because <hr>

    was
    > creating to much margin. If you can picture this scenerio...
    > 1) a 2px colored line going across the page
    > 2) a 2 px white space going across the page
    > 3) a 30px colored area going across the page (I have this)
    > 4) a 2 px white space going across the page
    > 5) a 2px colored line going across the page
    >
    > I had this using a table, but I'm trying to get the same look with CSS.
    > thanks!
    >


    body
    {
    background-color: white;
    color: black;
    }

    ..outer
    {
    border-top: solid 2px blue;
    border-bottom: solid 2px blue;
    padding-top: 2px;
    padding-bottom: 2px;
    }

    ..inner
    {
    background-color: #7f7;
    color: black;
    }

    <div class="outer">
    <div class="inner">
    some text
    </div>
    </div>

    Note: do not specify a height for the inner div. That way any text you put
    in there will determine the height nicely, regardless of font size.

    Cheers
    Richard.
    rf, Oct 7, 2003
    #11
    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. HJ
    Replies:
    5
    Views:
    833
    Jonathan N. Little
    Sep 1, 2006
  2. muggslab

    Div Height = Image height. help

    muggslab, Feb 1, 2010, in forum: HTML and CSS
    Replies:
    1
    Views:
    851
    muggslab
    Feb 1, 2010
  3. MyndPhlyp

    Setting <img> height to match <td> height

    MyndPhlyp, Dec 21, 2003, in forum: Javascript
    Replies:
    5
    Views:
    183
    MyndPhlyp
    Dec 22, 2003
  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:
    133
    Dietmar Meier
    Jan 31, 2005
  5. Replies:
    0
    Views:
    113
Loading...

Share This Page