Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Variable div height challenge

Status
Not open for further replies.
elmiocid

elmiocid

Technical User
Jul 29, 2007
22
ES
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
 
Sort by date Sort by votes
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
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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" "<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>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Vertical height of homepage ideals
Replies
5
Views
395
cadel
cadel
LittleNFiesty
  • Locked
  • Question
CSS div issue
Replies
1
Views
99
jman78
jman78
LittleNFiesty
  • Locked
  • Question
tables vs. div tags - advantages/disadvantages 2
Replies
6
Views
170
audiopro
audiopro
audiopro
  • Locked
  • Question
Diverting to low res page for mobile devices
Replies
16
Views
256
audiopro
audiopro
ColdPhreze
  • Locked
  • Question
Scrolling problem with show/hide div 1
Replies
2
Views
96
ColdPhreze
ColdPhreze

Part and Inventory Search

Sponsor

Back
Top