×
INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Contact US

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here

Variable div height challenge

Variable div height challenge

Variable div height challenge

(OP)
Hi,

I'm trying to make a div to hold the main contain of the pages of my website

I've coded it in an external style sheet so

#contenido
{
  position:absolute;
  width:777px;
  height:446px;
  left:112px; (need a better centering value)
  top:146px;
  z-index:1
}

As it needs a variable height to allow for the different page legths, I've tried these but dint work

1. Not to define heigth at all to let contents define it: didnt work, got a height of about 1 px and contents below outside div
2. Added overflow: I dont want scrolling bars
3. Gave height 100%, width 777px, doesnt work in all browsers versions

How can I define the height of a flexible div?

Thank you
 

RE: Variable div height challenge

Are you sure it needs to be absolutely positioned? That tends to make life more complicated.

Not specifying a height should make it work as desired - but it depends what styles you've applied to the div's contents.

Can you post the URL of the page your changing?

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

RE: Variable div height challenge

It should work with absolute positioning unless you are also absolutely positioning the data inside it.

As ChrisHunt said, absolute positioning tends to create more problems than it solves.

 

Greg
People demand freedom of speech as a compensation for the freedom of thought which they seldom use. Kierkegaard

RE: Variable div height challenge

(OP)
Hi, thank you for your replies

I had all divs absolutely positioned, which works for the home page, but the height is not enough for the rest of the pages. I've changed the divs inside the main div for relative positioning, then took the height off (didnt declare any height) but it doesnt work.. contents go all over the place, as if by declaring relative they don´t obey the other declarations for left, top etc..

The website is not online yet as I'm still starting it... so  I'm pasting here the home.htm and style.css files so see if you notice something obvious that I don´t!

cheers again

1_________rinconDueroStyle.css__________________

/* Created on 11-Feb-2010 09:49:36 */

body
{
 background-image:url('Pix/greenGrad3.png');
}
div.banner
{
  position:absolute;
  width:777px;
  height:108px;
  left:125px;
  top:38px;
  z-index:0;
  background:url(Pix/bannerGold.jpg);
 }
div.navigation
{
  position:absolute;
  width:777px;
  height:33px;
  left:125px;
  top:146px;
  background-color:#b3a986;
  border-top:double #003300;
  z-index:2;
}
.marco
{
 border:inset #b3a986;
}
a{float:left;}
 
a:link,a:visited,a:hover,a:active
{
 border-style:none;
 text-decoration:none;
 }
ul
{
float:left;
list-style-type:none;
margin:0;
padding-left:140px;
}
li
{
display:inline;
}
div.contenido
{
  position:absolute;
  width:777px;
  height:524px;
  left:125px;
  top:182px;
  background-color:#003300;
  color:#b3a986;
  font-family:sans-serif;
  font-size:12px;
  z-index:1
}

2____home.htm____________________

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Rincon del Duero Portugal border</title>
  <meta http-equiv="Content-Type" content= "text/html; charset=us-ascii">
<link rel="stylesheet" href="rinconDueroStyle.css" type=
  "text/css">
</head>
<body>
<div class="banner"></div>
<div class="navigation">
  <ul>
    <li><a href="home.htm"><img src="Pix/inicioBtt.gif" width="100" height="50" border="0" alt="Inicio"></a></li>
    <li><a href="alojamiento.htm"><img src="Pix/aloBtt.gif" width="100" height="50" border="0" alt="Alojamiento"></a></li>
    <li><a href="entorno.htm"><img src="Pix/entornoBtt.gif" width="100" height="50" border="0" alt="Entorno"></a></li>
    <li><a href="situacion.htm"><img src="Pix/situacionBtt.gif" width="100" height="50" border="0" alt="Situacion"></a></li>
    <li><a href="contactar.htm"><img src="Pix/contactarBtt.gif" width="100" height="50" border="0" alt="Contactar"></a></li>
  </ul>
</div>
<div class="contenido">
  <div id="bar" style="position:absolute; width:215px; height:361px; z-index:4; left: 0px; top: 50px"><img class="marco" src="Pix/bar2.jpg" width="215" height="361" alt="Pinilla's Bar"></div>
  <div id="text" style="position:absolute; width:213px; height:358px; z-index:1; left:264px; top:52px">
    <p>Bienvenidos al bar de Pinilla de Fermoselle</p>
    <p>Estamos en el corazon del Parque Natural de Los Arribes del Duero, Zamora</p>
    <p>Ven a probar nuestras especialidades: cabrito asado criado al aire puro
      de nuestros campos, y vino de la tierra madurado al sol en las laderas del
      Duero</p>
    <p>Y para disfrutar de unos dias contemplando la belleza de nuestra tierra
      tambien ofrecemos excelente alojamiento</p>
    <p>Explora los enlaces superiores para mas informacion</p>
 </div>
  <div id="pinilla" style="position:absolute; width:246px; height:103px; z-index:5; left: 493px; top: 50px"><img src="Pix/pinillaAlt.jpg" width="246" height="103" alt="Pinilla de Fermoselle"></div>
  <div id="barCartel" style="position:absolute; width:127px; height:224px; z-index:2; left: 568px; top: 196px"><img class="marco" src="Pix/cartel.jpg" width="127" height="222" alt="Cartel del bar"></div>
</div>
</body>
</html>

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members! Already a Member? Login


Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close