Centering a div inside a div on footer

2 Views

I’m very new to web development, but still can read/edit some stuff. I’m modifying a footer on a wordpress theme which has 3 widgets. I was able to setup the footer area along with 3 widgets.

I wanted to reach two results:
1 – mobile version, 3 widgets, one below the other.
2 – desktop version, 3 widgets visible inline (side-by-side). On this second one I did not succeed.

Read More

I defined in my footer.php 

<footer>
<div id="footer-sidebar" class="secondary">
    <div id="footer-content">
        <div id="footer-sidebar1">
            <?php
            if(is_active_sidebar('footer-sidebar-1')){
            dynamic_sidebar('footer-sidebar-1');
            }
            ?>
        </div>
        <div id="footer-sidebar2" id="info-container:after">
            <?php
            if(is_active_sidebar('footer-sidebar-2')){
            dynamic_sidebar('footer-sidebar-2');
            }
            ?>
        </div>
        <div id="footer-sidebar3">
            <?php
            if(is_active_sidebar('footer-sidebar-3')){
            dynamic_sidebar('footer-sidebar-3');
            }
            ?>
        </div>

            <?php 
                wp_nav_menu(
                    array(
                        'theme_location' => 'Footer',
                        'container' => 'false',
                        'fallback_cb' => 'false',
                        'menu_class' => 'main-links pull-right',
                        'menu_id'=>'menu_footer'
                    ));
            ?>
    </div>
</div>

Then I tried different thing in CSS unsuccesfully, currently looking like this: 

footer {
    background: #0c0c0c;
    color: white;    
}

footer h3{
    color: white;
    font-family: 'bangers';
    font-size: 30px;
}

#footer-sidebar {
    overflow: hidden;
    text-align: center;
}

#footer-content {
    padding-top: 20px;
    padding-bottom: 10px;
    overflow: hidden;
    margin-left: 10%;
    margin-right:10%;

#footer-sidebar1 {
    float: left;
    width: 21em;
    margin-right:5em;
    display: inline-flex;
}

#footer-sidebar2 {
    float: left;
    width: 21em;
    margin-right:5em;
    display: inline-flex;
}

#footer-sidebar3 {
    float: left;
    width: 21em;
    display: inline-flex;
}

#info-container:after {
    clear: both;
    content: "";
    display: table;
}

I tried different suggestions but still cannot manage to center for the desktop version. Any help is highly appreciated. Let me know if I can further clarify the issue.

Post Views: 2

Related posts

2 comments

  1. @WisdmLabs is correct, you will need to use media queries to size everything correctly.

    However, the issue you were running into, was the each div was too large, after displaying inline, one div couldn’t fit alongside another using the original width: 22em; the way around this is to use percentages, Note that when using percentages you have to factor in padding and margin. This is why the code reflects width: 32%; instead of width: 33%;.

    Also, when writing your CSS, if you find you’re writing the same rules two or three times, there is most likely a more efficient way for you to be writing it!

    #footer-content {

  padding-top: 20px;

  padding-bottom: 10px;

  overflow: hidden;

  margin-left: 10%;

  margin-right: 10%;

}

#footer-content > div {

  min-height: 50px;

  background: #ddd;

  width: 32%;

  float: left;

  margin-right: 1%;

}

#footer-content div:last-child {
  margin-right: 0;
  }
    <div id="footer-sidebar" class="secondary">
  <div id="footer-content">
    <div id="footer-sidebar1">

    </div>
    <div id="footer-sidebar2" id="info-container:after">

    </div>
    <div id="footer-sidebar3">

    </div>

  </div>
</div>

  2. To achieve the purpose of have different type of look and feel of the content on different types of devices(mobiles and Desktops) you need to use media queries do a little research an find demo examples.

    Approach:

    In your case design as per Desktop view and later write @media with the appropriate Screen resolution parameter for mobile view and write the code to make the one below the other.

Comments are closed.