Member Avatar for jaycastr

i know this is a common question but i didnt understand how ppl fixed it

i have 3 divs that each contain a table . they are both in a 4th div

i want one div(table2) to line up to the left and the other div(table3) to line up to the right but start on the same line. i also need a 3rd div(table1) to line up in the center above the 2 other. im am so lost please help

<div id='container'>
    
    <div id='table1'>
    </div>

    <div id='table2'>
    </div>
    
    <div id='table3'>
    </div>

</div>

thanks in advanced
  • 5 Contributors
  • 4 Replies
  • 105 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by matricol

Dani AI

Generated

A few quick notes tied to existing replies: and are correct that floats can place two boxes left and right, and correctly points out a centered element usually needs a defined width. 's clear suggestion will stop the float collapse, but it is an old-HTML fix and not the most robust approach for modern layouts.

If you can change the markup slightly, the simplest and most future-proof solution is Flexbox: stack the centered block, then use a bottom row for the two side blocks. Flex handles variable widths and responsiveness without manual clearing.

<div class="container">
  <div class="top">...centered table...</div>
  <div class="row">
    <div class="left">...left table...</div>
    <div class="right">...right table...</div>
  </div>
</div>
.container { display: flex; flex-direction: column; align-items: center; }
.row { display: flex; justify-content: space-between; width: 100%; gap: 16px; }
.row > div { flex: 0 1 48%; } /* lets the two boxes sit on one line and shrink if needed */

If you cannot change the HTML, CSS Grid can place the three existing children without an extra wrapper (use :nth-child() to assign areas). Grid gives precise control: the top element spans both columns and the two lower elements sit left/right.

Quick troubleshooting tips: floating elements can collapse their parent—use a CSS clearfix (pseudo-element) rather than an extra <br>. Tables inside divs carry intrinsic widths; make them responsive with max-width:100% and box-sizing:border-box so they don’t force line breaks. For older browsers that lack Flexbox/Grid support, floats are still a valid fallback, but they require fixed widths and clearing.

Further reading: MDN Flexbox and MDN Grid.

Recommended Answers

All 4 Replies

Member Avatar for ko ko

Try this:

.table2 {
    float: left;
    width: 200px;
}
.table3{
    float: right;
    width: 200px;
}
.table1{
    margin-left: 200px; /* requires at least table2 width */
    margin-right: 200px; /* requires at least table3 width */
}
Member Avatar for DriftingSteps

First of all, you have to define the widths of the classes ".table1, .table2 and .table3" and float ".table2" and "table3" to their respective sides, just like Zero has showed above.
As for ".table1", I'd suggest you to do the following -

.table1 {
    width:200px; /* width depends */
    margin:0 auto; /* brings the div to the center of the page */
}

The code I gave above is useful (imo) even if the width of "#container" is defined or not. It brings the div of class ".table1" to the center, while ".table2" is floated to left and ".table3" is floated to right. BUT, the width of the "#container" shouldn't be less than the width of ".table2" and ".table3" summed up.

But, to use the code Zero has provided above, you'll have to define the width of "#container" to 600px to get the div of class ".table1" to the center. If the width is lesser or greater than 600px, then the divs will either stack up one above another, or ".table1" div won't be exactly at the center of the other two.

Hope this helped.

Member Avatar for sagive

Another sure way is to use Zero13 Code and add after table1 <br style="clear: both;" />

Member Avatar for matricol

give them both float:left

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.