how to force divs to display inside a wapper div and not bleed outside

[Darkmatter5]

Here's my CSS

#content { padding: 1em; width: 75%; position: relative; background-color: green; }
#form_mainwrapper { width: 45%; }
#form_maintitle { width: 100%; padding: 5px; border-top: 2px solid black; border-left: 2px solid black; border-right: 2px solid black; border-bottom: 1px solid black; font-weight: bold; font-size: 14px; }
#form_maintable { width: 100%; min-height: 200px; padding: 5px; border-left: 2px solid black; border-right: 2px solid black; }
#form_mainfooter { width: 100%; padding: 5px; border-top: 1px solid black; border-left: 2px solid black; border-right: 2px solid black; border-bottom: 2px solid black; text-align: center; }

 

Here's the PHP file

<div id="content" style="float:left;">
  <p style="padding:.5em; border-bottom:1px solid #808000;"><span class="title_text">"<?php echo "$game_title"; ?>" player character builder</span><br>
  On this page you can create and edit your player characters.</p>
  <div id="form_mainwrapper" style="float:left;">
    <form name="page1" method="post">
    <div id="form_maintitle" style="background-color:#D3D3D3;">Step 1: Naming and class selection</div>
    <div id="form_maintable" style="background-color:#D3D3D3;">
      <p><label for="firstname">First name: </label><input type="text" name="firstname" size="50" value="<?php if(isset($_GET['id'])) { $werb->getdata("forename","SELECT forename FROM player_characters WHERE character_id='$_GET[id]'"); } ?>" disabled="disabled" ></p>
      <p><label for="lastname">Last name: </label><input type="text" name="lastname" size="50" value="<?php if(isset($_GET['id'])) { $werb->getdata("surname","SELECT surname FROM player_characters WHERE character_id='$_GET[id]'"); } ?>" disabled="disabled" ></p>
      <p><label for="class">Class: </label><?php $werb->dropdown("class","SELECT class_id, class FROM d_classes ORDER BY class ASC","","showClassdescr"); ?></p>
      <div style="width:100%;">Class description:</div>
      <div id="class_descr" style="width:100%; color:#B22222; background-color:#D3D3D3;"><i><b>Class description will display here when a class is chosen.</b></i></div>
    </div>
    <div id="form_mainfooter" style="background-color:#D3D3D3;"><input type="submit" name="submitp1" value="Submit step 1"></div>
    </form>
  </div>
  <div id="form_mainwrapper" style="float:right;">
    <form name="page2" method="post">
    <div id="form_maintitle" style="background-color:#F0E68C;">Step 2: Naming and class selection</div>
    <div id="form_maintable" style="background-color:#F0E68C;">
      <p><label for="firstname">First name: </label><input type="text" name="firstname" size="50" value="<?php if(isset($_GET['id'])) { $werb->getdata("forename","SELECT forename FROM player_characters WHERE character_id='$_GET[id]'"); } ?>" disabled="disabled" ></p>
      <p><label for="lastname">Last name: </label><input type="text" name="lastname" size="50" value="<?php if(isset($_GET['id'])) { $werb->getdata("surname","SELECT surname FROM player_characters WHERE character_id='$_GET[id]'"); } ?>" disabled="disabled" ></p>
      <p><label for="class">Class: </label><?php $werb->dropdown("class","SELECT class_id, class FROM d_classes ORDER BY class ASC","","showClassdescr"); ?></p>
      <div style="width:100%; float:left;">Class description: </div> <div id="class_descr" style="width: 250px; color: #B22222; float: left;"><i><b>Class description will display here when a class is chosen.</b></i></div>
    </div>
    <div id="form_mainfooter" style="background-color:#F0E68C;"><input type="submit" name="submitp1" value="Submit step 1"></div>
    </form>
  </div>
</div>

 

The div that contains page 2 bleeds outside the content div. What's wrong? See the attached screen shot to see what I'm talking about.

 

[attachment deleted by admin]

[dbrimlow]

You are doing a few things spectacularly wrong that are causing problems both with the css/html and with potential troubleshooting.

 

I've posted full html solution below. But you need to change quite a bit of how you approach the css of a page.

 

FIRST:

An "ID" select may ONLY be used ONCE per page! You use IDs like "CLASSES" and repeat them on the page ... that's bad.

This is just wrong:

<div id="form_mainwrapper" style="float:left;">

<div id="form_mainwrapper" style="float:right;">

 

Change your IDS to CLASSES!!!

.form_mainwrapper
.form_maintitle
.form_maintable
.form_mainfooter

Now you can use this anywhere, however many times:

<div class="form_mainwrapper">

 

Notice I removed the inline styling? That brings me to my second point.

 

SECOND:

Putting inline style elements is always an indication of poor/lazy css planning. It will  inevitably, eventually, bite you in the ass.

Trying to debug a css element can be tough enough without having to track down multiple inline styling as well. The whole point of css in the first place was to get styling out of your markup. The awesome power of being able to tweak elements in a css file alone is amazing.

 

Your code is messy, cluttered and weighing down your page with unnecessary styles; you also suffer from a case of "divitus" which is causing you to 1.) forget to use proper semantic tags for text (h1 - h6, p, ul, ol, dl, li, dd) and 2.) just slap text into div tags (bad).

 

Example of divitus:

<div id="form_maintitle" style="background-color:#F0E68C;">Step 2: Naming and class selection</div>
    <div id="form_maintable" style="background-color:#F0E68C;">

 

You can lose the div and use a header (this is exactly what they are for).

<h2  class="form_maintitle">Step 2: Naming and class selection</h2>

 

