CODEWITHSUNDEEP
htmlcenter
Stefaan
Stefaan

Reputation: 182

Center 2 widgets within div

I have a problem on my responsive homepage. When the page is less than 1024px wide, I want the two contents widgets below each other and horizontally aligned. I defined their width and tried to center them with margin: 0 auto, but they stay at the left.

This is the link: http://readyforsolutions.be/wordpress/

This is my HTML:

<div class="home-left">
    <h1 class="widgettitle">Title</h1>
    <p>Text</p>
    <div class="homebuttonbox"><a class="homebutton"  href="http://readyforsolutions.be/wordpress/logistieke-problemen-quick-scan/">Doe de Quick     Scan</a></div>
</div>

<div class="home-right">
    <h1 class="widgettitle">Title</h1>
    <p>Text</p>
    <div class="homebuttonbox"><a class="homebutton" href="http://readyforsolutions.be/wordpress/logistieke-problemen-quick-scan/">Doe de Quick Scan</a></div>
</div>

This is my CSS:

.entry-content {
    width: 100%;
}

.home-left {
    width: 100%;
    float: none;
    display: block;
    margin: 0 auto;
}

.home-right {
    width: 100%;
    float: none;
    display: block;
    margin: 0 auto;
    padding-top: 120px;
}

Any help is appreciated!

Thanks, Stefaan

Upvotes: -1

Views: 834

Answers (1)

Sparebrain
Sparebrain

Reputation: 111

Modifying the display and margin parameters of the container DIV tag may do the trick:

HTML:

<DIV class="entry-content">

<div class="home-left">
  <h1 class="widgettitle">Title #1</h1>
  <p>Text</p>
  <div class="homebuttonbox">Content Box #1</div>
</div>

<div class="home-right">
  <h1 class="widgettitle">Title #2</h1>
  <p>Text</p>
  <div class="homebuttonbox">Content Box #2</div>
</div>

</DIV>

CSS:

.entry-content {
     margin-left: auto;
     margin-right: auto;
     border: 5px black solid;
     text-align: center; }

.home-left {
     float: none;
     margin: 0 auto;
     border: 1px red solid;
     display: inline-block;
     text-align: left; 
}

.home-right {
     float: none;
     margin-left: 0px;
     border: 1px blue solid;
     display: inline-block;
     text-align: left;
}

Other Resource: CSS Centering

Example: CodePen Example

Upvotes: 1

Related Questions