CODEWITHSUNDEEP
htmlcss
starbucks
starbucks

Reputation: 3016

How do I add a div under a right floated div?

HTML

<div class="container">
    <div class="left">
        <div class="panel">My Panel</div>
    </div>
    <div class="right"></div>
</div>

CSS

.container {
    background-color: #000;
    margin: 130px auto;
    min-height: 320px;
    width: 940px;
    overflow: auto;
    padding: 0px 10px;
 }

.left {
    width: 600px;
    margin-right: 20px;
    float: left;
 }

.right {
    width: 320px;
    height: 100% auto; 
    overflow: auto;
    background-color: blue;
    float: right;
}

.panel {
    background-color: red;
}

Question:

How can I add another div that I can place under div.right? The div that I want to place under .right will be .under_right and the CSS is: 

.under_right {
    width: 320px;
    height: 100% auto; 
    overflow: auto;
    background-color: gold;
}

Upvotes: 0

Views: 110

Answers (4)

gersande
gersande

Reputation: 463

<div class="container">
    <div class="left">
        <div class="panel">My Panel</div>
    </div>
    <div class="right"></div>
    <div class="underright"></div>
</div>



.under_right {
    width: 320px;
    height: 100% auto; 
    overflow: auto;
    background-color: gold;
    float: right;
}

As long as the div .underright is underneath div .right, the float will obey that structure.

Edit Just a quick note, perhaps adding display: block; to the css will help, especially if you change the size of the outer container.

Upvotes: 2

Vishal Gupta
Vishal Gupta

Reputation: 94

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<meta name="" content="">
<style type="text/css">
.container {
    background-color: #000;
    margin: 130px auto;
    min-height: 320px;
    width: 940px;
    overflow: auto;
    padding: 0px 10px;
 }

.left {
    width: 600px;
    margin-right: 20px;
    float: left;
 }

.right {
    width: 320px;
    height: 100% auto; 
    overflow: auto;
    background-color: blue;
    float: right;
}
.under_right {
    width: 320px;
    height: 100% auto; 
    overflow: auto;
    margin-top:30px;
    background-color: gold;
}

.panel {
    background-color: red;
}
</style>
</head>
<body>
<div class="container">
    <div class="left">
        <div class="panel">My Panel</div>
    </div>
    <div class="right">
        <div class="under_right">It is under right.</div>
    </div>
</div>
</body>
</html>

Upvotes: 1

Andrew Clody
Andrew Clody

Reputation: 1181

http://jsfiddle.net/daQ22/2/

Add:

clear:both;
float:right;

to under_right

Upvotes: 2

Gurpreet Singh
Gurpreet Singh

Reputation: 21233

Working DEMO

Add a div in html like this:

<div class="container">
        <div class="left">
            <div class="panel">My Panel</div>
        </div>
       <div class="right">Blue</div>
       <div class="new_div">New</div>      <-- Added this new div here 
</div>

and use this CSS:

.new_div { background-color: white; width:320px; float: right;  }

Upvotes: 2

Related Questions