CODEWITHSUNDEEP
htmlcss
Brian Cherdak
Brian Cherdak

Reputation: 109

4 divs, last row double stacked inside another div

What I am trying to accomplish is this enter image description here

I am working on it currently and just cant get it right, I started 2 jsfiddles trying to do this but nothing is working.

verison 1: http://jsfiddle.net/ewa0nLjk/1/

.tutlist {
    width:500px;
    height:75px;
    padding:5px;
    background-color: #dddddd;
    margin: 40px;
    /*margin not required*/
}
.tutlist div {
    background-color: #ff0000;
}
.left {
    width: 75px;
    float:left;
    height:100%;
    display: inline;
}
.middle {
    width: 500px;
    height:100%;
    display: inline;
}
.right {
    width: 120px;
    float:right;
    height:100%;
    display: inline;
}

    <div class="tutlist">     
        <div class="left">
         <img src="https://c2.staticflickr.com/4/3726/13855354235_887ae071c0_s.jpg"/></div>     
        <div class="middle">how to send an email in php code testing it</div>     
        <div class="right">double</div> 
    </div>

version 2: http://jsfiddle.net/R65fA/1/

#header {

    padding:5px;
    background-color: #dddddd;
    margin: 30px;
    width:500px;
    /*margin not required*/
}
.header-left {
    width:75px;
    display:inline;
    float:left;
    background:red;

}
.logo {
    width:409px;
    display:inline;
    background:red;


}
.header-right {
    width:75px;
    background:red;
    float:right;
    display:inline;
}

#clear {
        clear: both;
    font-size: 0;
    height: 0;
    line-height: 0;
    margin: 0;
    padding: 0;
}
<div id="header">
        <div class="header-left">
            <img src="https://c2.staticflickr.com/4/3726/13855354235_887ae071c0_s.jpg"/>
    </div>
        <div class="logo">
            how to send an email in php code testing it
    </div>
        <div class="header-right">
            RIGHT
    </div>
    <div id="clear"> </div>
</div>

Pretty much I have 3 divs, and the last div has 2 smaller divs in it. I am having trouble with this if someone can assist me would be awesome.

EDIT: One quick issue with setting up width auto.

how do I set the blue to fill up the remaining width of the while maininfo div? This is my jsfiddle.net/4ykf5frk/2, I tried setting the width:auto

Upvotes: 1

Views: 103

Answers (4)

emmanuel
emmanuel

Reputation: 9615

Please check this updated example based on your first code:

.tutlist {
  width: 500px;
  height: 75px;
  padding: 5px;
  background-color: #dddddd;
  margin: 40px;
  /*margin not required*/
}
.tutlist div {} .left {
  width: 75px;
  float: left;
  height: 100%;
  display: inline;
}
.middle {
  width: 290px;
  height: 100%;
  display: inline-block;
  background-color: #ff0000;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  margin: 0 5px;
}
.right {
  width: 120px;
  float: right;
  height: 100%;
  display: inline-block;
}
.right_top {
  height: 34px;
  display: inline-block;
  background: red;
  margin-bottom: 5px;
  width: 100%;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.right_bottom {
  height: 34px;
  display: inline-block;
  background: grey;
  width: 100%;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
<div class="tutlist">
  <div class="left">
    <img src="https://c2.staticflickr.com/4/3726/13855354235_887ae071c0_s.jpg" />
  </div>
  <div class="middle">how to send an email in php code testing it</div>
  <div class="right">
    <div class="right_top">test</div>
    <div class="right_bottom">double
    </div>
  </div>
</div>
You have to use border-radius for setting the rounded corners.

Hope this helps

Upvotes: 2

Giannis Grivas
Giannis Grivas

Reputation: 3412

Try this http://jsfiddle.net/csdtesting/22YBU/735

* {
    outline: 1px solid red;
}

.container {
    overflow: hidden;
}
.right {
    float: right;
    width: 100px;
}
.left {
    float: left;
    width: 100px;
}
.middle {
    margin: 0 100px;
}
<div class=container>
    <div class=right>
        <div class="right1">right1 inside</div>
        <div class="right2">right2 inside</div>
    </div>
    <div class=left>
        <img src="https://c2.staticflickr.com/4/3726/13855354235_887ae071c0_s.jpg"/>
    </div>
    <div class=middle>
        Put text here Put text herePut text herevPut text herePut text herePut text herePut text herePut text herePut text herePut text herePut text herePut text herePut text herePut text herePut text here Put text herePut text herevPut text herePut text herePut text herePut text here
    </div>
</div>

Upvotes: 2

Florin Pop
Florin Pop

Reputation: 5135

You can find a good example here.

CSS:

.container{
    width:100%;
}
.left {
    width:25%;
    height:100px;
    background-color: red;
    float:left;
}
.middle {
    width:50%;
    height:100px;
    background-color: blue;
    float:left;
}
.right {
    width:25%;
    height:100px;
    float:left;
}

.right1{
   height:50px;   
    background-color: green;
}
.right2{
   height:50px;   
    background-color: purple;
}

HTML:

<div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right">
        <div class="right1"></div>
        <div class="right2"></div>    
    </div>
</div>

Upvotes: 1

LcSalazar
LcSalazar

Reputation: 16841

To make your life easier, set 3 divs in a row. And then, inside the third one, you set those smaller two divs.

Just a TIP: To make the inline divs same height, set them as display:table-cell. Plus, you'll be able to set vertical alignment...

.left, .middle, .right {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid red;
  padding: 5px;
}

.right-top, .right-bottom {
  border: 1px solid blue;
  padding: 5px;
}
<div class='left'>
    content 1
</div>

<div class='middle'>
    content 2
</div>

<div class='right'>
    <div class='right-top'>
        content 3
    </div>
    <div class='right-bottom'>
        content 4
    </div>
</div>

Upvotes: 1

Related Questions