General_9
General_9

Reputation: 2319

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

Upvotes: 0

Views: 608

Answers (2)

Zoltan Toth
Zoltan Toth

Reputation: 47667

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>

Upvotes: 1

Daniel Hunter
Daniel Hunter

Reputation: 2866

HTML

<div class="pick_group">
     <h2>Name 1</h2>
     <img class="photo" />
     <p class="text"></p>
</div>

<div class="pick_group">
     <h2>Name 2</h2>
     <img class="photo" />
     <p class="text"></p>
</div>

The CSS

place this in between just before the

   .pick_group {
width: 800px;
margin: 0 auto;
clear: both;
}

.pick_group h2{
style if you want
}

.photo {
width: 200px;
float: left;
margin: 10px 25px;
}

.text {
width: 500px;
float: left;
margin: 10px 25px;
}

Upvotes: 0

Related Questions