min-height on a div

Malcolm Collett · Jan 13, 2004

I am still learning CSS and playing around with layouts.

On this site
http://users.iafrica.com/m/mc/mcollett/SPS/Home.htm
I have a problem that I have not been able to solve.

(Please don't worry about the colours, they're there so I can see the divs)

If I reduce the font size, the clown pushes his feet through the bottom of
the pink div and kicks the "home" buttom out of its rightful place.

If I have a vertical nav bar (by changing <div id="NavTop"> to <div
id="NavLeft">), when the text size is reduced the entire nav bar is moved to
the right by the width of the clown image. This leaves a big blank yellow
space between the left edge and the nav bar.

I have tried min-height:Xpx for the pink div, but this doesn't work (IE).

Any suggestions on how to fix this.

Malcolm

Richard · Jan 13, 2004

Malcolm said:
I am still learning CSS and playing around with layouts.

On this site
http://users.iafrica.com/m/mc/mcollett/SPS/Home.htm
I have a problem that I have not been able to solve.

(Please don't worry about the colours, they're there so I can see the
divs)

If I reduce the font size, the clown pushes his feet through the bottom
of the pink div and kicks the "home" buttom out of its rightful place.

If I have a vertical nav bar (by changing <div id="NavTop"> to <div
id="NavLeft">), when the text size is reduced the entire nav bar is moved
to the right by the width of the clown image. This leaves a big blank
yellow space between the left edge and the nav bar.

I have tried min-height:Xpx for the pink div, but this doesn't work (IE).

Any suggestions on how to fix this.

Malcolm

Put the clown into a seperate division than the text.
The image will not change with the text.
Just make sure the text division is a tad bigger than the clown.

"Float" causes the two divisions to be side by side.
"clear" ends the "floating" of the previous "float".

<style type="text/css">

..clown { width:100px; height:100px; background

ink; float:left }
..intro {height:102px; background: pink; }
..menubar {height:100px; background:lightblue; clear:left;}

</style>

</HEAD>
<BODY>

<div class="clown">
<img src="Sallys.gif">
</div>
<div class="intro">
<h1>Sallys Party Services</h1>
</div>

<div class="menubar">
text
</div>

Lauri Raittila · Jan 13, 2004

In said:
I am still learning CSS and playing around with layouts.

On this site
http://users.iafrica.com/m/mc/mcollett/SPS/Home.htm
I have a problem that I have not been able to solve.

(Please don't worry about the colours, they're there so I can see the divs)

If you don't use colors, your problem is different, so it would have been
good to specify it bit better.

If I reduce the font size, the clown pushes his feet through the bottom of
the pink div and kicks the "home" buttom out of its rightful place.

Nice. That is good thing - that way space is not wasted. People use small
fonts to save space.

If I have a vertical nav bar (by changing <div id="NavTop"> to <div
id="NavLeft">), when the text size is reduced the entire nav bar is moved to
the right by the width of the clown image. This leaves a big blank yellow
space between the left edge and the nav bar.
Any suggestions on how to fix this.

<h>Case 1. Navigation on left</h>

Is
#NavLeft {clear:left;}
enaugh?

If not maybe:

<div style="clear:left;">
</div>

at the bottom of the #TopWrapper with that

<h>Case 2. navigation on top</h>

Ignore "Richard" <[email protected]> as his way will break when text size
is larger. And you already had that, so it would break immidiately...

Better than that is to
#NavTop {clear:left;}
and move end tag of <div id="TopWrapper"> after end tag of <div
id="NavTop">

Empty div with clear would solve this too, but then you would need that
empty div.

I have tried min-height:Xpx for the pink div, but this doesn't work (IE).

Well, that's one of its bugs. There is workarounds for that like:
http://www.svendtofte.com/code/max_width_in_ie/
but I wouldn't use that here.

Richard · Jan 14, 2004

I don't just write my stuff without some thought behind it all, jackass.
I do test the shit as I create it.
I also write my stuff with text size in mind because anything I can't stand,
is a site that uses 8 pt text or smaller then cram the borders with large
print advertising.
I'm a damned bit sick and tired of this "don't listen to richard" crap
anywhere I go when the person saying it is only saying it to harass me.
You put my stuff I gave him up on a web site, post it, and give me the link
then tell me where and how it breaks, asshole.

brucie · Jan 14, 2004

I'm a damned bit sick and tired of this "don't listen to richard" crap

its damn good advice.

anywhere I go when the person saying it is only saying it to harass me.

you mean like when i supply an answer to a question that you don't like
you follow it up with harassing comments?

rf · Jan 14, 2004

Malcolm Collett said:
I am still learning CSS and playing around with layouts.

On this site
http://users.iafrica.com/m/mc/mcollett/SPS/Home.htm
I have a problem that I have not been able to solve.

(Please don't worry about the colours, they're there so I can see the divs)