Now you would say, "BUT, I want the backgrounds different from the two boxes."

 

And I would reply, "AH, HA! EXACTLY!"

 

Scalability. This shows that the left float must be different than the right float. Therefore ... it is a different (new) class select for the container only.

.form_mainwrapper1 {background-color:#D3D3D3; ...etc}
.form_mainwrapper2 {background-color:#F0E68C; ...etc}

 

Once you really get into cross-browser compatible manipulation you will NEED to have a well planned css file and clean, uncluttered markup level html.

 

Floated containers should not simply be left and right floats of the same block. You need to craft them properly.

 

Here is the solution - removing all the unnecessary divs and inline styles. I didn't fix the invalid labels' "for" attributes.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
#content { padding: 1em; width: 80%; float:left;background-color: green; }
.form_mainwrapper1 { width: 45%; float:left;background-color:#D3D3D3; border:2px solid #000; }
.form_maintitle {padding: 5px;border-bottom: 1px solid #000; font-weight: bold; font-size: 14px; }
.form_maintable {min-height: 200px; padding: 5px;}
.form_mainfooter {padding: 5px; border-top: 1px solid #000; text-align: center; }
.form_mainwrapper2 {width: 45%; float:right;background-color:#F0E68C;border:2px solid #000; }
.class_descr {color:#B22222; font-style:italic; font-weight:bold}
.style1 {padding:.5em; border-bottom:1px solid #808000;}
-->
</style>
</head>
<body>
<div id="content">
  <p class="style1"><span class="title_text">"DEFAULT WERB TITLE player character
      builder</span><br>
    On this page you can create and edit your player characters.</p>
  <div class="form_mainwrapper1">
    <form name="page1" method="post">
      <h2 class="form_maintitle">Step 1: Naming and class selection</h2>
      <div class="form_maintable">
        <p>
          <label for="firstname">First name: </label>
          <input type="text" name="firstname" size="50" value="" disabled="disabled" >
        </p>
        <p>
          <label for="lastname">Last name: </label>
          <input type="text" name="lastname" size="50" value="" disabled="disabled" >
        </p>
        <p>
          <label for="class">Class: </label>
        </p>
        <h4>Class description:</h4>
        <p class="class_descr">Class description will display here when a class
          is chosen.</p>
      </div>
      <p class="form_mainfooter">
        <input type="submit" name="submitp1" value="Submit step 1">
      </p>
    </form>
  </div>
  <div class="form_mainwrapper2">
    <form name="page2" method="post">
      <h2 class="form_maintitle">Step 2: Naming and class selection</h2>
      <div class="form_maintable">
        <p>
          <label for="firstname">First name: </label>
          <input type="text" name="firstname" size="50" value="" disabled="disabled" >
        </p>
        <p>
          <label for="lastname">Last name: </label>
          <input type="text" name="lastname" size="50" value="" disabled="disabled" >
        </p>
        <p>
          <label for="class">Class: </label>
        </p>
        <h4>Class description: </h4>
        <p class="class_descr">Class description will display here when a class
          is chosen. </p>
      </div>
      <p class="form_mainfooter">
        <input type="submit" name="submitp1" value="Submit step 1">
      </p>
    </form>
  </div>
</div>
</body>
</html>

 

 

 

[Darkmatter5]

dbrimlow, thank you for the honest assessment! I am still and always learning this stuff, so I always appreciate straight to the point solutions with explanations on how things work and why they are the way they are.

 

Again,

Thank you!

[dbrimlow]

Glad to help. I, too, am still and always learning.

 

So far as the form "label for=" attributes,  I try to avoid using the "for" attribute because it requires you to put a unique "id" identifier in the related form control; this further confuses ids and classes.  Between css, jscript, smarty, etc, the last thing I want is to keep track of yet another ID or class on a page.

 

It was useful in the pre css days when form fields where positioned using table cells and the labels only had a "visual" relation to its form element -  text browser and text readers made it impossible to tell which label belonged to what form element. Example:

<table>
  <tr>
    <td><label>First Name</label></td>
    <td><input type="text" name="firstname" size="50" value="" disabled="disabled"></td>
  </tr>
</table>

Imagine suddenly losing your eyesight and not being able to use the web because coders were not taught and/or didn't bother learning the most minimum of accessible markup?

The solution was to use the for to associate the label with the control via a "unique" identifier - like so:

<table>
  <tr>
    <td><label [i][b]for="fname"[/b][/i]>First Name</label></td>
    <td><input type="text" name="firstname"[i][b] id="fname"[/b][/i] size="50" value="" disabled="disabled" ></td>
  </tr>
</table>

This is how you would add the id to the form control as you intended:

example:

<p>
     <label [i][b]for="fname"[/b][/i]>First name:</label> 
          <input type="text" name="firstname" [i][b]id="fname"[/b][/i] size="50" value="" disabled="disabled" >
</p>

 

But, since I am not using a table cell, and I want to limit the number of unique IDs I use on a page, why bother associating the label when it already is BOTH visual and "textual"?

So, the solution is simple ... wrap the control element within the label.

example:

<p>
     <label>First name: 
          <input type="text" name="firstname" size="50" value="" disabled="disabled" >
   </label>
</p>

 

This validates to a STRICT doctype, reduces clutter, is accessible and can even be "styled" via css.

 

[TheFilmGod]

<p>
     <label>First name:
          <input type="text" name="firstname" size="50" value="" disabled="disabled" >
   </label>
</p>

 

If you could do it like this - do it! It keeps things 100% simpler. However, many complex layouts prevent you from doing this. Using "for=" and id="" is annoying, but is the only alternative.