CODEWITHSUNDEEP
htmlcss
عثمان غني
عثمان غني

Reputation: 2708

Difference in height of DIVs

I have a main division in which two divisions are present

One is left DIV and another is right DIV

Fiddle Here

HTML is

<div class="main">

    <div class="left">
        Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. Lorem Ipsum is a dummy text. 
    </div>
    <div class="right">
        some text heresome text heresome text heresome text heresome text heresome text heresome text heresome text heresome text here
    </div
    </div>

And CSS is

body
{
 background-color:black;   
}
.main
{
    width:80%;
    background-color:White;
    opacity:0.9;
    margin-left:auto;
    margin-right:auto;
    margin-top:25px;
}
.left
{
    width:68%;
    float:left;
    background-color:White;
    padding:2%;
    font-family:Calibri;
}

.right
{
    background-color:White;
    width:26%;
    padding:1%;
    float:right;
}

I want both the DIVs must be of equal height always.No matter how much text is present in it.

Now Height of my right DIV is less than left DIV as in fiddle.

Help Me. Thanks in Advance

Upvotes: 0

Views: 66

Answers (1)

broadband
broadband

Reputation: 3498

Add this to .main

height: 30%;
overflow: auto;

Link: Fiddle Example

Upvotes: 2

Related Questions