...

View Full Version : CSS not allowing div to expand?



EricaL
04-02-2009, 02:17 AM
Hey,
I've been working on my site and for some reason I can't get my content image to expand with the content.

To view the site, click here (http://ericaftw.com/cute).

Here's my stylesheet:


body {
background-image: url('images/background.jpg');
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 7.5pt;
}

#container {
margin-left: auto;
margin-right: auto;
height: 100%;
}

#header {
height: 106px;
background-color: #ABE7EE;
border-bottom: solid #C2C2C2 10px;
}

#navUp {
height: 106px;
}

#navOver {
height: 106px;
visibility: hidden;
}

#content {
width:1024px;
background-image: url('images/content.gif');
height: 100%;
min-height: 655px;
}

#wrap {
background: transparent;
width: 812px;
height: 100%;
padding-top: 10px;
}

#main {
float: left;
width: 555px;
height: 100%;
text-align: center;
padding-left: 5px;
padding-right: 8px;
}

#right {
position: relative;
margin-left: 580px;
width: 240px;
height: 100%;
text-align: center;
}

#welcome {
width: 400px;
border-top: 5px solid #696060;
background-color: #A49A9A;
margin-left: auto;
margin-right: auto;
padding-left: 10px;
padding-right: 10px;
padding-top: 3px;
padding-bottom: 5px;
}

Thanks!

PitbullMean
04-02-2009, 02:30 AM
try changing your content attributes to the following



#content {
width:1024px;
background-image: url('images/content.gif') repeat-y;
min-height: 655px;
}


Cause it looks good in Google Chrome and IE7 but in FF it looks messed up so hopefully this will fix it.

Excavator
04-02-2009, 02:32 AM
Hello EricaL,
Try this bit in red -
#content {
width:1024px;
background-image: url('images/content.gif');
height: 100%;
min-height: 655px;
overflow: auto;
}

Read about using overflow:auto; to clear floats here - http://www.quirksmode.org/css/clearing.html


...

EricaL
04-02-2009, 02:35 AM
I tried what you suggested and in Firefox, the image doesn't show up at all for some reason.

I also tried setting:
background-repeat: repeat-y;
but that didn't work either.

EDIT: Thanks Excavator! It worked perfectly. :)

Excavator
04-02-2009, 02:38 AM
I just noticed what size your background image is. Pitbull is partially right. It will need repeated on the y axis but his method may not work in most browsers.
Make your CSS for #content look like this instead -

#content {
width:1024px;
background: url('images/content.gif') repeat-y;
height: 100%;
min-height: 655px;
overflow: auto;
}

drhowarddrfine
04-02-2009, 04:18 AM
Excavator's solution is the correct one because elements are never to expand to contain floated elements. This is an IE bug. His solution makes more modern browsers imitate IEs bug.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum