CODEWITHSUNDEEP
htmlcsscss-position
luke
luke

Reputation: 172

Float divs inside of Absolute div with Relative Parent

I couldn't find any duplicates of this, so here goes...

http://jsfiddle.net/bmyLru9w/

<div style="height: 200px; width: 200px; background-color:#ff0000"></div>
<div id="base" style="height: 30px; width: 30px; background-color:#00ff00">
    <div id="popup">
        <div>
        <div class="in-pop"></div>
        <div class="in-pop"></div>
        <div class="in-pop"></div>
            <div class="in-pop"></div></div>
    </div>
</div>

.in-pop{
    background-color:#ffff00;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    float: left;
}

#base{
    position:relative;
}

#popup{
    background-color:#0000ff;
    position:absolute;
    bottom: 30px;
}

I have a div (green) that sits at the bottom of my content. I need a popup (for hover) to be place at the top of that green div. The popup is blue in the fiddle. Then inside of that popup, I have an unknown number of divs that are float:left. My problem is that they stack vertically rather than horizontally and I cannot define a width on the blue div because it changes. It seems to happen because of the "relative" of the green div, but then if I don't use that, I can't position the blue div correctly on top of it.

I could use position: fixed and negative top margin, but negative margins are pretty gross. Maybe that's my only option, though.

Any ideas?

Upvotes: 1

Views: 659

Answers (2)

Pixel Rubble
Pixel Rubble

Reputation: 1101

Your #base has a fixed width of 30px which is forcing anything within it to be at MOST 30px wide.

Edit

I like the Solution the zgood gave by using Flexbox. Here's how to setup flex so that it works in the absolute most browsers:

display : -webkit-box;   /* OLD - iOS 6-, Safari 3.1-6 */
display : -moz-box;      /* OLD - Firefox 19- (doesn't work very well) */
display : -ms-flexbox;   /* TWEENER - IE 10 */
display : -webkit-flex;  /* NEW - Chrome */
display : flex;          /* NEW, Spec - Opera 12.1, Firefox 20+ */

Upvotes: 1

zgood
zgood

Reputation: 12571

You could try adding this:

#popup{
    width: 100vw;
}

This will make the blue div always be the width of the viewport so that your items can float like you expect.

See this fiddle

Another way might be this:

#popup{
    display:flex;
}

See this fiddle

Upvotes: 1

Related Questions