Geek Answers Handbook

Css positioning tables next to each other

Using HTML / CSS below, I have 3 tables. I would like tables 1 and 2 to be next to each other in the “same row” with table 3 below, but with a gap between them.

However, when I use float: left / right in the first two tables, is table 3 always located directly below it and “touches” the 1/2 tables?

I tried margin / clear / float and didn't seem to be able to output lines: (

Any help gratefully received.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <style type="text/css"> DIV.search { width: 80%; margin-right: auto; margin-left: auto; } DIV.search TABLE { border: 1px solid black; border-collapse: separate; } DIV.search TABLE.table1 { float: left; width: 45%; } DIV.search TABLE.table2 { float: right; width: 45%; } TABLE.table3 { border: 1px solid black; margin-top: 50px; margin-right: auto; margin-left: auto; width: 80%; } </style> </head> <body> <div class="search"> <table class="table1"> <tr> <td> TABLE 1 </td> </tr> </table> <table class="table2"> <tr> <td> TABLE 2 </td> </tr> </table> </div> <table class="table3"> <tr> <td> TABLE 3 </td> </tr> </table> </body> </html>
+3
html css positioning
source share
2 answers

You should apply some additional styles:

 DIV.search { width: 80%; margin-right: auto; margin-left: auto; overflow: hidden; /* Fixing the problem in modern browsers */ zoom: 1; /* Fixing in old IE by applying hasLayout */ padding-bottom: 50px; /* I prefer padding here than margin in table3 */ } TABLE.table3 { border: 1px solid black; /* margin-top: 50px; */ margin-right: auto; margin-left: auto; width: 80%; }

You can try: after (in the answer below), but the old IE does not support it.

+3
source share

I know this is a little late, but a similar solution may be, but in css there is " display:inline-block ", but there is also " display:inline-table ". Worked for me :)

Also, the extra work for me was to use "float:left"

Look here

+3
source share

More articles:


All Articles