CODEWITHSUNDEEP
htmlcss
LCJ
LCJ

Reputation: 22661

Equalize the height of left and right div, prevent right div from going below left div

I have a HTML page with content divided into left and right part using CSS. The height of left content in smaller than the right content. Hence the right content div goes below to the left content div also. Eventually the border of right content is not a straight line.

  1. How can we avoid the creeping of the right content towards the left?
  2. How can we make the height of left content increased till the height of right content (with javascript)?

enter image description here

<html>

<head>
    <title>My Page</title>
    <style type="text/css">
        .myContent {
            width: 100%;
        }

        .myHeader {
        }

        .leftPart {
            border: 1px solid blue;
            width: 200px;
            clear: left;
            float: left;
            background-color: red;
        }

        .rightPart {
            border: 1px solid orange;
            width: 100%;
            background-color: beige;
        }
    </style>
</head>

<body>

    <header>
        <div class="myHeader">
            H
        </div>
    </header>

    <div id="body">
        <div class="myContent">

            <div class="leftPart">
                A
            </div>
            <div class="rightPart">
                <div >
                    <label for="Sales_and_Marketing">Sales and Marketing</label>
                    <input id="SalesAndMarketing" name="SalesAndMarketing" type="text" value="" />
                </div>
                 <div >
                    <label for="Sales_and_Marketing">Sales and Marketing</label>
                    <input id="Text1" name="SalesAndMarketing" type="text" value="" />
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Upvotes: 0

Views: 985

Answers (2)

Hashem Qolami
Hashem Qolami

Reputation: 99544

fLoat one element, set margin to the other one.

.leftPart {
    border: 1px solid blue;
    width: 200px;
    float: left;
    background-color: red;
}

.rightPart {
    margin-left: 200px;
    border: 1px solid orange;
    background-color: beige;
}

JSBin Demo

Update #1

If you consider using JavaScript, you might want to take a look at equalize.js.

equalize.js is a jQuery plugin for equalizing the height or width of HTML elements.

Here is an example:

// Equalize the height of div element children
$('.myContent').equalize({children: '> div'});

Here is the JSBin Demo.

Update #2

If you're looking for a pure CSS solution, you can use display: table-cell; CSS declaration.

But, honestly, I'd prefer using JavaScript rather than this, because using table display types, may change behavior of web browser while rendering the page (browsers may consider the entire page as a table):

#body { display: table; width: 100%; }

.myContent { display: table-row; }

.leftPart {
  width: 200px;
  display: table-cell;
}

.rightPart {
  display: table-cell;
}

Here is the JSBin Demo

Upvotes: 3

mynetx
mynetx

Reputation: 898

Add this style:

.rightPart {
    margin-left: 200px;
}

Upvotes: 0

Related Questions