CODEWITHSUNDEEP
csshtml
Alan
Alan

Reputation: 307

How can I get a child div to float right and 'above' divs prior to it?

I've created a parent div with four divs inside of it. The first div (grey)contains an image, the second (red) is to be below this div with a description. The two other divs are to float right of these two.

This is the closest I can get:

code screenshot

I want the 3rd/4th divs to sit flush up top. I could use a negative top-margin but I would like for it to naturally go up. Also, I cannot rearrange the order of the divs. It is a basic problem/misunderstanding but I can't give a clear enough definition for google.

Here is my html:

<div id="container">

<div class="imgbox"></div>

<div class="pick" id="first"></div>

<div class="pick" id="second"></div>

<div class="pick" id="third"></div>

</div>

And here is the CSS:

#container {
        width: 440px;
        height: 212px;
        border: 1px solid grey;
    }

    div {
        border: 1px solid black;
        display: block;
    }

    .imgbox {
        width: 218px;
        height: 100px;
        float: left;
        clear: none;
        background-color: grey;
    }

    .pick {
        width: 218px;
        height: 100px;
    }

    .pick#first {
        float: left;
        clear: left;
        background-color: red;
    }

    .pick#second {
        float: left;
        background-color: blue;
    }

    .pick#third {
        float: right;
        clear: right;
        background-color: purple;
    }

Upvotes: 1

Views: 1540

Answers (4)

Fluoxetine
Fluoxetine

Reputation: 195

First, you need to wrap the divs you want on the left into one container, and the divs on the right in another:

<div id="container">
    <div id="left">
        <div class="imgbox"></div>
        <div class="pick" id="first"></div>
    </div>
    <div id="right">
        <div class="pick" id="second"></div>
        <div class="pick" id="third"></div>
    </div>
</div>

Then, you can remove the individual float assignments from each div and assign them instead to #right and #left:

#left {
    float: left;
}
#right {
    float: right;
}

Finally, you need to take the correct widths into account. Your #container has 440px of room. Each child div is assigned 218px; however, each of those divs also has a 1px border on each side, making them take up 218 + 2(1) = 220px of room. Reduce the width of #imgbox and .pick to 216px.

Everything together can be seen at this jsFiddle.

Upvotes: 1

econduck
econduck

Reputation: 118

Create two sub-containers and float them.

<div id="container">
  <div class="sub-container">
    <div class="imgbox"></div>
    <div class="pick" id="first"></div>
  </div>
  <div class="sub-container">
    <div class="pick" id="second"></div>
    <div class="pick" id="third"></div>
  </div>
</div>



.sub-container{
  margin: 0;
  padding:0;
  display: inline-block;
  float: left;
 }

Upvotes: 0

Scott
Scott

Reputation: 21892

Simply wrap the two sides in a div with common CSS.

HTML:

<div id="container">

<div class="l">
<div class="imgbox">0</div>
<div class="pick" id="first">1</div>
</div>

<div class="l">
<div class="pick" id="second">2</div>
<div class="pick" id="third">3</div> 
</div>

</div>

-

CSS:

#container {
        width: 440px;
        height: 212px;
        border: 1px solid grey;
    }

    div {
        border: 1px solid black;
        display: block;
    }

.l { width: 218px; float: left; }

    .imgbox {
        width: 218px;
        height: 100px;
        background-color: grey;
    }

    .pick {
        width: 218px;
        height: 100px;
    }

    .pick#first {
        background-color: red;
    }

    .pick#second {
        background-color: blue;
    }

    .pick#third {
        background-color: purple;
    }

Demo here

Upvotes: 2

Tyler Hughes
Tyler Hughes

Reputation: 602

Put all your DIV's on the left side into a container div and float it to the left. Then put all your right side DIV's into a container and float it to the right.

You might have to specify the width of .left_side and .right_side too.

HTML:

<div id="container">
 <div class="left_side">
  <div class="imgbox"></div>
  <div class="pick" id="first"></div>
 </div>

 <div class="right_side">
  <div class="pick" id="second"></div>
  <div class="pick" id="third"></div>
 </div>
</div>

CSS:

#container {
    width: 440px;
    height: 212px;
    border: 1px solid grey;
 }

div {
    border: 1px solid black;
    display: block;
}

.left_side {
    float:left;
}

.right_side {
    float:right;
}

.imgbox {
    width: 218px;
    height: 100px;
    float: left;
    clear: left;
    background-color: grey;
}

.pick {
    width: 218px;
    height: 100px;
}

.pick#first {
    float: left;
    clear: both;
    background-color: red;
}

.pick#second {
    float: left;
    background-color: blue;
}

.pick#third {
    float: right;
    clear: right;
    background-color: purple;
}

Upvotes: 1

Related Questions