Div content overlapping with table content
i have a table as below. The div content after the table overlaps on the table instead开发者_运维问答 of to be on the new line
<table border="0" style="width:680px;position:relative !important;">
<tr>
<td class="row1" style="background:red">1</td>
<td class="row2" style="background:green">2</td>
</tr>
</table>
<div style="position:relative !important;">22</div>
and this is the css
.row1 {
width:405px;
position:absolute;
}
.row2 {
width:273px;
position:absolute;
left:390px;
}
can some body please help me to resolve it? The div contents should be on a new line below the table contents. Thanks in advance
This is because your table doesn't have a height. The height collapses because you have positioned the table cells absolutely. Simple fix would be to add a height (if always known), but that's not very robust at all.
If you post up what you are wanting to do (mainly why you are positioning absolutely) we can help help further :)
Your two <td>s are position: absolute which will not hold the <table> open. You will need to
- assign
heightto yourtable - remove the
absoluteon thetds - or add enough
margin-topto yourdivthat it will sit below your table.
Given the above information, the second option is probably what you want.
This happens because you set position:absolute in the CSS: this means that the normal flow is disrupted and that element overlaps.If you remove that, you don't have the problem:
fiddle http://jsfiddle.net/BHLhS/1/
*Update: Really don't know what your trying to achieve, but here is a way to make it happen.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
/* Wrapper container for the table and thd div below it. */
.abs-div {
position: absolute;
}
/* First td inside the table. */
.row1 {
float: left;
margin-right: -15px;
width: 405px
}
/* Second td within the table, but it's on the same row as the first td, but called row-2 for some reason. */
.row2 {
float: left;
width: 273px
}
/* Div below table. */
.div-below-table {
position: relative !important;
}
</style>
</head>
<body>
<div class="abs-div">
<table border="0" style="width:680px;position:relative !important;">
<tr>
<td class="row1" style="background:red">1</td>
<!-- Should this be on it's own row -->
<td class="row2" style="background:green">2</td>
</tr>
</table>
<div class="div-below-table">22</div>
</div>
</body>
</html>
I found the easiest approach used in my project is to use a style to adding padding at bottom so that the even the overlap is not visible to the user
.padding_for_footer250 {
padding-bottom: 250px;
}
加载中,请稍侯......
精彩评论