CODEWITHSUNDEEP
htmlcsscss-floatcss-positiontext-align
encrypted21
encrypted21

Reputation: 194

What to do to align text as shown in the image using HTML and CSS?

I'm trying to align a block of text so it looks like in the image. However, without acceptable result. The text is located in the floating div which is repeating. Same divisions are floating next to each other.

My HTML code:

<div id="bottomPanel">
  <div class="bottomItem">
    <img src="image.png" alt="mouse" class="imgBottom">
    <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a>
    <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
  </div>
</div>

My CSS code:

#bottomPanel {
    float: left;
    width: 100%;
    text-align: center;
}
.bottomItem {
    float: left;
    width: 100%;
    margin-top: 10px;
    background-color: #e6e6e6;
}
.imgBottom {
    float: left;
    padding-top: 25px;
    padding-left: 14px;
}
.item_bottomDesc {
    float: left;
    font-family: Arial;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    color: #133855;
    padding-top: 42px;
    padding-left: 18px;
    display: block;
}
.item_bottomAbout {
    float: left;
    font-family: Arial;
    font-size: 12px;
    width: 376px;
    height: auto;
    text-align: justify;
    display: block;
    padding-top: 50px;
    color: #7b7a79;
}

This is how the elements should look like:

Image of correct elements location

The text I can't align properly is the long one. Division has 100% width which is approx. 774px. bottomPanel is a div where all floating .bottomItem are located. Any ideas?

Upvotes: 1

Views: 63

Answers (2)

Nenad Vracar
Nenad Vracar

Reputation: 122047

Instead of float i suggest you use flexbox for this, and you dont have to use padding to get vertical align.

.bottomItem {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 10px;
}

.right {
  max-width: 60%;
  margin: 0 10px;
}
<div id="bottomPanel">
  <div class="bottomItem">
    <img src="http://placehold.it/150x150">
    <div class="right">
      <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a>
    <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
    </div>
  </div>
  
  <div class="bottomItem">
    <img src="http://placehold.it/150x150">
    <div class="right">
      <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a>
    <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
    </div>
  </div>
  
  <div class="bottomItem">
    <img src="http://placehold.it/150x150">
    <div class="right">
      <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a>
    <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
    </div>
  </div>
</div

Upvotes: 0

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324650

So not much wrong here overall. Just that you have a few extra things you don't need.

Namely, bottomDesc and bottomAbout do not need to be floated, and the padding-top for those two elements need adjusting too.

I have also added an explicit width/height for the image, feel free to adjust as needed but it's a good idea to define it. I also replaced its padding with appropriate margins.

Finally, I removed the #bottomPanel styles altogether - again float is not needed here, and width:100% is default anyway. Also, the text-align:center was unnecessary.

Here's the revised code for you to look at:

.bottomItem {
    float: left;
    width: 100%;
    margin-top: 10px;
    background-color: #e6e6e6;
}
.imgBottom {
    float: left;
    margin: 14px;
    width: 100px;
    height: 100px;
}
.item_bottomDesc {
    font-family: Arial;
    font-weight: bold;
    font-size: 12px;
    text-decoration: none;
    color: #133855;
    padding-top: 14px;
    padding-left: 18px;
    display: block;
}
.item_bottomAbout {
    font-family: Arial;
    font-size: 12px;
    width: 376px;
    height: auto;
    text-align: justify;
    display: block;
}
<div id="bottomPanel">
  <div class="bottomItem">
    <img src="http://placehold.it/100x100" alt="mouse" class="imgBottom">
    <a href="#" title="description" class="item_bottomDesc">Lorem ipsum dolor sit amet</a>
    <p class="item_bottomAbout">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur gravida, massa ut suscipit suscipit, massa elit sollicitudin eros, nec lacinia neque odio a est. Phasellus tincidunt nulla eget lorem sodales</p>
  </div>
</div>

Upvotes: 1

Related Questions