If I reduce the font size, the clown pushes his feet through the bottom of
the pink div and kicks the "home" buttom out of its rightful place.

If I have a vertical nav bar (by changing <div id="NavTop"> to <div
id="NavLeft">), when the text size is reduced the entire nav bar is moved to
the right by the width of the clown image. This leaves a big blank yellow
space between the left edge and the nav bar.

I have tried min-height:Xpx for the pink div, but this doesn't work (IE).

Any suggestions on how to fix this.

Add clear: left to the your navleft and navtop rules.

Cheers
Richard.

Duende · Jan 14, 2004

While sitting in a puddle Richard scribbled in the mud:

I'm a damned bit sick and tired of this "don't listen to richard"

Who is this Richard?

rf · Jan 14, 2004

Richard said:
"Float" causes the two divisions to be side by side.

No it does not. I explained this very carefully to you just the other day.
You even seem to have read my explanation because you suddenly discovered
that you needed to specify margins, something I discussed there.

"clear" ends the "floating" of the previous "float".

No it does not. It ensures that the cleared element is below (that is, *not*
to the side of) the previous floated element. Clear has no effect on the
previous float, and certainly not an effect like "ending" it.

Read this: http://www.w3.org/TR/REC-CSS2/visuren.html#floats

Cheers
Richard.

Malcolm Collett · Jan 14, 2004

Lauri Raittila said:
divs)

If you don't use colors, your problem is different, so it would have been
good to specify it bit better.

Nice. That is good thing - that way space is not wasted. People use small
fonts to save space.

<h>Case 1. Navigation on left</h>

Is
#NavLeft {clear:left;}
enaugh?

If not maybe:

<div style="clear:left;">
</div>

Thanks Lauri

I went with the empty div. This way I can change the style sheet without
having to alter the html.

Malcolm

rf · Jan 14, 2004

Richard said:
I don't just write my stuff without some thought behind it all, jackass.
I do test the shit as I create it.
I also write my stuff with text size in mind because anything I can't stand,
is a site that uses 8 pt text or smaller then cram the borders with large
print advertising.
I'm a damned bit sick and tired of this "don't listen to richard" crap
anywhere I go when the person saying it is only saying it to harass me.
You put my stuff I gave him up on a web site, post it, and give me the link
then tell me where and how it breaks, asshole.

You are bordering on harrasment here. One of us might just complain to your
ISP.

Lauri Raittila · Jan 14, 2004

In said:
I don't just write my stuff without some thought behind it all, jackass.

Do you really think I didn't test your answer before saying it should be
ignored? I did, with browser that don't have the bug of streching div.

I did that, even if I was 99% sure that it wouldn't work.

I do test the shit as I create it.

Really? How is it possible you didn't spot the fact that your thing would
break, if text size is bigger than yours.

How did you test it? Using IE? Using IE in quirks mode?

I also write my stuff with text size in mind because anything I can't stand,
is a site that uses 8 pt text or smaller then cram the borders with large
print advertising.

Well, you didn't write your advice considering that. 102px is too little
space if you use higher than 102px text. As font-size is not fixed, it
means that sometimes it will be over 102px high. And if it is, and you
have set height:102px, the correct behaviour is to overflow text outside
box. (I have no idea if you can use big enaugh size in IE for example, I
think it has quite limited ability to change font-size, so it is possible
that you don't see it break when using IE's Largest setting with normal
screen resolution setting.)

I'm a damned bit sick and tired of this "don't listen to richard" crap
anywhere I go when the person saying it is only saying it to harass me.

Ever thought that reason is that you have not yet managed to get anything
right, despite being trying for weeks? I have always thought that people
can learn, but I never thought it could be that slow process.

I wonder why you still believe that everything you do is correct thing?

You put my stuff I gave him up on a web site, post it, and give me the link
then tell me where and how it breaks, asshole.

I can't do that, it's copyrighted material. Anyway it is not my problem
if you don't believe me. It's not my problem if OP does believe you
either, but if OP asks, I can supply page with your markup, as well as
screen shot of how it breaks. OTOH, OP can try it himself as well.

rf · Jan 14, 2004

Duende said:
While sitting in a puddle Richard scribbled in the mud:

Who is this Richard?

Just some dickhead

Cheers
the REAL Richard.

100% min-height div with margin and no scrollbars?	14	Jun 16, 2009
min-height div background-image	3	Jun 19, 2005
Help with my responsive home page	2	Dec 14, 2022
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help	0	Dec 9, 2019
minimum height for a layout	3	Nov 28, 2007
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
DIV with rounded Corners (CSS) AND full height	2	Mar 11, 2007
Nav list item width	3	Jan 15, 2004

min-height on a div

Malcolm Collett

Richard

Lauri Raittila

Richard

brucie

rf

Duende

rf

Malcolm Collett

rf

Lauri Raittila

rf

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads