PDA

View Full Version : CSS Help


m1a2x3x7
05-21-2008, 09:01 PM
Hey guys,

I'm working on a website and when you shrink the page width smaller then 1024 the ad drops below the logo. I don't want it to drop I would like it to just start disappearing.

Here is a link to see it: http://www.ibj.com/webdev/IBJ/zTutorials/IBJcom/look.html

Here is my code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>IBJ.com Mock</title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="banner"><div id="bannerItems">
<div id="logoHolder"><img src="images/ibjLogo.jpg" alt="IBJ.com" width="467" height="72" /></div>
<div id="adHolder"><div id="fullBannerAd"><img src="images/fullBannerAd.jpg" alt=" " width="468" height="60" /></div>
</div>
</div>
</div>
<div id="navBar">

</div>
<div id="wrapper"></div>
</body>
</html>
Here is my CSS:

body {
background:#3e619b;
margin: 0px;
}

#wrapper {
margin: auto;
height: 500px;
width: 1000px;
background-image: url(../images/wrapperBG.gif);
background-repeat: repeat-y;

}
#banner {
background-image: url(../images/bannerBG.gif);
background-repeat: repeat-x;
height: 106px;
width: 100%;
background-color: #FFFFFF;
padding-top: 10px;
overflow: hidden;
}
#bannerItems {
height: 72px;
width: 100%;
}
#logoHolder {
height: 72px;
width: 467px;
float: left;
margin-left: 10px;
}
#adHolder {
height: 72px;
width: 468px;
background-repeat: no-repeat;
float: right;
overflow: hidden;
margin-right: 10px;
}
#fullBannerAd {
height: 60px;
width: 468px;
float: right;
}

What needs to be done? Thanks for the help.

-M

domedia
05-21-2008, 09:18 PM
You have to tell the containing box what to do when the content goes beyond the limits of the box. Adding this line to the containing element should work:
overflow: hidden;

So in layout.css (line 23)
#bannerItems {
height:72px;
overflow:hidden;
width:100%;
}

m1a2x3x7
05-21-2008, 09:20 PM
lol I had overflow in the wrong div.

Thanks Dom.

domedia
05-21-2008, 09:23 PM
Anytime :) let us know of your progress with the rest!