This entry is part 6 of 8 in the series WordPress Child Theme Case Study - 2020 Euro Lens Bath

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>
Series NavigationWordPress Child Theme – Custom Sidebar on Home PageWordPress Child Theme – CSS Sticky Footer
Tagged with:
 
  • Luther Agda

    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:
                              

Categories

Archives

Set your Twitter account name in your settings to use the TwitterBar Section.