css - Table contents spill out of containing DIV -
i'm having trouble preventing contained elements inside div spilling out of containing div. can't figure out what's causing it. i'd appreciate set of eyes.
here jsfiddle shows issue have:
i hope have form#user_login_history , table#form_table within div#app_form
i have looked @ information google , similar posts on stackoverflow not solve problem info provided. tried combinations of block , clear css style attributes did not help.
my css:
body, ul, li { font-size:14px; font-family:arial, helvetica, sans-serif; line-height:21px; text-align:left; } body{background-color:#f4f4f4;} #menu { list-style:none; width:90%; margin:30px auto 0px auto; height:43px; padding:0px 20px 0px 20px; /* rounded corners */ -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; /* background color , gradients */ background: #000080; background: -moz-linear-gradient(top, #0272a7, #000080); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#000080)); /* borders */ border: 2px solid #0a1b0a; -moz-box-shadow:inset 0px 0px 1px #edf9ff; -webkit-box-shadow:inset 0px 0px 1px #edf9ff; box-shadow:inset 0px 0px 1px #edf9ff; behavior: url("/static_mimansa_apps/js/pie.htc"); } #menu li { float:left; display:block; text-align:center; position:relative; padding: 4px 10px 4px 10px; margin-right:30px; margin-top:7px; border:none; } #menu li:hover { border: 1px solid #777777; padding: 3px 9px 3px 9px; /* background color , gradients */ background: #f4f4f4; background: -moz-linear-gradient(top, #f4f4f4, #eeeeee); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f4f4), to(#eeeeee)); /* rounded corners */ -moz-border-radius: 5px 5px 0px 0px; -webkit-border-radius: 5px 5px 0px 0px; border-radius: 5px 5px 0px 0px; behavior: url("/static_mimansa_apps/js/pie.htc"); } #menu li { color: #eeeeee; display:block; outline:0; text-decoration:none; text-shadow: 1px 1px 1px #000; font-weight:bold; } #menu li:hover { color:#161616; text-shadow: 1px 1px 1px #ffffff; } #menu li .drop { padding-right:21px; background:url("../images/drop.png") no-repeat right 8px; } #menu li:hover .drop { background:url("../images/drop.png") no-repeat right 7px; } .dropdown_1column, .dropdown_2columns, .dropdown_3columns, .dropdown_4columns, .dropdown_5columns { margin:4px auto; float:left; position:absolute; left:-999em; /* hides drop down */ text-align:left; padding:10px 5px 10px 5px; border:1px solid #0a1b0a; border-top:none; /* gradient background */ background:#bbeeee; background: -moz-linear-gradient(top, #eeeeee, #bbbbbb); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#bbbbbb)); /* rounded corners */ -moz-border-radius: 0px 5px 5px 5px; -webkit-border-radius: 0px 5px 5px 5px; border-radius: 0px 5px 5px 5px; behavior: url("/static_mimansa_apps/js/pie.htc"); } .dropdown_1column {width: 140px;} .dropdown_2columns {width: 320px;} .dropdown_3columns {width: 420px;} .dropdown_4columns {width: 560px;} .dropdown_5columns {width: 700px;} #menu li:hover .dropdown_1column, #menu li:hover .dropdown_2columns, #menu li:hover .dropdown_3columns, #menu li:hover .dropdown_4columns, #menu li:hover .dropdown_5columns { left:-1px; top:auto; } .col_1, .col_2, .col_3, .col_4, .col_5 { display:block; float: left; position: relative; margin-left: 5px; margin-right: 5px; } .col_1 {width:130px;} .col_2 {width:270px;} .col_3 {width:410px;} .col_4 {width:550px;} .col_5 {width:690px;} #menu .menu_right { float:right; margin-right:0px; } #menu li .align_right { /* rounded corners */ -moz-border-radius: 5px 0px 5px 5px; -webkit-border-radius: 5px 0px 5px 5px; border-radius: 5px 0px 5px 5px; behavior: url("/static_mimansa_apps/js/pie.htc"); } #menu li:hover .align_right { left:auto; right:-1px; top:auto; } #menu p, #menu h2, #menu h3, #menu ul li { line-height:21px; text-align:left; text-shadow: 1px 1px 1px #ffffff; } #menu h2 { font-size:21px; font-weight:400; letter-spacing:-1px; margin:7px 0 14px 0; padding-bottom:14px; border-bottom:1px solid #666666; } #menu h3 { margin:7px 0 14px 0; padding-bottom:7px; border-bottom:1px solid #888888; } #menu p { line-height:18px; margin:0 0 10px 0; } #menu li:hover div {color:#015b86;} #menu li:hover div a:hover {color:#029feb;} .strong {font-weight:bold;} .italic {font-style:italic;} .imgshadow { /* better style on light background */ background:#ffffff; padding:4px; border:1px solid #777777; margin-top:5px; -moz-box-shadow:0px 0px 5px #666666; -webkit-box-shadow:0px 0px 5px #666666; box-shadow:0px 0px 5px #666666; behavior: url("/static_mimansa_apps/js/pie.htc"); } .img_left { /* image sticks left */ width:auto; float:left; margin:5px 15px 5px 5px; } #menu li .black_box { background-color:#333333; color: #eeeeee; text-shadow: 1px 1px 1px #000; padding:4px 6px 4px 6px; /* rounded corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; /* shadow */ -webkit-box-shadow:inset 0 0 3px #000000; -moz-box-shadow:inset 0 0 3px #000000; box-shadow:inset 0 0 3px #000000; behavior: url("/static_mimansa_apps/js/pie.htc"); } #menu li ul { list-style:none; padding:0; margin:0 0 12px 0; } #menu li ul li { line-height:24px; position:relative; text-shadow: 1px 1px 1px #ffffff; padding:0; margin:0; float:none; text-align:left; width:130px; } #menu li ul li:hover { background:none; border:none; padding:0; margin:0; } #menu li .greybox li { background:#f4f4f4; border:2px solid #0a1b0a; margin:10px auto 4px auto; padding:4px 6px 4px 6px; width:90%; /*width:116px;*/ /* rounded corners */ -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; } #menu li .greybox li:hover { background:#ffffff; border:3px solid #0a1b0a; padding:3px 5px 3px 5px; margin:10px auto 4px auto; } #menu ul.greybox li a.menu_item{ font-size:16px; color: #000000; display:block; outline:0; text-decoration:none; font-weight:bold; } table#dynamic_table,table#dynamic_table th,table#dynamic_table td { border: 3px solid #0a1b0a; text-align:center; padding:10px; border-collapse:collapse; margin:20px auto; } th { background: #000080; font-size:14px; color: #eeeeee; } #app_title { color:#000080; text-align:center; font-size:22px; margin:15px auto; } #app_form, #app_form div { text-align:center; margin:15px auto; width:65%; } #container { border: 3px solid #000080; margin:15px auto; width:75%; /* rounded corners */ -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; } .label_cell, .input_cell { margin: 0; text-align: left; color:#000080; font-size:18px; } table#form_table { border: 0px; padding:10px; margin:15px 20%; display:block; clear:both; } table#form_table td { padding:10px; } select,input { width:150px; } #logo_container_div { border-style: none; text-align:center; margin:0px auto; } #logo_container { width:80px; height:auto; margin:20px auto 0px auto; align:center; } #dialog { text-align:left; } .info, .success, .warning, .error, .validation { border: 1px solid; margin: 10px 0px; padding:5px 10px 5px 50px; background-repeat: no-repeat; background-position: 10px center; } #info, .info { color: #00529b; background-color: #bde5f8; background-image: url('../images/info.png'); } #success, .success { color: #4f8a10; background-color: #dff2bf; background-image:url('../images/success.png'); } #warning, .warning { color: #9f6000; background-color: #feefb3; background-image: url('../images/warning.png'); } #error, .error { color: #ffffff; background-color: #ce3b19; background-image: url('../images/error.png'); } #logout_container { border: none; margin:15px auto; width:75%; text-align:right; } #logout_container { color:#000080; font-weight:bold; text-decoration:underline; } #logout_container a:hover { text-decoration:none; } input.hasdatepicker { background-image: url("../images/datepicker-2.png"); background-position: right center; background-repeat: no-repeat; } my html this
<div id="container"> <h2 id="app_title">historia sesiones</h2> <div id="logo_container_div"></div> <div id="app_form"> <form id="user_login_history" action="." method="post"><div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="mu71bb0f5sh5ml7dgvricl48x3s3oe04"></div> <table id="form_table"> <tbody><tr> <td class="label_cell"><label for="id_login_user_id">usuario : </label></td> <td class="input_cell"><input type="text" name="login_user_id" id="id_login_user_id"></td> <td class="label_cell"><label for="id_from_date">fecha desde: </label></td> <td class="input_cell"><input readonly="readonly" type="text" name="from_date" id="id_from_date" class="hasdatepicker"></td> <td class="label_cell"><label for="id_to_date">fecha hasta: </label></td> <td class="input_cell"><input readonly="readonly" type="text" name="to_date" id="id_to_date" class="hasdatepicker"></td> </tr> </tbody></table> <div id="dynamic_table_holder"></div> <div class="spinner" id="spinner" style="display: none;"><img alt="spinner" src="/static_mimansa_apps//images/spinner.gif"></div> <input type="button" value="submit" id="submit_button"> </form> <table id="data_table"></table> <div id="dialog"></div> </div>
this perhaps want instead?
i switched table ul instead, cleaner.
the new html is:
<div id="container"> <h2 id="app_title">historia sesiones</h2> <div id="logo_container_div"></div> <div id="app_form"> <ul> <form id="user_login_history" action="." method="post"> <div style="display:none"><input type="hidden" name="csrfmiddlewaretoken" value="mu71bb0f5sh5ml7dgvricl48x3s3oe04"></div> <li class="label_cell"><label for="id_login_user_id">usuario : </label></li> <li class="input_cell"><input type="text" name="login_user_id" id="id_login_user_id"></li> <li class="label_cell"><label for="id_from_date">fecha desde: </label></li> <li class="input_cell"><input readonly="readonly" type="text" name="from_date" id="id_from_date" class="hasdatepicker"></li> <li class="label_cell"><label for="id_to_date">fecha hasta: </label></li> <li class="input_cell"><input readonly="readonly" type="text" name="to_date" id="id_to_date" class="hasdatepicker"></li> <div id="dynamic_table_holder"></div> <div class="spinner" id="spinner" style="display: none;"><img alt="spinner" src="/static_mimansa_apps//images/spinner.gif"></div> <input type="button" value="submit" id="submit_button"> </form> </ul> <table id="data_table"></table> <div id="dialog"></div> </div> and added remove ul style:
ul { list-style-type: none; }
Comments
Post a Comment