Hello all, first let me say that I am by no means overly skilled with css. I am competent with it, but it often leaves me scratching my head. Currently I'm having problems stacking my divs directly on top of one another. My html looks like:

    <div id="sets">
<div id="test_sets">
  <div id="set1" class="set">
    <h2>Set 1</h2>
    <div id="s1s01" class="song">
      <div id="test_div" class="song_name_div">
        <h6>Song name:</h6>
        <input name="s1s01_name" size="30" type="text">

      </div>
      <div id="test_div2" class="song_loc_div">
        <h6>File location:</h6>
        <input name="upload[]" type="file">
      </div>
      <div id="s1s01_addInfo" class="addInfo">
        <p>additional info:</p>
        <textarea name="s1s01_addInfo" rows="1" cols="40" value="unknown"></textarea>

      </div>
      <p class="remove_song">remove song -</p>
    </div>
    <div id="newDiv" class="song">
      <div id="test_div" class="song_name_div">
        <h6>Song name:</h6>
        <input name="s1s01_name" size="30" type="text">
      </div>

      <div id="test_div2" class="song_loc_div">
        <h6>File location:</h6>
        <input name="upload[]" type="file">
      </div>
      <div id="s1s01_addInfo" class="addInfo">
        <p>additional info:</p>
        <textarea name="s1s01_addInfo" rows="1" cols="40" value="unknown"></textarea>

      </div>
      <p class="remove_song">remove song -</p>
    </div><p class="add_song">add song +</p>
  </div>
</div>

and my css looks like:

    .set{
  width: 570px;
  /*"overflow: hidden" allows for auto-vertical expansion*/
      overflow: hidden;
      border-style:solid;
  border-width:5px;
  border-color:red;
      background: white;
      opacity:0.4;
      filter:alpha(opacity=40);

      -webkit-border-radius: 24px;

  -moz-border-radius: 24px;
}
.set h2{
  position: relative;
  top: 2px;
  left: 10px;
  font-family: verdana;
  font-size: 14px;
  color: navy;      
}

.song{
  position: relative;  
  padding:0;
  top: -20px;   
  left: 10px;
  width: 530px;
      height: 125px;
  background: blue;
      opacity:0.9;
      filter:alpha(opacity=90);

  -webkit-border-radius: 24px;

  -moz-border-radius: 24px;
}

    .song_name_div{
      position: relative;
      left: 10px;
      top: 10px;
      width: 250px;
      height: 80px;
      background: #76a8d7;
      opacity:0.9;
      filter:alpha(opacity=90);

      -webkit-border-top-left-radius: 24px;
  -webkit-border-bottom-left-radius: 24px;

  -moz-border-radius-topleft: 24px;
  -moz-border-radius-bottomleft: 24px;
    }

.song_name_div input{
  position: relative;
      left: 18px;
      bottom: 10px;
}

.song_name_div h6 {
  position: relative;
      top: 15px;
      left: 10px;
      color: #F2EFE9;
      font-family: Verdana;
      font-size: 14px;
}

/*song_loc_div's div positioning
meant as a reflection of song_name_div*/
.song_loc_div{
  position: relative;
  left: 265px;
  bottom: 102px;
      width: 250px;
      height: 80px;
      background: #76a8d7;
      opacity:0.9;
      filter:alpha(opacity=90);

      -webkit-border-top-right-radius: 24px;
  -webkit-border-bottom-right-radius: 24px;

  -moz-border-radius-topright: 24px;
  -moz-border-radius-bottomright: 24px;
    }

.song_loc_div input{
  position: relative;
      bottom: 10px;
}

.song_loc_div h6 {
  position: relative;
      top: 15px;
      left: 5px;
      color: #F2EFE9;
      font-family: Verdana;
      font-size: 14px;
}

.addInfo{
  position: relative;
  left: 20px;
  bottom: 112px;
  height: 20px;
}

.addInfo textarea{
  position: relative;
  left: 95px;
  bottom: 35px;
  color: navy;
  font-family: verdana;
}

p.remove_song{
  position: relative;
  left: 430px;
  bottom: 145px;
  width: 100px;
  color: white;
}

Can anyone see why I would be getting a sizable gap between <div id="s1s01" class="song"> and <div id="newDiv" class="song">? setting the margins and paddings to zero doesn't help...
All help is greatly appreciated, thanks in advance :)

1 answer

o.k.w 2355
2
points
This was chosen as the best answer

I would recommend that you re-code a big portion of the CSS. The manner you are doing now is using css position attribute to layout the elements, The gap aside, on my IE8 the layout is totally messed up, although there's no mysterious gap. See belwo screenshot:

IE 8

The HTML markup is pretty OK actually.

For the CSS, try not to use left/top/bottom/right positioning. As your layout is pretty tightly stacked and contained, use margins and paddings instead. For DIVs or other block elements (e.g. P, H6), use display: inline or float: left; /* or right */ to place them side-by-side. You can try table layout too.

I'm not able to explain the mystical gap but if you are interested, add the following to your CSS and the gap disappears (on FF and Webkit browsers) .

div {border: solid 1px transparent;}

If you are taking up my suggestion, let me know if you need further assistance. I would have code the whole thing for you if I've time.

Answered over 9 years ago by o.k.w
  • Thanks. Setting the div's borders did the trick. Now I'm re-writing the css using your 'display' suggestion Dan Woodson over 9 years ago
  • I can see how float would be useful for horizontal alignment, but what about vertical? Now I'm working with an image on the page using 'float'... Dan Woodson over 9 years ago
  • For vertical positioning, float probably is not a good idea. If you want top place it 'hanging' somewhere in a space, and margins can't help, you might have to fall back to relative/absolute positioning. o.k.w over 9 years ago