CODEWITHSUNDEEP
csshtmlresize
user1130772
user1130772

Reputation: 437

Div resizing not working correctly

I am writing some css code for a school website that looks like this

body{
background:#000099 url('repeat.png') repeat-x;
margin-bottom:50px;
}



div.wsite-theme{
background-color:#FFFFFF;
border-top:5px solid #AAAAAA;
}

div.wsite-header{
background:#DDDDDD;
border-radius:5px;
}

#wrapper {
width:960px;
margin:0pt auto;
}

#content{
width:850px;
min-height:694px;
position:absolute;
left:98px;
top:150px;
}

#content-main{
width:100%;
min-height:594px;
position:absolute;
top:0px;
}

#navigation{
min-height:1px;
position:absolute;
left:98px;
top:90px;
line-height:2px;
padding:10px 10px;
width:850px;
}

#header{
width:850px;
height:150px;
position:absolute;
top:5px;
left:98px;
}

#footer{
width:100%;
height:100px;
background:#DDDDDD;
position:absolute;
bottom:0px;
border-top:5px solid #AAAAAA;
}

with html that looks like this:

<html>
<head>
<title>{title}</title>
<link rel="stylesheet" type="text/css" href="main-style.css" />
</head>
<body>
<div id="wrapper">
<div id="header" class="wsite-header">
<h1 class="title1">{title}</h1>
</div>
<div id="navigation">
{menu}
</div>
<div id="content">
<div id="content-main" class="wsite-theme">
{content}
</div>
<div id="footer">
{footer}
</div>
</div>
</div>
</body>
</html>

(ignore content in curly bracers. it for the website editor our school makes us use) So when i go on my page and type in the content it re-sizes and goes behind the footer . However what i intend for it to do is push the footer down as it re-sizes to fit the content. Earlier it was behaving this way, so what am i doing wrong?

EDIT: i guess i wasn't clear enough at first,i want the parent #content div to resize with the content main div so the footer is pushed down

Upvotes: 0

Views: 10254

Answers (3)

Dips
Dips

Reputation: 3290

Add position relative to the wrapper. Replace position absolute to relative for content and footer.

#wrapper {
    width: 960px;
    margin: 0pt auto;
    position: relative;
}    
#content {
    width: 850px;
    min-height: 694px;
    left: 98px;
    top: 150px;
    position: relative;
}
#content-main {
    width: 100%;
    min-height: 594px;
    position: relative;
    top: 0px;
}
#footer {
    width: 100%;
    height: 100px;
    background: #DDDDDD;
    bottom: 0px;
    border-top: 5px solid #AAAAAA;
    position: relative;
}

Upvotes: 0

Brent Friar
Brent Friar

Reputation: 10609

Why are you using absolute position at all? Remove all of the position: absolute from all of your DIVs they are not necessary. Position them using margins instead and you will not have a problem with the DIVs changing size.

As Mathew mentioned, when you use the position: absolute property, it takes that element out of the flow of the document so it will not affect the elements around it. All of your DIVs are in the order you want them displayed, there is no need for absolute positioning on any of them.

Just took out the positioning and messed with the padding of the wrapper to get the same thing you are trying - http://jsfiddle.net/n3Xqx/

Upvotes: 2

Matthew
Matthew

Reputation: 25793

Don't use position: absolute;, it takes things out of the regular document flow.

EDIT: If you need to give more vertical spacing between the header/footer/content areas, then use margin

Upvotes: 1

Related Questions