Question

Okay guys I have a question about positioning tables within DIV’s using CSS.

I have code as follows:

css:

#content{
    float:right;
    padding-top:10px;
    width:450px;
    line-height: 18px;
    font-size:13px;
    text-align:left;
}

#content .reviewTable{
    width:20px;
}
#news{
    line-height: 18px;
    width:150px;
}


#news h2 {
    margin: 0;
    padding: 0;
    font-size: 16px;
}

#news p {
    margin: 0;
    padding-bottom: 20px;
    padding-right:10px;
    font-size:13px;
}

HTML:

<div id="content">
    <div class="reviewTable">
    <table>
    <td></td>
    </table>
</div>
</div>

My table sits far away from my news DIV there is some padding around the news DIV however I have removed that and it didn’t make any difference to the positioning of the table. I have been looking at other Stack Overflow posts but can’t seem to find what I am looking for. I have tried absolute and relative positioning in my CSS and also width and none of these work not the table where they have worked on other elements such as plain text.

I have also tried the table as <table class="reviewTable"></table>

My question is does the code need to be in a certain format in order to allow the positioning of tables in a DIV which already has CSS formatting applied to it?

Just looking for a hint in the right direction guys if you could help me out or anyone else has a similar problem as this it would be great.

Thanks

Answer 1

The reason your table is flowing outside is that you are floating it right. Then you have the width set to be too small for the review area so it makes it go outside. Change the width of the #content to 600px and you’ll see what I mean.

For the way you have it setup you need to set the #content to 610px. Set the #page-container to overflow:hidden to prevent anything showing if its outside your container. And take off the width on .reviewTable