RopeADope Posted May 2, 2011 Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/ Share on other sites More sharing options...
cssfreakie Posted May 2, 2011 Share Posted 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. 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. Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/#findComment-1209527 Share on other sites More sharing options...
RopeADope Posted May 3, 2011 Author Share Posted 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> Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/#findComment-1209831 Share on other sites More sharing options...
cssfreakie Posted May 3, 2011 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/#findComment-1209850 Share on other sites More sharing options...
RopeADope Posted May 3, 2011 Author Share Posted 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? Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/#findComment-1209858 Share on other sites More sharing options...
cssfreakie Posted May 3, 2011 Share Posted 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) Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/#findComment-1209860 Share on other sites More sharing options...
RopeADope Posted May 3, 2011 Author Share Posted 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? Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/#findComment-1209866 Share on other sites More sharing options...
cssfreakie Posted May 3, 2011 Share Posted 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? Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/#findComment-1209872 Share on other sites More sharing options...
RopeADope Posted May 3, 2011 Author Share Posted 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). Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/#findComment-1209885 Share on other sites More sharing options...
cssfreakie Posted May 3, 2011 Share Posted 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 ), just trying it out is often the way. Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/#findComment-1209889 Share on other sites More sharing options...
RopeADope Posted May 3, 2011 Author Share Posted 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 :-) Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/#findComment-1209893 Share on other sites More sharing options...
cssfreakie Posted May 3, 2011 Share Posted May 3, 2011 if you use a clearfix at the bottom, overflow hidden is not needed. but than again, your using extra mark-up. Quote Link to comment https://forums.phpfreaks.com/topic/235365-table-appears-outside-of-widget-div/#findComment-1209903 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.