css - I've got a nested floating div, how do I get it to fill the entire 100%?


Tags: html,css

Problem :

I've got a floating div. That div is nested inside an html element that recieves its height from one of its children. How do I get my div to stick to the bottom?

Here's a sample of my problem. I want to get my "Hello all" to the bottom of the parent.

<div style="overflow:hidden;border:1px solid green;clear:both">

<div style="float:left">
  <p> Hi All </p>      
</div>

<div style="height:150px;width:50px; background-color:red;float:left">
</div>


Solution :

I put this together. Here's the CSS:

#cont {
    margin:5px;
    overflow:hidden;
    border:1px solid green;
    clear:both;
}
#rel {
    height:150px;
    position:relative;
    display:inline-block;
    width:50px;
}
#abs {
    position:absolute;
    bottom:0;
}
#red {
    height:150px;
    width:50px;
    background-color:red;
    display:inline-block;
}

And your HTML:

<div id="cont">
    <div id="rel">
        <div id="abs">
            <p>Hi All</p>      
        </div>
    </div>
    <div id="red">
    </div>
</div>

I'm still using the position:relative/absolute trick, but instead of floating the divs, I'm making them inline-blocks. This way it has the same effect as when you float them.


    CSS Howto..

    How to fix background Opacity css

    How to get the max width of my css element using javascript

    How to create a horizontal scroll bar when shrinking the window

    facebook and css, how to place a like comment dialog on top of a video?

    How to stop CSS selector from selecting all child elements

    how to center a webpage in CSS

    How to use jQuery to read/write the values of an elements externally defined css class?

    How to copy (or reflect instantly) CSS edited on Inspected elements on the browser to the actual css file?

    responsive html shows a tablet css design instead of the mobile when on my iphone 4s?

    How do I place the text on the image in the header?

    HTML/CSS: how to position forms? [closed]

    How to get this code to behave differently based on what exactly is clicked?

    Add CSS Style to textarea that shows XML

    How to Make Image Do All 3: Cover (left-to-right), Resize, and Scroll

    how to position/resize image after rotation using css/js so that the image is not positioned outside the div holding it or cropped out

    How to reference css in actionlink?

    how to change the CSS background-image of a class-pseudoelement by Javascript only?

    How to always show up pure HTML5/CSS modal window without clicking a link which activates it?

    How do I add another css to Bootstrap?

    How to tell google bot to skip part of HTML?

    How can I prevent scroll bars from being hidden for OS X trackpad users in WebKit/Blink?

    How to do animation of using CSS and webkit

    How can I have a blue background on a hover even with css? [closed]

    How to I apply a style to only the first row (matching a class) of a table using pure css?

    How to remove unused CSS but keep comments?

    How to align two anchor tags with text horizontally next to each other?

    How can I center Twitter-Bootstrap 3 navbar buttons?

    How can I make images stack on top of each other as web page scales down?

    How can I make the header's border/other content not overlap the img on the left?

    How to replace non-existing images with a default one in css?