CODEWITHSUNDEEP
htmlcss
Malcolm
Malcolm

Reputation: 12864

HTML - Sizing divs

I have a webpage with the following div's.

<div id="main">
    <div id=left></div>
    <div id=right></div>
</div>

As the body of the page is background color blue and assume div left and div right are white. when the content of say right div reaches the height of div main, div main does not expand so it looks odd.

How do I get div main expand when div right expands past it?

Hope this is not confusing.

Malcolm

Upvotes: 1

Views: 337

Answers (5)

BYK
BYK

Reputation: 1374

You should give overflow: hidden property to #main's CSS. Also you should always quote the attribute values. (You did not when assigning id's to the #left and #right)

Upvotes: 0

Paolo Bergantino
Paolo Bergantino

Reputation: 488374

I am assuming "left" and "right" means you are floating them left and right with your CSS.

If so, you need to clear them. Make your HTML look like this:

<div id="main">
    <div id=left></div>
    <div id=right></div>
    <br style='clear: both;'>
</div>

Upvotes: 4

rsk
rsk

Reputation: 1334

You could try something like this:

<html>
<head>
<style>
#equal      {
        overflow: hidden;
        }

#left, #right{
        padding-bottom: 5000px;
        margin-bottom: -5000px;
        width: 150px;
        }

#left       {
        float: left;
        background-color: red;
        }

#right      {
        float: right;
        background-color: green;
        }
</style>
</head>
<body>
<div id="main">
<div id="equal">
<div id="left">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah </div>
<div id="right">blah blah blah blah blah blah </div>
</div>
</div>
</body>
</html>

Upvotes: 0

Paul Herron
Paul Herron

Reputation:

Are your 'left' and 'right' divs floated? By default, your 'main' div won't expand around floated elements it contains. You can fix this by adding overflow: auto to div#main in your CSS.

Upvotes: 0

Enes
Enes

Reputation: 350

You can (need to) use reset css file to handle these kind of css issues. You can see a detailed information about Yahoo's reset css file from here

Hope This Helps

Upvotes: 0

Related Questions