Hi, I am working on weblayout based on DIVs. The structure is as follows:

<div id="website-wrapper>
       <div="header">
       </div>

       <div="content">
       </div>

       <div="footer">
       </div>
</div>

problem is that the position of all content is "absolute". As on every page the content is more or less. The probelm i am facing that how we make website-wrapper main div height variant with the content-div-height

Hey,

I usually use the float attribute. E.g.

<div id="wrapper">
[INDENT]<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>[/INDENT]
</div>

The CSS for this would then be something like:

body {
text-align: center;
}

#wrapper {
width: 970px;
margin: 0 auto;
text-align: left;
}

#header {
float: left;
height: 50px; width: 970px;
}

#content {
float: left;
width: 970px;
}

#footer {
float: left;
height: 50px; width: 970px;
}

By not specifying a height for the content div, it will expand in height to accommodate your content.

Does this solve your problem?

R.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.