Table appears outside of "widget" div

RopeADope · May 2, 2011

Hi all. I'm attempting to put a table within a "widget" div but for some reason the table is displaying below it. Here's the pertinent code.

The left and right divs act as columns and the widget class just acts as a separator for inside of the left and right divs.

#left{
   float:left;
   width:46%;
   margin-left:1%;
}
#right{
   float:right;
   width:46%;
   margin-right:1%;
}
.widget{
   border-top:blue solid 3px;
   background-color:#fff;
   padding:0.5em;
   margin:0.5em;
}
table{
   float:left;
   margin:0.75em;
   background-color:#ccc;
   border:#999 solid 1px;
   border-radius:10px;
   padding:5px;
   box-shadow:10px 10px 5px #888;
}

The page.

      <div id="left">
         <div class="widget">
            <form method="post" action="process_data.php">
            <input type="hidden" name="table_name" value="timesheets" />
            <table>
            <tr>
	            <th>Timesheets</th>
            </tr>
            <tr>
               <td>Employee:</td>
               <td>
                  <select name="employee">
                     <?php
                           connect_mysql("localhost","root","Cscr!114","test");
                           $sql="SELECT first_name,last_name FROM employees";
                           $result=mysql_query($sql);
                           $i=0;
                           while($row=mysql_fetch_row($result)){
                              echo "<option>" . $row[0] . " " . $row[1] . "</option>";
                              $i++;
                              }
                     ?>
                  </select>
               </td>
            </tr>
            <tr>
	            <td>Date</td><td><input type="text" name="date" title="YYYY/MM/DD" /></td>
	         <tr>
	            <td>Activity</td>
	            <td>
		            <select name="activity">
			            <option>Maintenance</option>
			            <option>Break/Fix</option>
			            <option>Admin</option>
			            <option>Service Request</option>
			            <option>Training</option>
		            </select>
	            </td>
	         </tr>
	         <tr>
	            <td>Hours</td>
	            <td>
	               <select name="hours">
	                  <?php
                           $i=1;
                           while($i<={
                              echo "<option>" . $i . "</option>";
                              $i+=0.25;
                              }
	                  ?>
	               </select>
	            </td>
            </tr>
            <tr>
	            <td>Description</td><td><input type="text" name="description" /></td>
            </tr>
            <tr>
	            <td><input type="submit" value="Submit" /></td>
            </tr>
            </table>
            </form>
         </div>
      </div>
      <div id="right">
      </div>

cssfreakie · May 2, 2011

got some clientside code (view source, copy paste)? or even better an online example. You probably guessed that we are no visionaries that can tell what the results are from those php scripts. :psychic:

This is the same for any html or css question.

apart from that, if you don't set a height on the widget the height of it will be 0. if you set it to overflow:hidden; it will shrinkwrap around the inner contents. you can find something about that on my blog if interested. anyway an online example for css and html is often more useful.

RopeADope · May 3, 2011

apart from that, if you don't set a height on the widget the height of it will be 0. if you set it to overflow:hidden; it will shrinkwrap around the inner contents. you can find something about that on my blog if interested. anyway an online example for css and html is often more useful.

What confuses me is that I've already tried just filling it with text to check the behavior, and it grows and shrinks as needed. Its just the table that winds up below the widget. Here's the source.

      <div id="left">

         <div class="widget">

            <form method="post" action="/php/process_data.php">

            <input type="hidden" name="table_name" value="timesheets" />

            <table>

            <tr>

	            <th>Timesheets</th>

            </tr>

            <tr>

               <td>Employee:</td>

               <td>

                  <select name="employee">

                     <option>Chad Scribner</option><option>Mark Tuttle</option>	                  </select>

               </td>

            </tr>

            <tr>

	            <td>Date</td><td><input type="text" name="date" title="YYYY/MM/DD" /></td>

	         <tr>

	            <td>Activity</td>

	            <td>

		            <select name="activity">

			            <option>Maintenance</option>

			            <option>Break/Fix</option>

			            <option>Admin</option>

			            <option>Service Request</option>

			            <option>Training</option>

		            </select>

	            </td>

	         </tr>

	         <tr>

	            <td>Hours</td>

	            <td>

	               <select name="hours">

	                  <option>1</option><option>1.25</option><option>1.5</option><option>1.75</option><option>2</option><option>2.25</option><option>2.5</option><option>2.75</option><option>3</option><option>3.25</option><option>3.5</option><option>3.75</option><option>4</option><option>4.25</option><option>4.5</option><option>4.75</option><option>5</option><option>5.25</option><option>5.5</option><option>5.75</option><option>6</option><option>6.25</option><option>6.5</option><option>6.75</option><option>7</option><option>7.25</option><option>7.5</option><option>7.75</option><option>8</option>		               </select>

	            </td>

            </tr>

            <tr>

	            <td>Description:</td><td><textarea name="description"></textarea></td>

            </tr>

            <tr>

	            <td>Comments:</td><td><textarea name="comments"></textarea></td>

            </tr>

            <tr>

	            <td><input type="submit" value="Submit" /></td>

            </tr>

            </table>

            </form>

         </div>

      </div>

      <div id="right">

      </div>

cssfreakie · May 3, 2011

did you try whata i said allready?

div.widget{
  overflow:hidden;
}

also a nice thing to do is to give it a temporary background color, easier to see what is happening

RopeADope · May 3, 2011

No, I forgot initially. Just added the overflow:hidden; and that fixed the .widget size. Now I have a #left div which is supposed to hold several .widgets so should I change the overflow to hidden on that so all the .widgets can inherit that property? Or is that a bad idea?

cssfreakie · May 3, 2011

maybe before you ask, have a read. about overflow hidden. i wrote a short article on it, it should explain when overflow hidden can be used.

the first logical reaction would be: "huh but doesn't overflow:hidden hide stuff..."

after the article you should know if you should apply it or not. Than again, you can always test it in your browser with firebug (addon for firefox)

RopeADope · May 3, 2011

Read the article. I have better understanding now. However, my previous question remains... My #left and #right divs serve as containers for multiple .widgets and none of these have heights set. The #left and #right divs aren't meant to be seen anyway but it seems like bad practice to leave them as they are. Any thoughts?

cssfreakie · May 3, 2011

If you don't set a height but you did set a width and you want to shrinkwrap around the inner elements you can use overflow hidden on that specific container. did you try it?

RopeADope · May 3, 2011

Yep. I added the overflow hidden to the widgets which serves the purpose of housing the widget content. The left and right divs only have widgets as content though, so I'm not sure if its necessary to add the overflow:hidden to those (#left and #right).

cssfreakie · May 3, 2011

Yep. I added the overflow hidden to the widgets which serves the purpose of housing the widget content. The left and right divs only have widgets as content though, so I'm not sure if its necessary to add the overflow:hidden to those (#left and #right).

well give the left and right div a background color and see if it shows up.... if it has a fix width but no height i bet it won't. I can also recommend firebug. I think i already did. just play with it. if you have no idea how to use it (firebug that is), you might want to have a look at a video at my blog. But as with most of things (except for pressing buttons in nuclear reactors :idea: ), just trying it out is often the way.

RopeADope · May 3, 2011

Interestingly enough, the left and right divs automatically increase height depending on the widget space required...I'm not quite sure what to make of that. Logically, I would think that it would require the overflow:hidden. But I guess maybe it wouldn't because of the catch that you mentioned in your blog about the "clearfix"? Any ideas?

P.S. Problem is solved, just looking for some input :-)

cssfreakie · May 3, 2011

if you use a clearfix at the bottom, overflow hidden is not needed. but than again, your using extra mark-up.

Sign In

Table appears outside of "widget" div

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information