DIV manipulations

Question

This is very simple and newbie question. I just started to learn basic HTML, and when trying to place 3 divs together in different order, I got stucked. I need 3 DIV elements: The first one should go to the left and it is DIV for thumb. The second one should go to the right side, having padding-left option set at 5px, then the third div should be placed below the second div, and the height of both divs should be matching the first div thumb size (50x50px).

Here is my code, that I was trying to create, but still no success.

    <div style="width: 500px;">
        <div style="float: left;">
            <img src="http://www.avatarsdb.com/avatars/fire_01.gif" width="50px" height="50px">
        </div>
        <div style="padding-left:10px; width:100px;">top</div>
        <div style="float: left; padding-left:10px; width:100px;">bottom</div>
    </div>

I know how to solve it with Table, but with DIV I was not able to solve it myself being super new.

Possible duplicate of [How to place two divs next to each other?](http://stackoverflow.com/questions/5803023/how-to-place-two-divs-next-to-each-other) — domsson, Mar 15 '17 at 11:46

Farzin Kanzi · Answer 1 · 2017-03-15T12:00:28.467

0

If I truly understand you, you need absolute positioning for 3'rd div.

<div style="width: 500px;position:relative;">
 <div style="float: left;"><img src="http://www.avatarsdb.com/avatars/fire_01.gif" width="50px" height="50px"></div>
  

 <div style="padding-left:10px; width:100px;float:right;height:25px;">top</div>
 
 <div style="padding-left:10px; width:100px;position:absolute;top:25px;right:0;">bottom</div>
 </div>

edited Mar 15 '17 at 12:00

answered Mar 15 '17 at 11:46

Farzin Kanzi

3,380
2
21
23

And again, thank you very much for your time :) Very helpful! – Carlos Florian Mar 15 '17 at 11:57

Jan Franta · Answer 2 · 2017-03-15T11:58:11.793

This should solve your issue:

    <div style="width: 500px;">
       <div style="float: left;">
         <img src="http://www.avatarsdb.com/avatars/fire_01.gif" width="50px" height="50px">
       </div>
       <div style="float:right;">
         <div style="padding-left:10px; width:100px; height: 25px;">top</div>
         <div style="padding-left:10px; width:100px; height: 25px;">bottom</div>
       </div>
    </div>

The easiest way is to group your contact. One DIV for the left content and one for the right. Every div get it's position. So no need to position element inside these divs. In this way, you have more freedom to design your elements independently within the groups.

And what about using style classes? This make your code more readable and faster.

.master {
  width: 500px;
}

.thumb {
  float: left;
}

.thumb img {
  width: 50px;
  height: 50px;
}

.description {
  float: right;
}

.description > div {
  padding-left:  10px;
  width: 100px;
  height: 25px;
}

<div class="master">
   <div class="thumb">
     <img src="http://www.avatarsdb.com/avatars/fire_01.gif">
   </div>
   <div class="description">
     <div>top</div>
     <div>bottom</div>
   </div>
</div>

Thank you! It will help me in future! – Carlos Florian Mar 15 '17 at 11:56 — Carlos Florian, Mar 15 '17 at 11:56

score 0 · Accepted Answer · answered Mar 15 '17 at 11:49

I'm slightly confused by your question but hopefully this helps you...

I would wrap the thumb div in its own wrapper and then wrap the second 2 div's together in another wrapper and float the wrappers to the left. As follows:

* {
  box-sizing: border-box;
}
.wrapper > .left, .wrapper > .right {
  float: left;
}
.left {
  width: 50px;
  height: 50px;
}
.right .top, .right .bottom {
  height: 25px;
  width: 100px;
  padding-left: 5px;
}
.right .top {
  background-color: yellow;
}
.right .bottom {
  background-color: red;
}

<div class="wrapper">
  <div class="left">
    <img src="http://www.avatarsdb.com/avatars/fire_01.gif" width="50px" height="50px">
  </div>
  <div class="right">
    <div class="top">
    </div>
    <div class="bottom">
    </div>
  </div>
</div>

That was a great solution! Many thanks :) I will learn from it — Carlos Florian, Mar 15 '17 at 11:52

score 0 · Answer 4 · answered Mar 15 '17 at 11:51

0

Like this,

<div style="width: 500px;display:flex;">
    <div style="float: left;flex:1;">
        <img src="http://www.avatarsdb.com/avatars/fire_01.gif" width="50px" height="50px">
    </div>
    <div style="float: left;flex:1;">
        <div style="padding-left:10px; width:100px;">top</div>
        <div style="padding-left:10px; width:100px;">bottom</div>
    </div>
</div>

Note: Do not use inline styles.

answered Mar 15 '17 at 11:51

clu3Less

1,812
3
17
20

Thank you! Much appreciated. Great guys and great and fast help. I will learn from each suggestion and improve my skills. – Carlos Florian Mar 15 '17 at 12:00

Fabrizio Calderan · Answer 5 · 2017-03-15T12:00:00.813

You could use flexbox for this task. All divs match the height of the avatar and you could easily reorder them so you can have a responsive layout

Example codepen

Markup

<div class="wrap">
    <div class="wrap__avatar">
       <img src="http://placehold.it/50x50" />
    </div>
    <div class="wrap__column">
       Column (100px left padding)
    </div>
    <div class="wrap__main">
        Main (5px left padding)
    </div>
</div>

CSS (compiled from SCSS)

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
}

.wrap__avatar {
  order: 1;
}

.wrap__main {
  padding-left: 5px;
  flex: 1;
  order: 2;
}

.wrap__column {
  width: 200px;
  padding-left: 100px;
  order: 3;
}

.wrap > div {
  box-sizing: border-box;
}

DIV manipulations

5 Answers5