How to center one div but keep a 2nd div all the way to the left?

Question

For one section of the webpage, I want one div all the way to the left that holds the social media icons (this is NOT fixed, only shows in one section) and right next to that I want a div that holds the content to be centered in the screen. How can this be done while keeping it responsive?

.row {
width:100%;
display:block;
box-sizing:border-box;
text-align:center;
}

.socialmediaicons {
max-width:50px;
display:inline-block;
}

.content {
max-width:920px;
display:inline-block;
}

page code

<div class="row">
    <div class="socialmediaicons">
    </div>
    <div class="content">
    </div>
</div>

my question isn't a duplicate as both those answers use flexbox and there is no mention of flexbox in my question. — user1269988, Jun 14 '18 at 20:24

score 4 · Accepted Answer · answered Jun 14 '18 at 18:48

You could set the position of the left div to absolute and then set left:0 which will keep it always on the left edge of the window. While not effecting the other div.

.row {
    width: 100%;
    display: block;
    box-sizing: border-box;
    text-align: center;
}

.socialmediaicons {
    border: 1px solid black;
    max-width: 50px;
    display: inline-block;
    width: 50px;
    height: 50px;;
}

.content {
    border: 1px solid black;
    max-width: 920px;
    display: inline-block;
    width: 50vw;
    height: 50px;
}

    <body>
        <div class="row">
            <div class="socialmediaicons" style="position: absolute;
    left: 0;">
</div>
            <div class="content">
</div>
        </div>
        
    </body>

thank you this works great, for others: I removed the height: 50px on .content since mine was taller and can easily control the height of the social icons by adding margin-top: 10%; to .socialmediaicons — user1269988, Jun 14 '18 at 20:21

score 0 · Answer 2 · answered Jun 14 '18 at 18:48

Try FLEXBOX like as shown below

.row {
  width: 100%;
  display: block;
  box-sizing: border-box;
  text-align: center;
  display: flex;
}

.socialmediaicons {
  width: 50px;
}

.content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="row">
  <div class="socialmediaicons">
    <p>
      a
    </p>
    <p>
      a
    </p>
    <p>
      a
    </p>
    <p>
      a
    </p>
  </div>
  <div class="content">
    Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some content Some
    content Some content Some content Some content Some content Some content Some content Some content Some content
  </div>
</div>

How to center one div but keep a 2nd div all the way to the left?

2 Answers2