WordPress Child Theme – CSS How To: Align 3 DIVS (left/center/right) Inside Another DIV
Overview: The design spec calls for 3 bits of info to be displayed on the same line in the footer:
Left side of footer: 2020 Euro Lens Bath (this is already a part of the WordPress system)
Center of footer: the superior eyewear cleaning system (this text is added directly to the footer.php file)
Right side of footer: 800.206.8110 (this text is added directly to the footer.php file)
Original article from Stack Overflow
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:
#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]
Solution:
With that CSS, put your divs like so (floats first):
<div id="container"> <div id="left"></div> <div id="right"></div> <div id="center"></div> </div>
try this:
CSS:
#warpcontainer {width:800px; height:auto; border: 1px solid #000; float:left; clear:both }#inner {width:260px; height:auto; border: 1px solid #000; float:left; display:inline-block; margin-right:4px; clear:right; margin-top:10px }
html: