Reputation: 1301
I have 3 <div>
s like this:
-----------------------------------------
| | div2 | |
| div1 |--------------------| div3 |
| |////////new div/////| |
-----------////////////////////----------
CSS
.parentdiv{
position:relative;
}
div1,div2,div3{
position:relative
float:left}
I've tried to make the new <div>
with position:relative
and float
but couldn't make it .
I don't want to use position:absolute
.
Upvotes: 1
Views: 79
Reputation: 94499
Wrap the interior div
elements within a containing div
. If you want all of the div
elements to be the same height you will need to specify a height on the three siblings and then specify a height of .5 * aforementioned height for each wrapped div
.
HTML
<div id="d1">Div1</div>
<div id="dc">
<div id="d2">Div 2</div>
<div id="d3">Div 3</div>
</div>
<div id="d4">Div4</div>
CSS
#d1,#dc,#d4{
float:left;
background: red;
height: 40px;
width: 40px;
text-align: center;
}
#dc div{
height: 20px;
}
Working Example: http://jsfiddle.net/x64Vp/
Upvotes: 1
Reputation: 12385
place three divs, float:left
or display:inline
to each other,
and then divide the middle one into two.
<div class="A">
</div>
<div class="B">
<div class="upper">
</div>
<div class="lower">
</div>
</div>
<div class="C">
</div>
and CSS like
.A,.B, .C
{
float:left;
width:30%;
height:200px;
border:1px Solid #CCC;
}
.B .upper
{
width:100%;
height:50%;
background-color:Yellow;
}
.B .lower
{
width:100%;
height:50%;
background-color:Green;
}
see this fiddle
Upvotes: 6