CODEWITHSUNDEEP
csshtmlcss-position
gwin003
gwin003

Reputation: 7931

CSS - Float child divs around other div

I want to dynamically adjust the width's of my child div's based on the heights of the other children div. It's hard to explain, so I'll just show some pictures...

In this first image, the black square is my "parent" div. It contains other divs with varying heights. The blue div's height is static, but must be floated to the right. The red div's are the ones I am having problems with. They should automatically adjust their own width if they occur below the bottom of the blue div.

The second red div with a small height. See how the last div fits the width of the parent div. http://i.imgur.com/jAn3nNg.png

The second red div with a larger height. Now both the bottom 2 div's widths fit the parent div. http://i.imgur.com/GDQjnNX.png

One more example...
https://i.sstatic.net/jrRuM.png

I am not sure if I should be using special positioning, or how to structure the div's. It will be fine if there is a bit of space below the blue div, I just want to have an equal amount of space between the red div's.

Here is kinda what I have set up. See the yellow div's are hiding behind the right blue div: http://jsfiddle.net/MVzHS/1/

#floatRight {
   width: 100px;
   height:200px;
   background-color:blue;
   position: absolute;
   right:10px;
   top:10px;
}

Solution: http://jsfiddle.net/MVzHS/3/

Upvotes: 4

Views: 1530

Answers (3)

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102428

HTML

<div id="parent">

    <div id="blue">Blue content here</div>

    <div id="red">Red 1 content here
    <br>more content
    <br>more content
    <br>more content
    <br>more content
    <br>more content</div>

    <div id="red">Red 2 content</div>
    <div id="red">Red 3 content</div>

</div>

CSS

#parent
{
    border: 1px solid black;
    height: 100%;
}

#blue
{
    float: right;
    border: 1px solid blue;
    height: 100px;
    margin-left: 10px;
}

#red
{
    border: 1px solid red;
    overflow: hidden;
    margin-bottom: 10px;
}

JS Bin available here: http://jsbin.com/irubuy/5

Upvotes: 0

seemly
seemly

Reputation: 1090

If in the source you add the blue div first and float it right, this should do what you want/need it to do?

.black {
    width:958px;
    padding:10px;
    border:1px solid #000;
    float:left;
}
.blue {
    width:248px;
    height:400px;
    border:1px solid #00f;
    float:right;
    margin:0 0 10px 30px;
}
.red {
    border:1px solid #f00;
    margin:0 0 10px;
}

http://jsfiddle.net/seemly/BTxgJ/

The only "issue" I found with the fiddle provided is that the divs themselves kind of intersect each other, but the content within them wrap as they should. I am unsure how this will display if using borders, background colours or background imagery. Does this help at all?

Upvotes: 0

dsdev
dsdev

Reputation: 1124

You can do it by using float: right on the blue box and setting the overflow: hidden on the red boxes.

Check out this jsFiddle for an example.

Upvotes: 5

Related Questions