CODEWITHSUNDEEP
htmlcss
Ali Khan
Ali Khan

Reputation: 37

Place div beneath other div while float right

EDITED: I have a div that takes up the left half of the window. Inside that div are two other divs. How do I stack the inner divs on top of one another, while floating both divs to the right. If you look at the JSFiddle, the two divs are side-by-side

http://jsfiddle.net/eka1ccsu/1/

What's the CSS property to place one div beneath another while the two divs are float: right?

Code: 

@charset "UTF-8";
/* CSS Document */


#bdy{
font-family: Verdana, Geneva, sans-serif;
position: relative; 

}



#left{
    height: 100%;
    width: 50%;
    position: relative;
    display: inline-block;
    float: left;
    bottom: 0;
}

#right{
width: 50%;
height: 100%;
display: inline-block;
float: right;
bottom: 0;
}

#nentry {

position:relative;
float: right;   
margin-top: 100px;

}

#nuser {
position:relative;
float: right;   
margin-top: 100px;
}

Upvotes: 0

Views: 1078

Answers (2)

aahhaa
aahhaa

Reputation: 2275

http://jsfiddle.net/eka1ccsu/2/

I just took a literal take on your question, i float the parent of two div, so the child behave as block element. 

<div style="float:right;">
        <div id="nuser">
            <a href="add.php">Add New User</a>
        </div>
        <div id="nentry">
            <a href="addc.php">Add Entry</a>
        </div>
</div>

Upvotes: 0

Dave Rottino
Dave Rottino

Reputation: 1047

You can use clear: both; to set a floated element on a new line. Also, setting #right and #left to inline-block does nothing for your purposes. Setting the width and then setting the float property with put both elements side by side splitting the page in half.

Inline-block TYPICALLY is used for nav elements. Or for vertically centering objects in special cases.

Upvotes: 2

Related Questions