CODEWITHSUNDEEP
htmlcss
Brandon
Brandon

Reputation: 374

Trying to get a picture and text side by side inside a div

I've been searching around for this and found a lot of similar cases but for whatever reason, the solution doesn't work in my scenario.

The text and picture are being stacked on top of each other. I'm having trouble keeping it inside the headerBlock div but side by side.

#wrap { 
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  float: left;
}

#headerBlock { 
  height: 200px; 
  background:  #776b68; 
}

div.headerText {
  vertical-align: middle;
  text-align: justify;
}

div.headerImg img {
  vertical-align: middle;
}
<div id="wrap">
  <div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg"><img src="/somepicturehere">
    </div>
  </div>

  <!--Ignore these, it's for future use-->
  <div id="leftBlock"></div>

  <div id="rightBlock"></div>

  <div id="footerBlock"></div>

</div>

Upvotes: 1

Views: 60

Answers (2)

James Douglas
James Douglas

Reputation: 3446

If you make .headerText and .headerImg display: inline-block;, then that should do the trick.

#wrap { 
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  float: left;
}

#headerBlock { 
  height: 200px; 
  background:  #776b68; 
}

div.headerText {
  display: inline-block;
}
div.headerImg {
  display: inline-block;
}
div.headerImg img {
  vertical-align: middle;
}
<div id="wrap">
  <div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg">
      <img src="/somepicturehere">
    </div>
  </div>
  <!--Ignore these, it's for future use-->
  <div id="leftBlock"></div>
  <div id="rightBlock"></div>
  <div id="footerBlock"></div>
</div>

And if you want to vertically align them, use display: flex; and align-items: center; on the container:

#wrap { 
  width: 800px; 
  margin: 0 auto; 
  overflow: hidden;
  float: left;
}

#headerBlock { 
  height: 200px; 
  background:  #776b68; 
  display: flex;
  align-items: center;
}

div.headerText {
  display: inline-block;
}
div.headerImg {
  display: inline-block;
}
<div id="wrap">
  <div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg">
      <img src="/somepicturehere">
    </div>
  </div>
  <!--Ignore these, it's for future use-->
  <div id="leftBlock"></div>
  <div id="rightBlock"></div>
  <div id="footerBlock"></div>
</div>

Upvotes: 2

Michael Coker
Michael Coker

Reputation: 53674

Use display: flex on the parent and that will create a row with the children side by side. Then you can also use other flex properties like align-items and justify-content to align horizontally/vertically.

#wrap { 
width: 800px; 
margin: 0 auto; 
overflow: hidden;
float: left;
}

#headerBlock { 
height: 200px; 
background:  #776b68; 
display: flex;
align-items: center;
}

div.headerText {
text-align: justify;
}

div.headerImg img {
vertical-align: middle;
}
<div id="wrap">
<div id="headerBlock">
    <div class="headerText">Some text here</div>
    <div class="headerImg"><img src="/somepicturehere">
    </div>
</div>

<!--Ignore these, it's for future use-->
<div id="leftBlock"></div>

<div id="rightBlock"></div>

<div id="footerBlock"></div>

</div>

Upvotes: 0

Related Questions