CODEWITHSUNDEEP
htmlcss
Don Rhummy
Don Rhummy

Reputation: 25810

How force parent div to stretch horizontally to accommodate floated child divs?

I want the blue div (as shown in the fiddle below) to be to the right of the red div. Instead it's below. If I set parent to overflow: hidden, it's still below and just hides it.

EDIT: In simplifying my code, I left out the display: table on my text div. I have added that in here: http://jsfiddle.net/z1385n05/3/

http://jsfiddle.net/z1385n05/

http://jsfiddle.net/z1385n05/1/ (with overflow: hidden)

HTML:

<div class="outer">
    <div class="parent">
        <div class="child1">1</div>
        <div class="child2"><span>Child 2 is longer than the edge, I don't want it to wrap</span></div>
    </div>
</div>

CSS:

.outer
{
    position: relative;
    width: 320px;
    height: 480px;
    border: solid 1px #cccccc;
}

.parent
{
    position: absolute;
    top: 100px;
    left: 150px;
    height: 20px;
    overflow: visible;
}

.child1
{
    position: relative;
    width: 30px;
    height: 100%;
    float: left;
    background-color: red;
}

.child2
{
    position: relative;
    height: 100%;
    float: left;
    background-color: blue;
    white-space: nowrap;
    overflow: hidden;
    display: table;
}

.child span
{
    position: relative;
    width: 100%;
    vertical-align: bottom;
    display: table-cell;
}

Upvotes: 2

Views: 982

Answers (3)

Alex Char
Alex Char

Reputation: 33218

After your updated question you can achieve this if you set parent display:table and .child2 display:table-cell

.parent
{
    position: absolute;
    top: 100px;
    left: 150px;
    height: 20px;
    overflow: hidden;
    display:table;/*Add this*/
}

.child2
{
    position: relative;
    height: 100%;
    background-color: blue;
    white-space: nowrap;
    display: table-cell;/*Add this*/
    overflow: hidden;
}

fiddle

Upvotes: 5

Oneil McCalla
Oneil McCalla

Reputation: 23

The reason why the blue box is floating below the red box is because there is not enough horizontal space for them to be side by side.

To solve this there are 2 solutions:

1) increase the width of .outer until the boxes are side by side

For example: 

.outer
{
    position: relative;
    width: 620px;
    height: 480px;
    border: solid 1px #cccccc;
}

Or

2) increase the width of .parent until the boxes are side by side

For example:

.parent
{
    position: absolute;
    top: 100px;
    left: 150px;
    height: 20px;
    overflow: visible;
    width: 620px;
}

Upvotes: 1

Sachin Thapa
Sachin Thapa

Reputation: 3709

Your outer div is too small to accomodate text without wrapping.

Try this, increase width, tested on jsfiddle you posted:

.outer
{
    position: relative;
    width: 620px;
    height: 480px;
    border: solid 1px #cccccc;
}

Cheers !!

Upvotes: 0

Related Questions