[SOLVED] Help with wrapper divs and positioning

[Darkmatter5]

Here's the code in question

<div id="content" style="float: left;">
  <p style="padding: .5em; border-bottom: 1px solid #808000;"><span class="title_text">"<?php echo "$game_title"; ?>" profile for <?php echo $werb->getusername($_SESSION['member_id']); ?></span><br>
  On this page you can edit anything in regards to your account settings. You can also add and delete characters from your profile.</p>
  <div style="width: 100%; background-color: green; position: relative;">
    <div style="float: left; width: 40% height: 120px;">
      <b>BUILDERS</b><br>
      <ul>
      <li><a href="res_tools-modbuilder.php">Module Builder</a></li>
      <li><a href="res_tools-pcbuilder.php">Player Character Builder</a></li>
      <li><a href="res_tools-npcbuilder.php">Non-Player Character Builder</a></li>
      </ul>
      <b>USER TOOLS</b><br>
      <ul>
      <li>TEST</li>
      </ul>
    </div>
    <div style="float: right; width: 40%; height: 120px; padding: 1em; border: 2px solid #2F4F4F;">
      <b>Your chatacters</b><br>
      <?php $werb->list_pcs($_SESSION['member_id']); ?>
    </div>
  </div>
  <div style="width: 100%; background-color: blue;">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</div>
</div>
<div id="roundedBox" class="roundedBox" style="float: right; width: 200px; padding: 0 1em 0 1em";>
  <table width="100%" cellpadding="2" cellspacing="0" border="0">
    <tr><th style="border-bottom: 2px groove #F0FFF0;">TEMP HOLDER</th></tr>
    <tr valign="top"><th> </th></tr>
  </table>
  <div class="corner topLeft"></div>
  <div class="corner topRight"></div>
  <div class="corner bottomLeft"></div>
  <div class="corner bottomRight"></div>
</div>

 

I'm wanting the green div be above the blue div.  I also need the left and right floated divs to be wrapped by the green div.  The green div doesn't appear and the blue div renders on top of where the green div should be.

 

[attachment deleted by admin]

[fullyscintilla]

What happens when you remove the "relative" attribute of the "green" div?

[.josh]

okay I think this is what you're looking for (I commented out the php since those vars don't exist on my server):

 

<div id="content" style="float: left;">
  <p style="padding: .5em; border-bottom: 1px solid #808000;"><span class="title_text">"<?php //echo "$game_title"; ?>" profile for <?php //echo $werb->getusername($_SESSION['member_id']); ?></span><br>
  On this page you can edit anything in regards to your account settings. You can also add and delete characters from your profile.</p>
  <div style="width: 100%; background-color: green;position:relative;">
    <div style="float: left; width: 40%;">
      <b>BUILDERS</b><br>
      <ul>
      <li><a href="res_tools-modbuilder.php">Module Builder</a></li>
      <li><a href="res_tools-pcbuilder.php">Player Character Builder</a></li>
      <li><a href="res_tools-npcbuilder.php">Non-Player Character Builder</a></li>
      </ul>
      <b>USER TOOLS</b><br>
      <ul>
      <li>TEST</li>
      </ul>
    </div>
    <div style="float: right; width: 40%; height:120px;padding: 1em; border: 2px solid #2F4F4F;">
      <b>Your chatacters</b><br>
      <?php //$werb->list_pcs($_SESSION['member_id']); ?>
    </div>
    <div style="clear:both;"></div>
  </div>
	<div style="width: 100%; background-color: blue;">TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST</div>
</div>
<div id="roundedBox" class="roundedBox" style="float: right; width: 200px; padding: 0 1em 0 1em";>
  <table width="100%" cellpadding="2" cellspacing="0" border="0">
    <tr><th style="border-bottom: 2px groove #F0FFF0;">TEMP HOLDER</th></tr>
    <tr valign="top"><th> </th></tr>
  </table>
  <div class="corner topLeft"></div>
  <div class="corner topRight"></div>
  <div class="corner bottomLeft"></div>
  <div class="corner bottomRight"></div>
</div>

 

1) you were missing a ; after the width in one of your divs

2) since you were specifying a height in your left floating div, the contents were overflowing out of it.  You either need to remove the height from that (which is what I did) or specify an overflow option.

3) since you are floating things, in order to get the blue bar to appear under them, you need to clear them.  You can do this by a dummy div with 'clear: both'

 

[Darkmatter5]

The dummy div worked great!! Thanks for the help!