How to align 3 divs (left/center/right) inside another div?

Question

I want to have 3 divs aligned inside a container div, something like this: [[LEFT] [CENTER] [RIGHT]]Container div is 100% wide (no set width), and center div should remain in center after resizing the container.So I set:<!-- language: lang-css --> #container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{margin:0 auto;width:100px;}But it becomes: [[LEFT] [CENTER] ] [RIGHT]Any tips?

Answer 1

There's definitely any number of ways you could go about doing this. If you wanted to keep using floats like you have, if you set all three divs in your container to "float:left", and give them 33.333% width, that would start to get you in the right direction. This is what the CSS framework Bootstrap (https://getbootstrap.com/) does, and it's one of the most widely-used frameworks for giving webpages a responsive layout.

If you don't want to/can't install Bootstrap, then one downside to using the float/width method is that if you give your inner divs padding of any kind, this will start to mess up the layout a bit, and you'll find you'll have to set the widths of the divs to something like "31.89%" instead of an even "33.333%", which would just get finicky to work with.

Another method that's easier to implement in my opinion uses Flexbox, which all modern browsers support by default. With that you can simply set your container div to "display:flex", and all of its child items will line up automatically.

For a more in-depth look at this, I made a quick example project in the W3Schools Tryit Editor for you to play around with. Let me know if this helps!

https://www.w3schools.com/code/tryit.asp?filename=G3DKJ8AQ6605