CODEWITHSUNDEEP
htmlcss
Flama
Flama

Reputation: 868

Align image, text and header inside of a box

I'm designing this box but I have the following problem. I have an image, a header and some text inside of it but I can't align the header so that it appears above the rest of the text. It ends up looking like this:

"Favorites category" is supposed to be above the rest of the text

HTML:

 <div class='Favorites'>
     <div class='favorites_info'>
         <div class="box">
               <div class="picture">
                    <img src="Iconos/Help/favorites_help.png" alt="Fav" class="favor_help">
                </div>
                <div class="Messagebox_title">
                    <h1 >Favorites category
                    </h1>
                </div>
                <div class="Messagebox">
                    <h4 >You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
                    </h4>
                </div>
        </div>
     </div>

CSS regarding the two text parts:

.Messagebox_title {
    vertical-align:middle;
    display:table-cell;
    text-align:center;
    color: #555;
    position: relative;
    font-family: monaco, monospace;
    font-size: 15px;
}

.Messagebox {
    vertical-align:middle;
    display:table-cell;
    text-align:justify;
    color: #555;
    position: relative;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: monaco, monospace;
    font-size: 15px;
  }

Upvotes: 0

Views: 1060

Answers (3)

alacom
alacom

Reputation: 236

You are doing fine.

Your code works by making a small change.

Just change display: to block and add float: left to your picture. 

<style>

.picture 
{
    float:left;
    margin-right:10px;
}
.Messagebox_title {
    vertical-align:middle;
    display:block;
    text-align:left;
    color: #555;
    position: relative;
    font-family: monaco, monospace;
    font-size: 15px;
}

.Messagebox {
    vertical-align:middle;
    display:block;
    text-align:justify;
    color: #555;
    position: relative;
    margin-left: 2px;
    margin-right: 2px;
    margin-top: 0px;
    margin-bottom: 0px;
    font-family: monaco, monospace;
    font-size: 15px;
}

</style>
<div class='Favorites'>
 <div class='favorites_info'>
     <div class="box">

           <div class="picture">
                <img src="http://eztechtraining.com/wp-content/uploads/2012/11/2012-10-20-21.38.35-150x150.jpg" alt="Fav" class="favor_help">
            </div>

            <div class="Messagebox_title">
                <h1 >Favorites category
                </h1>
            </div>
            <div class="Messagebox">
                <h4 >You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
                </h4>
            </div>

    </div>
 </div>

Upvotes: 0

sol
sol

Reputation: 22949

You could use flexbox, you would need to wrap the text in an additional div.

Example:

.Messagebox_title {
  text-align: center;
}

.Messagebox {
  text-align: justify;
  margin: 0 2px;
}

.box {
  font-size: 15px;
  font-family: monaco, monospace;
  display: flex;
  color: #555;
}

.text_wrapper {
  display: flex;
  flex-direction: column;
}
<div class='Favorites'>
  <div class='favorites_info'>
    <div class="box">
      <div class="picture">
        <img src="https://unsplash.it/150" alt="Fav" class="favor_help">
      </div>
      <div class="text_wrapper">
        <div class="Messagebox_title">
          <h1>Favorites category
          </h1>
        </div>
        <div class="Messagebox">
          <h4>You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
          </h4>
        </div>
      </div>
    </div>
  </div>

You can also do something similar with CSS Grid, which reduces the amount of HTML needed.

.Favorites {
  display: grid;
  grid-template-columns: 150px 1fr;
  grid-gap: 1em;
  font-size: 15px;
  font-family: monaco, monospace;
  color: #555;
}

.picture {
  grid-row: 1 / 3;
}

h1 {
  grid-column: 2;
  text-align: center;
}

h4{
  grid-column: 2;
  grid-row: 2;
  text-align: justify;
  margin: 0 2px;
}
<div class='Favorites'>
  <div class="picture">
    <img src="https://unsplash.it/150" alt="Fav" class="favor_help">
  </div>
  <h1>Favorites category</h1>
  <h4>You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.</h4>
</div>

Upvotes: 1

Aashiq Rathnadas
Aashiq Rathnadas

Reputation: 525

Try changing according to your need

.box{float:left;width:100%;position:relative;border:1px solid yellow;margin-bottom:15px;}
info{border:1px solid blue;}
.icon{float:left;width:100px;background:yellow;height:120px;text-align:center;position:relative;overflow:hidden;}
.info .icon{background:blue;}
.icon span{position:absolute;top:auto;margin:33% auto;left:0;right:0;bottom:auto}
.text{float:left;width:calc(100% - 100px);width:-webkit-calc(100% - 200px);padding:5px;}
<div class="box">
<div class="icon"><span>Img</span></div>
<div class="text">
<h3>Heading comes here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>

</div>
<div class="box info">
<div class="icon"><span>img</span></div>
<div class="text">
<h3>Heading comes here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>

</div>

Upvotes: 0

Related Questions