Home/ Questions/Q 7059825
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T04:16:43+00:00

What is the correct way to structure (html) on a page based on the

  • 0

What is the correct way to structure (html) on a page based on the image I have attached. I am trying but I keep getting overflow issues with the name for the second section appearing directly under the text section instead of on top of the photo. I have built my structure like this:

<div style="width:100%; padding-bottom:30px;">
<strong>Name1</strong>
     <div style="float:left; padding-right:30px; width:20%">
          PHOTO
     </div>
     <div style="float:left; width:70%">
         TEXT SECTION
     </div>
</div>

<div style="width:100%; padding-bottom:30px;">
<strong>Name2</strong>
     <div style="float:left; padding-right:30px; width:20%">
          PHOTO
     </div>
     <div style="float:left; width:70%">
         TEXT SECTION
     </div>
</div>

enter image description here

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Move you <strong> outside the <div>-s and apply overflow: hidden to <div>s 

    .panel { width:100%; padding-bottom:30px; overflow: hidden }

.photo { float:left; padding-right:30px; width:20%; height: 80px; border: 3px solid #000 }
.text { float:right; width:70%; height: 80px; border: 3px solid #000 }
    <strong>Name1</strong>
<div class="panel">
    <div class="photo">
        PHOTO
    </div>
    <div class="text">
        TEXT SECTION
    </div>
</div>

<strong>Name1</strong>
<div class="panel">
    <div class="photo">
        PHOTO
    </div>
    <div class="text">
        TEXT SECTION
    </div>
</div>

<strong>Name1</strong>
<div class="panel">
    <div class="photo">
        PHOTO
    </div>
    <div class="text">
        TEXT SECTION
    </div>
</div>
    • 0