DanDaMan DanDaMan - 2 months ago 6
CSS Question

Centering a Div in a Div (As well as sizing a div based on size of content)?

Okay, so, I honestly don't know what I'm doing wrong. So let me just show you:

This is what I'm trying to accomplish (made in PS):

http://puu.sh/ryXC9/7d82671ee0.png

What my results are so far:

http://puu.sh/ryXST/02c9722a53.png (Obviously not successful, and as a side note, the orange box is just a placeholder, I'll fill out the form later).

The problem I'm having is first: Trying to have the width of "social-content" to be just the width and height of the held contents. Of course "main-social" is just the width of screen and height of contents. If I can accomplish the width thing with "social-content" then I'll be able to center the div with "Margin: 0 auto" but alas, I cannot figure out my dilemma. This is my relavent markup( "Follow us" bar is excluded, as its irrelevant):



.fa-facebook {
color: white;
overflow: hidden;
}
.fa-twitter {
color: white;
padding: 0.2em;
}
#main-social {
height: 8em;
}
#social-content {
height: 100%;
width: 70%;
margin: 0 auto;
margin-top: 1.4em;
}
#facebook {
float: left;
display: inline-block;
}
#facebook a {
padding: 0.2em 0.4em 0.2em 0.4em;
background-color: #3b5998;
height: 100%;
text-decoration: none;
}
#facebook a:hover {
color: white;
}
#twitter {
float: left;
display: inline-block;
}
#twitter a {
background-color: #10bbe6;
text-decoration: none;
}
#twitter a:hover {
color: white;
}
#emailForm {
float:left;
display: inline-block;
width: 25em;
margin: 0 auto;
background-color: orange;
height: 7em;
}

<script src="https://use.fontawesome.com/d7993286b8.js"></script>
<div id="main-social">
<div id="social-content">
<div id="facebook">
<a href="facebook.com" class="fa fa-facebook fa-5x"></a>
</div>

<div id="emailForm">

</div>

<div id="twitter">
<a href="twitter.com" class="fa fa-twitter fa-5x" ></a>
</div>
</div>
</div>





Also, the problem also is, It needs to be responsive, the entire site is responsive, and since I'm still new to the responsive scene, I may have not taken the best approaches to it. (Tips not needed, but greatly appreciated :) )

Answer

To get #social-content's width to be that of its content, use display: inline-block without a width defined.

If #main-social is simply a container, you can use flexbo to center #social-content within it. Add the following to #main-social:

#main-social {
    display: flex;
    justify-content: center; // Centers horizontally
    align-items: center;     // If you need to center vertically, as well
}