4 replies [Last post]
cagney31
cagney31's picture
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT+2
Joined: 2012-09-19
Posts: 2
Points: 3

Hello, i have three divs nested. One of them has the position absolute. I like them all to stretch vertically when the content increases. Two of them stretch but the one with position absolute does not..

Would like some help, thanks Karin.

<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body style="">
<div id="Table_01">
 <div id="container_">	
  <div id="logo_"> </div>
  <div id="nav_"> </div>
  <div id="text_"> </div>
  <div id="foto_"> </div>
 </div>
  <div id="voet_"> </div>
  <div id="baksteen"> </div>
</div>
</body>

@charset "utf-8";
/* CSS Document */
 
* {
	margin:0;
	padding:0;
}
 
 
#Table_01 {
	position:relative;
	width:960px;
	margin:auto;
}
#container_  {
	position:relative;
	width:960px;
	background-color:#000;
	min-height:638px;
	float:left;
 
}
#logo_ {
	position:relative;
	width:365px;
	min-height:661px;
	float:left;
	background-image:url(../images/logo.jpg);
	background-repeat:no-repeat;
	background-color:#000;
 
}
 
#nav_ {
	position:relative;
	width:595px;
	height:111px;
	float:left;
	background-image:url(../images/nav.jpg);
}
 
 
 
 
#foto_ {
	position:relative;
	width:595px;
	min-height:550px;
	float:left;
	background-image:url(../images/foto.jpg);
	background-repeat:no-repeat;
	background-color:#000;
}
#text_ {
    border: 1px solid #CC3499;
    border-radius: 10px 10px 10px 10px;
    float: left;
    left: 40px;
    max-width: 600px;
    min-height: 150px;
    padding: 15px;
    position: absolute;
    top: 160px;
    z-index: 2;
}

zyconn
zyconn's picture
Offline
newbie
Last seen: 9 years 45 weeks ago
Timezone: GMT+2
Joined: 2012-09-16
Posts: 10
Points: 15

something general about

something general about absolute positioning:
That behavior is exactly what position:absolute; is for - it doesn't care for anything around it. It's removed from the flow of the document.

block elements like a div should increase in width and/or height if there is more content inside them. To see why this isn't happening for you, a live example would be great.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Test cases

It is a good practice to include specimen content to test your layout coding.

What you have does cause the #text div to expand with increasing content. As zyconn pointed out, an absolute positioned element is blind to its neighbors, and those neighbors are blind to it. My added borders show this.

I have no idea why you're floating any of these elements. Not floating them makes no difference. Be sure you have a clear and compelling reason before messing with the document's flow.

I'm pretty sure that what you've coded is not what you want. Can you be more clear on the desired final layout?

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" 
	  content="text/html; charset=UTF-8" />
 
    <title>Test</title>
 
    <style type="text/css">
 
      /*Borders and margins added for clarity*/
      div {
        border: 1px solid black;
        margin: 2px;
        }
 
      #Table_01 {
        overflow: hidden;  /*Sets new block formatting content in order to
                             enclose float descendants.*/
        position:relative;
        width:960px;
        margin:auto;
        }
 
      #container_  {
      position:relative;
      width:960px;
      min-height:638px;
      float:left;
      }
 
      #logo_ {
        position:relative;
        width:365px;
        min-height:661px;
	float:left;
	background-image:url(../images/logo.jpg);
	background-repeat:no-repeat;
        }
 
      #nav_ {
	position:relative;
	width:595px;
	height:111px;
	float:left;
	background-image:url(../images/nav.jpg);
        }
 
      #foto_ {
	position:relative;
	width:595px;
	min-height:550px;
	float:left;
	background-image:url(../images/foto.jpg);
	background-repeat:no-repeat;
        }
 
      #text_ { /*Float and absolute position are mutually exclusive. Absolute
                 trumps float, so float property deleted.*/
        border: 1px solid #CC3499;
        border-radius: 10px;
        left: 40px;
        max-width: 600px;
        min-height: 150px;
        padding: 15px;
        position: absolute;
        top: 160px;
        z-index: 2;
        }
 
    </style>
  </head>
 
  <body>
    <div id="Table_01">
      <div id="container_">	
	<div id="logo_">logo </div>
	<div id="nav_">nav </div>
	<div id="text_">
	  <p>Phasellus pellentesque, nunc ac varius feugiat, est magna
	    pellentesque lectus; sit amet sollicitudin urna est a sem. Cum
	    sociis natoque penatibus et magnis dis parturient montes,
	    nascetur ridiculus mus. Vestibulum nec nulla est? Morbi vel
	    sapien orci, quis blandit diam! Proin porta, urna sed posuere
	    venenatis, risus purus hendrerit lacus, ultricies semper nulla
	    mauris in tellus. Sed est lorem, semper cursus bibendum a,
	    adipiscing ac sem. Duis viverra gravida sem a vulputate!
	    Maecenas in tortor orci; et commodo enim. In aliquam pulvinar
	    arcu vitae mattis. Quisque tristique fringilla euismod. Mauris
	    nunc ligula, molestie ut pellentesque non, pharetra ut enim!
	    Nulla malesuada congue sapien nec suscipit? Vivamus nisl nunc,
	    faucibus in rhoncus id, ornare et urna. Etiam congue enim non
	    mauris dignissim quis vulputate turpis cursus! Suspendisse vel
	    orci sit amet purus sollicitudin imperdiet.</p>
	</div>
	<div id="foto_">foto </div>
      </div>
      <div id="voet_">voet </div>
      <div id="baksteen">baksteen </div>
    </div>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

