CODEWITHSUNDEEP
csshtmlposition
Majed DH
Majed DH

Reputation: 1301

maintaining div position between images

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

Answers (2)

Kevin Bowersox
Kevin Bowersox

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

Manish Mishra
Manish Mishra

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

Related Questions