| | | | | |

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>

Similar Posts

0 Comments

  1. 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:
                              

Leave a Reply

Your email address will not be published. Required fields are marked *