cagney31
cagney31's picture
Offline
newbie
Last seen: 9 years 46 weeks ago
Timezone: GMT+2
Joined: 2012-09-19
Posts: 2
Points: 3

example site

When text stretches i like for the background to stretch with it. There are three divs nested, but i do understand because of the position absolute of the text area, the underlyin divs ignore the stretching.
Is there another way to make it possible?
Thanks

AttachmentSize
sitfreke.jpg 508.96 KB
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 22 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Content?

I cannot stress enough the need for sample content. Except for #text, you have only background images. Background is not content. Here is another guess at how you might code the page.

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" 
	  content="text/html; charset=UTF-8" />
 
    <title>Test</title>
 
    <style type="text/css">
 
      /*Borders and margins added for clarity*/
      div {
        border: 1px solid black;
        margin: 2px;
        }
 
      #Table_01 {
        overflow: hidden;  /*Sets new block formatting content in order to
                             enclose float descendants.*/
        position:relative;
        width:960px;
        margin:auto;
        }
 
      #container_  {
      position:relative;
      width:960px;
      min-height:638px;
      float:left;
      }
 
      #banner {
        overflow: hidden;
        position: relative;
        }
 
      #banner h1 {
        width:365px;
	float:left;
	background-image:url(../images/logo.jpg);
	background-repeat:no-repeat;
        }
 
      #nav_ {
	background-image:url(../images/nav.jpg);
	float:left;
	position:absolute;
        right: 0;
        bottom: 0;
        }
 
      #foto_ {
	background: lightgray url(../images/foto.jpg) right top no-repeat;
        overflow: hidden;
        }
 
      #text_ {
        border: 1px solid #CC3499;
        border-radius: 10px;
        margin-left: 40px;
        max-width: 600px;
        padding: 15px;
        margin-top: 160px;
        }
 
    </style>
  </head>
 
  <body>
    <div id="Table_01">
      <div id="container_">	
	<div id="banner"><h1>logo</h1>
	  <div id="nav_">nav </div>
</div> 	
	<div id="foto_">
	  <div id="text_">
	    <p>Phasellus pellentesque, nunc ac varius feugiat, est magna
	    pellentesque lectus; sit amet sollicitudin urna est a sem. Cum
	    sociis natoque penatibus et magnis dis parturient montes,
	    nascetur ridiculus mus. Vestibulum nec nulla est? Morbi vel
	    sapien orci, quis blandit diam! Proin porta, urna sed posuere
	    venenatis, risus purus hendrerit lacus, ultricies semper nulla
	    mauris in tellus. Sed est lorem, semper cursus bibendum a,
	    adipiscing ac sem. Duis viverra gravida sem a vulputate!
	    Maecenas in tortor orci; et commodo enim. In aliquam pulvinar
	    arcu vitae mattis. Quisque tristique fringilla euismod. Mauris
	    nunc ligula, molestie ut pellentesque non, pharetra ut enim!
	    Nulla malesuada congue sapien nec suscipit? Vivamus nisl nunc,
	    faucibus in rhoncus id, ornare et urna. Etiam congue enim non
	    mauris dignissim quis vulputate turpis cursus! Suspendisse vel
	    orci sit amet purus sollicitudin imperdiet.</p>
	  </div>
	</div>
      </div>
      <div id="voet_">voet </div>
      <div id="baksteen">baksteen </div>
    </div>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.