CSS div's height

Xavier Perseguers · Dec 13, 2004

Hello,

I would like to know if there is a way specifying that a div section's
height *must* be a multiple of some pixel size. Eg. I include an image
as background and I would like the container to be a multiple of it to
get a /nice/ design.

Something like that

#height_constraint {
background-image: url('my_background.gif');
}

<div id="something">
<div class="height_constraint">
[lots of garbage]
</div>
<div>
foo
</div>
</div>

and hence the div "something" needs to be resized too...

Richard · Dec 13, 2004

Xavier said:
Hello,

I would like to know if there is a way specifying that a div section's
height *must* be a multiple of some pixel size. Eg. I include an image
as background and I would like the container to be a multiple of it to
get a /nice/ design.

height:150%;

practically any variable that uses numbers can also use %.
just remember that jpg's generally degrade a bit if you expand the size to
much.
better to use gif or png.

Steve Pugh · Dec 13, 2004

This can't be done with HTML or CSS alone. I can be done with
JavaScript - find the natural height of the div and increase it to the
next multiple of the image size.

height:150%;

practically any variable that uses numbers can also use %.

????

How does this help the OP?

He has a div with a background image. He wants the height of the div
to be a multiple of the height of the background image. Setting the
height of the div to 150% will not make the div a multiple of the
background image's height.

Steve

Xavier Perseguers · Dec 14, 2004

How does this help the OP?

He has a div with a background image. He wants the height of the div
to be a multiple of the height of the background image. Setting the
height of the div to 150% will not make the div a multiple of the
background image's height.

Steve

Yes, that's right! I do not want the image to be stretched. I know its
size I could do it myself. Here's another description to help all of you
understanding:

I have a background image that should be tiled vertically within a div
section. I need a trick to put another pattern at top and bottom as the
pattern is cool when it's repeated but not so nice at the beginning and
the end. It's really easy to put another image at the beginning but
doing the same at the end is not feasible unless you *know* what is
*always* the pattern at the end. And to know that, you need to say that
the div will always have its height being X times the height of the
tilling image (X being an integer of course).

Xavier Perseguers

Spartanicus · Dec 14, 2004

Xavier Perseguers said:
I would like to know if there is a way specifying that a div section's
height *must* be a multiple of some pixel size. Eg. I include an image
as background and I would like the container to be a multiple of it to
get a /nice/ design.

Set the div's line-height to the natural height of the background image.

Xavier Perseguers · Dec 14, 2004

Spartanicus said:
Set the div's line-height to the natural height of the background image.

Good idea but when I do this, my text content is to much spaced of
course. I tried creating another div within the div containing the
background-image property and setting its line-height to something
standard but then the outer div (with the background-image) does not set
its height correctly anymore, as if I did not specifiy any line-height
property. Small example showwing the problem:

<html>
<head>
<style>
#outer {
background-image:
url(http://www.mozilla.org/images/product-thunderbird-screen.png);
background-repeat: repeat-y;
line-height: 180px;
}
#inner {
/* line-height: 1em; */
}
</style>
</head>
<body>
<div id="outer">
<div id="inner">
This is a small test<br />
to see if it works<br />
well...
</div>
</div>
</body>
</html>

Try to comment out the #inner definition...

Xavier Perseguers

Spartanicus · Dec 14, 2004

Xavier Perseguers said:
Good idea but when I do this, my text content is to much spaced of
course. I tried creating another div within the div containing the
background-image property and setting its line-height to something
standard but then the outer div (with the background-image) does not set
its height correctly anymore, as if I did not specifiy any line-height
property. Small example showwing the problem:

We can't provide further help until you show us what you are actually
trying to do. Upload a real example that demonstrates the context using
real content.

Xavier Perseguers · Dec 14, 2004

Spartanicus said:
We can't provide further help until you show us what you are actually
trying to do. Upload a real example that demonstrates the context using
real content.

Actually the previous example was an example but if you really want to
see what I want to achieve, go to

http://test.perseguers.ch/photos/

for what I was able to do (problem is the spiral on the bottom left that
I fixed on top using another image). I did it using tables as it was
easier but as I won't be able to fix the bottom problem, I am working on
a CSS version on

http://test.perseguers.ch/photos/index2.php (I have other problems such
as space between my divs, ...)

Xavier Perseguers

Xavier Perseguers · Dec 17, 2004

Is there really nobody here able to help me on this interesting

problem? Should I figure out that this is not feasible in CSS?

Xavier Perseguers

rf · Dec 17, 2004

Xavier said:
Is there really nobody here able to help me on this interesting
problem? Should I figure out that this is not feasible in CSS?

It is not feasible.

Xavier Perseguers · Dec 17, 2004

rf said:
Xavier Perseguers wrote:

It is not feasible.

:-( It would have been so great...

Positioning CSS components	1	Nov 16, 2023
Stuck with html and css	25	Dec 14, 2022
Background image not showing up on html page	3	Sep 23, 2023
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022
<Button ...> display is fine, except for two things	1	Oct 23, 2023
How to make a div select work?	5	Jan 13, 2022
Hover state on an element stuttering when I'm close to the edge, or move my mouse really fast	1	Feb 2, 2023

CSS div's height

Xavier Perseguers

Richard

Steve Pugh

Xavier Perseguers

Spartanicus

Xavier Perseguers

Spartanicus

Xavier Perseguers

Xavier Perseguers

rf

Xavier Perseguers

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads