0

I have a problem with centering divs inside a wrapper div. Assume this simple example:

<!DOCTYPE html>
<head>
</head>

<body>
    <div style="width: 400px;margin:0 auto;">
        <div style="background-color:yellow; padding:20px; float:left;">aaa</div>
        <div style="background-color:green; padding:20px; float:left;">aaab</div>
        <div style="background-color:blue; padding:20px; float:left;">aaa</div>
    </div>
</body>

The wrapper div is centered and 400px wide. I want to have all inner divs evenly distributed inside the wrapper div. That might be achieved through calculating exact width of each div and setting a proper margin, but it seems to be a weak and unrepsonsive solution. Furthermore, it requires changing the dimensions while adding text or so. Is there a responsive way to do this?

Halt_07
  • 111
  • 1
  • 1
  • 5
  • 2
    As always, use flexbox. – Wali Waqar Jul 03 '21 at 11:22
  • 2
    Check out flexbox and grid – cloned Jul 03 '21 at 11:22
  • 2
    use `display: flex` & `justify-content: space-between` on the `wrapper` – fevid Jul 03 '21 at 11:26
  • 1
    `float` should not be sues for styling purpose. It is a mis-used hack. Since 2015 Flexbox is well estabilished and there is no further reason to use the float-hack. The intended purpose of `float` is to float images withing a paragraph such as in newspapers. – tacoshy Jul 03 '21 at 11:34

0 Answers0