General_9 General_9 - 17 days ago 8
CSS Question

html, div, and floating structure

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

Answer

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>

Comments