Forum Moderators: not2easy
I have one problem with floating my AdSense banner code over on the right-hand side in the header.
The only other element in the header DIV is a logo jpeg image on the far left hand side. That works fine.
Code looks like this:-
<body>
<div id="wrapper">
<div id="header"><div class="logo">
<IMG height=90 alt="Widgets Logo" src="../widgets/logo.jpg" width=272 align=top border=0>
</div>
</div>
When I put in the AdSense banner:-
<div id="wrapper">
<div id="header"><div class="logo">
<IMG height=90 alt="Widgets Logo" src="../widgets/logo.jpg" width=272 align=top border=0>
</div>
<div Class="banner">
<--My Adsense Code -->
</div>
</div>
..... the AdSense banner appears underneath the logo to the far left, rather than on the same line and to the right.
The "logo" style just contains "margin: 0" (it's just a placeholder but styled for any future revisions.
The "banner" style is this:-
.banner
{
float: right;
margin: 5px 5px 5px 5px;
}I think maybe I'm getting mixed up with my ID, Class and Span etc tagging (which I haven't quite got my head around yet).
I'd appreciate it if one of our resident CSS pro's could point me in the right direction!
Thanks,
TJ
appears underneath the logo to the far left, rather than on the same line and to the right
Since the banner div doesn't have an explicit width, it may be appearing to the left because it is taking 100% width as it's "auto" value (although I would expect a content-defined width (aka, "shrink wrapping") instead...what browser are you observing this in, and does the page have a doctype?) The solution may be to determine the needed width for the Adsense block, set the banner div to that explicit width, then make sure the header is wide enough to fit it all.
cEM
OK, widths (pixels):-
Logo : 272 x 90
Banner : 468 x 60
Plenty of width in the header to fit both in with lots of space in between.
I set the DIV's width and height as suggested, it's still appearing on a new line.
Problem occurs in both IE6 and FireFox 1.04
Doctype specified is HTML 4.01 Transitional.
The header DIV does not have a width (or minimum width specified). Could that be the issue? Rest of the CSS code follows at end.
Thanks,
TJ
* {margin: 0; padding: 0; border: 0;}body {
text-align: center;
background: #ffff;
color: #ffff;
min-width: 700px;
}
#wrapper {
text-align: left;
width: 100%;
margin: 0 auto;
background: #ffff 10px 0;
}
#header, #subnav, #footer {
background: #ffff;
color: #ffff;
clear: both;
width: 100%;
}
#header {background: #ffff; color: #fff; height: 90px;}
#subnav, #footer {background: #DCE1F3; padding: 1px 15px;}
#contentfloatholder {/* right faux column tab */
float: left;
width: 100%;
}
#contentfloatholder:after {
/* this is for NN6 to clear floats */
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
/* for 3 col */
#center3
{
margin: 0 175px 0 175px;
}
/* for 2 col */
#center2
{
margin: 0 15px 0 175px;
}
#centerwrap {
float:left;
width: 100%;
margin: 0 -95% 0 0;
}
#left {
float:left;
width: 170px;
margin: 15px 0 0 -5%;
padding-left : 10px;
padding-top : 20px;
}
#right {
float:right;
width: 150px;
margin: 15px 0 0 0;
padding-right : 10px;
padding-bottom: 10px;
}
.banner
{
float: right;
margin: 5px 5px 5px 5px;
width: 468;
height: 60;
}
/* LOGO */
.logo
{
margin: 0;
width: 272;
height: 90;
}
Try moving .banner to before .logo in the source...
<div id="header">
<div id="banner"></div>
<div id="logo"></div>
</div>
Also note that you'll need to add unit values to the widths and heights of logo and banner or FF will ignore them.
cEM
TJ, I can't believe I didn't spot this earlier.
Hehe - true genius takes time ;-)
Thank you very much - you aced it. All now working. Fantastic.
I've put in the "px" references in the stylesheet now also for the logo and banner DIV's - thanks for the tip.
TJ
Loading speed is faster, and the ability to style it is of course now infinitely better.
Most importantly, all the content is now right up at the top of the page.
Gotta love CSS. I had almost written off PostNuke as being too impractical, but this actually was a fairly easy exercise.
TJ
