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

Question

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:

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?

Answer 1

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>