CODEWITHSUNDEEP
htmlcss
Michael
Michael

Reputation: 9

CSS - How do I float one element to the right inside the other div?

I have a div, inside that div I have two smaller ones, one of them is to the left, and the other one is to the right, but the width of the parent div does not increase, how can I make it so it does?

I want the red div to get an increased height when the div's inside get bigger.

<div class="wrap">
    <div class="left"></div>
    <div class="right"></div>
    <div class="footer">
    </div>
</div>

.wrap{
    margin:auto;
    width:960px;
    min-height:50px;
    background:red;
}

.left{
    width:450px;
    height:100px;
    background:blue;
    float:left;
}

.right{
    width:450px;
    height:100px;
    background:green;
    float:right;
}

.footer{
width:100%;
height:100px;
background:#000;
}

Fiddle.

Upvotes: 0

Views: 2374

Answers (7)

sneha
sneha

Reputation: 15

Now when u increase the height of the left or right div, the main div height will also increase.

.wrap {
margin: auto;
width: 960px;
min-height: 50px;
background: red;
overflow: hidden;
height: 100%;
}

Upvotes: 0

Swarnamayee Mallia
Swarnamayee Mallia

Reputation: 2008

Here is the updated fiddle link with updated css. You just need to add overflow:hidden, and height:100%; in .wrap class.

.wrap {
    margin:auto;
    width:960px;
    min-height:50px;
    background:red;
    overflow: hidden;
    height: 100%;
}

Upvotes: 1

samrap
samrap

Reputation: 5673

Set the height of the parent div to inherit. The height of the .wrap div will now expand based on the content inside:

.wrap
{
 margin:auto;
 width:960px;
 height:inherit;
 background-color:red;
}

Upvotes: 0

Andri
Andri

Reputation: 573

I always use the CSS clearfix from this site. It's the most proper way to solve this problem. just set the class attribute of the .wrapper to "wrapper clearfix"

.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}

Upvotes: 0

Tepken Vannkorn
Tepken Vannkorn

Reputation: 9713

.wrap:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

Upvotes: 0

GoldenTabby
GoldenTabby

Reputation: 220

You can add after your second div:

<div style="clear: both;"></div>

or read about clearfix

Upvotes: 2

Danield
Danield

Reputation: 125423

Add the following rule to the .wrap class overflow: auto;

FIDDLE

.wrap{
    margin:auto;
    width:960px;
    min-height:50px;
    background:red;
    overflow: auto; /* <-- here */
}

Upvotes: 3

Related Questions