CODEWITHSUNDEEP
htmlcss
Seb Silver
Seb Silver

Reputation: 101

How can I get a child div to float to the right?

http://jsfiddle.net/zg63R/

I am making a flag or sorts here.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Flag</title>

<style> 
#Flago { 
    width:  auto; 
    height: 100px; 
    border:thick; 
    border-color: black; 
    background-color: yellow; 
    padding: 5px; 
    display: inline-block; 
}

#l1 {
    height:  25px; 
    width: 200px;
    background-color: blue;     
}

#l2 {
    height:  25px; 
    width: 150px;
    background-color: green;    

}

#l3 {
    height:  25px; 
    width: 150px;
    background-color: red;  

}

#l4 {
    height:  50px; 
    width: 50px;
    background-color: orange;   
    float: right; 
}

</style>
</head>

<body>

<div id= "Flago"> 

    <div id="l1"></div>

    <div id="l2"></div>

    <div id="l3"></div>

    <div id="l4"></div>
 </div>

<body>
</body>
</html>

I have tried all sorts of combinations of floats, but nothing seems to work. The orange row down the bottom needs to come up beside the green and red rows. What is the error here?

Upvotes: 0

Views: 85

Answers (3)

Charles
Charles

Reputation: 437

You just need to simply float div thirteen left, that way its width plus that of div fourteen which has already been floated right fit perfectly side by side.

Worked for me on Firefox.

Upvotes: 0

Gimmy
Gimmy

Reputation: 3911

Try adding:

margin-top: -50px;

to #14

Upvotes: 0

Sowmya
Sowmya

Reputation: 26969

Place id="14" div in 2nd order

<div id= "Flago"> 
    <div id="l1"> </div>
     <div id="l4"> </div>
    <div id="l2"> </div>
    <div id="l3"> </div>   
 </div>

DEMO

Upvotes: 2

Related Questions