CODEWITHSUNDEEP
html
Kgomotso
Kgomotso

Reputation: 1

Positioning floating divs

I am trying to position some 5 divs.

2 divs are floating to the left, stacked 1 middle div 2 divs floating to the right

The issue is that the 2 right div are stuck underneath the middle div, even when I try and make the middle div smaller.

How do I put the right floating divs on the right and not underneath my center div???

Upvotes: 0

Views: 66

Answers (3)

Kgomotso
Kgomotso

Reputation: 1

.topLeft { height: 310px;

                     width: 200px;

                     float: left;

        margin-bottom:50px;

             }
    .nextLeft {
                     height: 700px;

                     width: 200px;

         clear: both;

                     float: left; 
             }



    .middle{

    margin:0 230px;

    width:700px;





    }
           .topRight {

                    height: 200px;

                     width: 200px;

                     float: right;


                     }
             .nextRight {
                     height:200px;

                     width: 200px;

        border-radius: 1em 2em;                         
                     float: right; 

        clear: both; 


             }

Upvotes: 0

flowstoneknight
flowstoneknight

Reputation: 1236

Is this sort of what you want?

HTML:

<div class="container">
    <div class="box left"></div>
    <div class="box left"></div>

    <div class="box middle"></div>

    <div class="box right"></div>
    <div class="box right"></div>
</div>

CSS:

.container {
    text-align: center;
}

.box {
    border: 1px solid black;
    height: 100px;
    width: 100px;
}

.left {
    float:left;
}

.middle {
    display: inline-block;
}

.right {
    float: right;
}

Here's a fiddle.

Upvotes: 1

jingyinggong
jingyinggong

Reputation: 646

<div class="wrap">
  <div class="col-l">
    <div>your 1st div</div>
    <div>your 2nd div</div>
  </div>
  <div class="col-m">your 3rd div</div>
  <div class="col-r">
    <div>your 4th left div</div>
    <div>your 5th left div</div>
  </div>
</div>
<style>
.wrap { width: 900px; clear: both; overflow: hidden; }
.col-l { width:　300px; float: left; }
.col-m { width: 200px;  float: left; }
.col-r { width: 400px; float: right; }
</style>

Upvotes: 0

Related Questions