How adjust a container in CSS to automatically resize height according to content.

shashikant2011 · 03-15-2013, 01:54 PM

Hi,

I am developing a website in HTML, all I want to make the content of website to adjust throughout the page by resizing page height or container height automatically.
I tried setting the height to auto but it did not worked see the code.

I have used a container named site_content

Code:

<div id="site_content">

In CSS

Code:

#site_content
{ width: 1100px;
  height: 600px;
  overflow: hidden;
  position:absolute;
    margin-top:-15px;
  background: #040000;
  border: 0px solid #bbb;
        background:url(../images/grade.png);
        background-size:1100px 600px;
        z-index:5000;
        }

There are two other child id's

Code:

#content
{ width: 680px;
  margin: 0 0 20px 20px;
  float: left;}

.content_item
{ width: 680px;
  margin-top: 20px;
  margin-bottom: 20px;}

Regards,

Shashikant

Excavator · 03-15-2013, 04:00 PM

Hello shashikant2011,
A divs natural behavior is to expand to enclose it's content. Add these bit's highlighted in red to see how your #site_content might work -

Code:

#site_content
{ width: 1100px;
  /*height: 600px;
  overflow: hidden;
  position:absolute;
        z-index:5000;
  border: 0px solid #bbb;
    margin-top:-15px;*/
  background: #040000;
        background:url(../images/grade.png);
        background-size:1100px 600px;
overflow: auto;
        }

See here to decide if absolute positioning is really needed.
See here to learn how overflow: auto; clears your floats.

Frankie · 03-15-2013, 10:24 PM

Quote:

See here to learn how overflow: auto; clears your floats.

I disagree with that advice. And I'm not the only one. Apart from the tricky behavior Peter-Paul Koch describes, there is more, described by Eric Meyer.

My advice to prevent/solve float problems:

Code:

<!DOCTYPE HTML>
<html>
<head>
    <title>Demo</title>
    <meta charset="utf-8" />
<style type="text/css">
div#container {
	border: 1px solid #000000;
	width: 100%;
}
div#left {
	width: 45%;
	float: left;
}
div#right {
	width: 45%;
	float: right;
}
div#support-element {
        width: 0;
        height: 0;
        clear: both;
}
p {
        margin-bottom: 0;
}
</style>
</head>
<body>
    <div id="container">
        <div id="left">
            <p>The left column</p>
            <p>The left column</p>
            <p>The left column</p>
            <p>The left column</p>
        </div>
        <div id="right">
            <p>The right column</p>
            <p>The right column</p>
            <p>The right column</p>
        </div>
        <div id="support-element"></div>
    </div>
</body>
</html>

Cross-browser, no side-effects and intuitive. What more do you want?

Excavator · 03-15-2013, 11:23 PM

Quote:

Originally Posted by Frankie

I disagree with that advice. And I'm not the only one. Apart from the tricky behavior Peter-Paul Koch describes, there is more, described by Eric Meyer.

My advice to prevent/solve float problems:

...snip/

Cross-browser, no side-effects and intuitive. What more do you want?

Hmm, added markup that presents no content, based on advice from a page written in 2003? Even Eric Meyer describes them as "structural hacks." Not for me I think.

Granted there are a few places overflow: auto; may not work(very few) and, when it doesn't, there are other clearing methods including your suggestion.

I especially like the added bonus using overflow has of showing a scrollbar when you don't follow the box model rule.

Frankie · 03-16-2013, 01:22 AM

Quote:

Originally Posted by Excavator

Hmm, added markup that presents no content, based on advice from a page written in 2003? Even Eric Meyer describes them as "structural hacks." Not for me I think.

Giving something a name is easy. I could call using overflow to combat a float problem "abuse".

Quote:

Originally Posted by Excavator

Granted there are a few places overflow: auto; may not work(very few) and, when it doesn't, there are other clearing methods including your suggestion.

I think you are downplaying it. There are places were it doesn't work, it has side-effects and it is non-intuitive, most certainly for beginners such as the OP.

Quote:

Originally Posted by Excavator

I especially like the added bonus using overflow has of showing a scrollbar when you don't follow the box model rule.

That is what overflow should be used for, but as Koch's article says, three out of four values solve the float problem. Not just "auto". The others may give problems.

chakanevil · 03-16-2013, 10:01 AM

I kinda have the same problem i think