Unwanted white space with relative positioning 1

Glasgow · May 23, 2005

I have a problem displaying 4 'panels' using the <div> tag and relative positioning where the height of the parent div expands even when the position of the panel should not affect its height because it is horizontally aligned with an existing panel. In short, the yellow area is too big!

Any thoughts?

Thanks in advance.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Testing with 4 panels</title>
</head>

<body style="background-color: blue;font-family:Verdana, Arial, Helvetica, sans-serif; font-size:8.5pt;">
<div style="position:relative; left:130px; top:100px; background-color: yellow;">

<div style="position:relative; top:5px; width:80%; margin-left: 14px; margin-right: 5px;">
  <p>I'd like to be able to adjust the volume of text in this area of the window
     without manually changing the positions of the 4 panels below. Hence I have applied
     relative positioning to them. I don't pretend to understand the values
     I have placed in the top & left properties but they seem to achieve the
     desired result except that the 'parent' div which controls the yellow
     background appears to increase to accommodate the height of all 4 panels
     (or thereabouts) even though they occur in two horizontally parallel pairs. 
     I really want to keep the yellow area just big enough vertically to accommodate
     this text and the 4 panels. </p>
</div>
<div style="position:relative; top:10px;   left:10px;  width:260px; height:70px;
            background-color:green;"></div>
<div style="position:relative; top:-60px;  left:300px; width:260px; height:70px;
            background-color:green;"></div>
<div style="position:relative; top:-40px;  left:10px;  width:260px; height:70px;
            background-color:green;"></div>
<div style="position:relative; top:-110px; left:300px; width:260px; height:70px;
            background-color:green;"></div>
</div>
</body>
</html>

ChrisHunt · May 24, 2005

That's how relative positioning works. When you put in a rule like

Code:

position:relative; top:10px; left:10px;

you're saying "take this element and move it 10 pixels left and ten pixels down from where you were going to render it anyway". The space where the element would have been rendered is left blank.

A lot of things that you're doing would be better done with margins and padding. To position your four divs, you'll need to put them into a containing div (some other structure like a <ul> might actually be more appropriate), and use either absolute positioning or floats to get them where you want them.

Here's a way to do it with floats, starting with some CSS styles:

Code:

div {
   width: 550px;
   overflow: auto;
   margin-l
}

div.blocks div {
   width:260px;
   height:70px;
   background-color:green;
   margin: 0;
   float: left;
}

And now the HTML:

Code:

<div class="blocks">
  <div style="margin: 0 30px 30px 0;"></div>
  <div style="margin: 0 0 30px 0;"></div>
  <div style="margin: 0 30px 0 0;"></div>
  <div></div>
</div>

The margin settings for the individual divs control the spacing around them. The width of the enclosing div should be (2 x 260px) + the sum of horizontal margins (30px in this case).

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

Glasgow · May 24, 2005

Thanks Chris - that's a big help and seems to be just what I need.

Just to split hairs, am I right in thinking your 'margin-l' has been chopped off and should read 'margin-left:10px' for example?

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!

Unwanted white space with relative positioning 1

Glasgow

IS-IT--Management

ChrisHunt

Programmer

Glasgow

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor