setting height on <div>

[shank]

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

 

[Matthias Gutfeldt]

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

 

[shank]

<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

 

[Matthias Gutfeldt]

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

 

[shank]

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!

 

[Toby A Inkster]

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

 

[Richard]

shank schrieb:

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.

 

[Matthias Gutfeldt]

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

 

[shank]

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

 

[kchayka]

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

 

[rf]

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.