Height of Div within a Div

**Neal** · Jul 20 '05, 11:28 PM

Re: Height of Div within a Div

On 9 Aug 2004 20:32:33 -0700, Harry <harrysingh1976 @hotmail.com> wrote:
[color=blue]
> Hi,
>
> Code is posted below.
>
> I have a DIV that is placed within another div. The problem is on the
> first div, (which is meant to be a header) I cant get rid of the extra
> space that appears no matter what I change the settings to.
> About 5 pixels worth of space appears which I am hoping someone can
> tell me how to get rid off.
> (Am viewing in IE6.)[/color]

I'm viewing in a newsreader. Not particularly illuminating.

Let me suggest that you put this up on a webpage and post the link. It's
going to be much easier for everyone to look at, as it stands we must
individually make your web page for you which isn't ideal for consistency
and avoiding extra errors. Also, there may be information you have not
included here which would affect the result.

In the meantime, I want to critique your code. There are a few common
problems here, and you can easily fix them.
[color=blue]
> #events_box {
> width: 370px;
> border: 1px solid #000000;
> font-family: Arial, Helvetica, sans-serif;
> font-size: small;
> background-color: #B84900;
> font-weight: bold;
> text-transform: lowercase;
> color: #FFFFFF;
> float: none;
> position: relative;
> overflow: auto;
> padding-left: 5px;
> }[/color]

font-size: small - that's going to be smaller than people's default
setting. Reserve small sizes for stuff that isn't essential to read, like
legalese and such. Never reduce the size of text that you want to be read
- allow it to be 100% or 1em, or unstated.
[color=blue]
> #events_text {
> background-color: #FFFFFF;
> color: #000000;
> padding-left: 5px;
> text-transform: none;
> font-size: x-small;
> }[/color]

Same, even more so.
[color=blue]
> <div id="events_box" ><img src="assets/images/headings/events.gif"
> width="61" height="20">[/color]

img requires the alt attribute. Perhaps alt="Events" ?
[color=blue]
> <div id="events_text ">
> <p>Date: Aug 13th<br>
> Event: Mumbai Rouge presents - VIP Padlock Party<br>
> Venue:
> The Dunes Of Kensington<br>
> Event Type: Singles Dating Party<br>
> Price: £15 / £20<br >
> Details</p>[/color]

Is this REALLY a paragraph? Looks like a list to me. I'd use ul markup,
and you can remove bullets with CSS.
[color=blue]
> <p> </p>
> </div>
> </div>[/color]

The empty paragraph - what purpose does it serve? If it's a spacer, use
CSS to create a padding on the div. The only time I ever do this (and when
I do it it's a div) is to have something there which can clear a float. As
you're not floating, I don't see why.

**Andrew Thompson** · Jul 20 '05, 11:28 PM

Re: Height of Div within a Div

On Tue, 10 Aug 2004 11:24:37 -0400, Neal wrote:
[color=blue]
> (Am viewing in IE6.)
>
> I'm viewing in a newsreader. Not particularly illuminating.
>
> Let me suggest that you put this up on a webpage and post the link.[/color]

I am about to inentionally , and wantonly,
overstate what Neal just said...
<http://www.physci.org/codes/sscce.jsp>

Ahhh.. go on, sue me, for what it's worth.
(IE, almost, but not quite, nothing) :-P

--
Andrew Thompson
http://www.PhySci.org/ Open-source software suite
http://www.PhySci.org/codes/ Web & IT Help
http://www.1point1C.org/ Science & Technology

**Gus Richter** · Jul 20 '05, 11:28 PM

Re: Height of Div within a Div

Harry wrote:[color=blue]
> I have a DIV that is placed within another div. The problem is on the
> first div, (which is meant to be a header) I cant get rid of the extra
> space that appears no matter what I change the settings to.
> About 5 pixels worth of space appears which I am hoping someone can
> tell me how to get rid off.
> (Am viewing in IE6.)[/color]

I'm not quite sure where you see a problem.
Perhaps it's just below your image?
If so, and if you are in Standards Mode, then add:

img { display:block; }

--
Gus

Height of Div within a Div

Height of Div within a Div

Comment

Comment

Comment