Help using float property

Rub3X Well-Known Member

Messages:: 1,902

Likes Received:: 75

Best Answers:: 0

Trophy Points:: 135

#1

I'm trying to insert this Adsense ad directly to the right of a list. Check out what I mean at this site. For some reason it goes next to it but the ad is one line below where the start of the list is. The top of the ad doesn't start until list item #2. Can someone help me move the adsense ad one line up? I tried padding-top but that didn't help..

Solved! View solution.

Rub3X, Apr 24, 2013 IP

smellocity Active Member

Messages:: 155

Likes Received:: 4

Best Answers:: 0

Trophy Points:: 88

#2

put the ad inside a <div style="float:right"> and everything should wrap around it.

smellocity, Apr 24, 2013 IP

Rub3X Well-Known Member

Messages:: 1,902

Likes Received:: 75

Best Answers:: 0

Trophy Points:: 135

#3

That's how I have it right now:

<div style="float: right; padding-right: 5px; padding-left: 5px;"><script type="text/javascript">// <![CDATA[
google_ad_client = "ca-pub-6870815979062846";
/* harrypotter336 */
google_ad_slot = "8430761905";
google_ad_width = 336;
google_ad_height = 280;
// ]]></script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">// <![CDATA[
 
// ]]></script></div>

HTML:

Rub3X, Apr 24, 2013 IP

avantemedia Active Member

Messages:: 285

Likes Received:: 52

Best Answers:: 0

Trophy Points:: 90

#4

are you trying to put it next to the list? Where i see the adsense ad right now is above the list

avantemedia, Apr 28, 2013 IP

Nosliw Well-Known Member Best Answer

Messages:: 77

Likes Received:: 2

Best Answers:: 1

Trophy Points:: 123

#5

Haven't checked the site, but it sounds like you're using padding wrong.
Padding is only used if you want content inside a box move away from the edges of the box. If you want the box itself to move away from other elements outside it you use "margin". To move a box closer to the top of the site/page: Negative margin i.e. margin-top: -10px; and to move it down: margin-top: 10px;

Hope it helps. Otherwise as someone said above, wrap your ad in a div and float the div

EDIT: Noticed the pictures you have in the header are wider than they look, so even if you move the adsense box the images push the content to the right.
I solved it by placing them to the left of the content like so: http://webblosningen.se/hpo/

You can just copy the source code if you want to use it, it's all in one html file.

Last edited: Apr 28, 2013

Nosliw, Apr 28, 2013 IP

Rub3X likes this.

deathshadow Acclaimed Member

Messages:: 9,732

Likes Received:: 1,998

Best Answers:: 253

Trophy Points:: 515

#6

Your code is just broken methodology, it's hardly surprising you're having problems.

You've got no doctype so you're in quirks mode for IE, your keywords meta is pointless gibberish (it's keyWORDS, not keyphrases, not keysentences, keyWORDS), you're using tags like CENTER that have no business in any HTML written after 1997, you've got a table for christmas only knows what (since there's no tabular data present), you're not adding emphasis to the site name so it shouldn't be STRONG, it is very unlikely that "how many are there" is a subsection of "do I have to watch in order" and as such has no business as a H3 (since that's what a H3 means, a start of a subsection of the h2 before it), might be nice if your paragraphs were in paragraph tags, and you're nesting floats instead of making them siblings.

The last of those is most likely your 'real' problem.

Oh, and using the TAB key wouldn't hurt either. 99% of the style you are trying to apply in the markup has ZERO business being there. HTML is for saying what things ARE, NOT WHAT THEY LOOK LIKE! -- if where you're learning from hasn't drilled that home, you're learing from the wrong sources. (though that's evident from the mere presence of CENTER)

If I was writing that same page, the markup would likely go something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="viewport"
	content="width=device-width; initial-scale=1.0"
/>

<meta
	name="description"
	content="A complete list of the Harry Potter movie series in order."
/>

<meta
	name="keywords"
	content="harry potter, movie, series, order, books"
/>

<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Harry Potter Order
</title>

</head><body>

<div id="pageWrapper">
	<h1>Harry potter movie series in order</h1>
	
	<div class="leadingPlate">
		<img src="cover1.jpg">
		<img src="cover3.jpg">
		<img src="cover2.jpg">
	<!-- .leadingPlate --></div>
	
	<div class="leadingPlate">
		<script type="text/javascript"><!--
		google_ad_client = "ca-pub-6870815979062846";
		/* harry250 */
		google_ad_slot = "5726680704";
		google_ad_width = 250;
		google_ad_height = 250;
		//-->
		</script>
		<script type="text/javascript"
		src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
		</script>
	<!-- .leadingPlate --></div>
	
	<p>
		The <b>Harry Potter order</b> starts in 1997 with the release Philosopher's Stone.  Since then it's become one of the world's most popular movie series.  Inspired originally by the book series, the Harry Potter movie series has captivated audiences of all ages.  To understand the story in full, it's important to watch or read Harry Potter in the correct order.
	</p>
	
	<ol>
		<li>Philosopher's Stone (2001)</li>
		<li>Chamber of Secrets (2002)</li>
		<li>Prisoner of Azkaban (2004)</li>
		<li>Goblet of Fire (2005)</li>
		<li>Order of the Phoenix (2007)</li>
		<li>Half-Blood Prince (2009)</li>
		<li>Deathly Hallows - Part 1 (2010)</li>
		<li>Deathly Hallows - Part 2 (2011)</li>
	</ol>
	
	<p>
		This epic series concluded a decade long story which ended in 2011 with the two part movie Deathly Hallows.  The only way to enjoy this massively popular journey is to start at the beginning.   Watching in the proper order allows for a more complete experience rather than picking and choosing which ones to watch.
	</p>
	
	<img
		class="plate"
		alt="Harry Potter Order"
		src="http://harrypotterorder.com/wp-content/uploads/2012/04/harry-potter-order.jpg"
	/>
		
	<h2>Do I have to watch the harry potter movies in order?</h2>
	<p>
		You should definitely watch the Harry Potter movies in order.  In order to fully understand what's going on in the story line, watching every one of the movies is necessary.  Typically you can pick and choose which movie in trilogy you watch and still have a positive experience.  With Harry Potter, each story builds on top of the other to form a bigger picture.  While it may be possible to skip a couple and still understand what's going on, watching them all is definitely preferred.
	</p><p>
		Another reason to watch them in the proper order is to watch how the characters grow and evolve.  Each movie you learn something new about a character and apply it how you wish.  For every Harry Potter story released, the characters grow up another year.  Each release is a new school year at Hogwarts School of Magic.  Sometimes a character goes from good to evil in a single movie, so it's extremely important to not miss one.
	</p><p>
		However, it is still possible to watch the movies out of order.  If you have a general idea of what Harry Potter is like, you can somewhat understand what's going on without watching all of them.  Each movie has its own story and plot line.  While they do build on each other, they do not continue in a part one, part two fashion.  Each story and journey is unique to that particular movie.
	</p>
	
	<h2>How many movies or books are there?</h2>
	<p>
		Harry Potter the movie has eight different releases and the book series has seven.  The movie decided to take a different route and make the final tale, Deathly Hallows, a two part series.  Like the movie, each release of a new book tells the tale of one year at Hogwarts.  This allows you to see the characters mature from children over a decade.
	</p>
	<a href="http://www.nationaltreasure3-trailer.com/">National treasure 3 trailer</a>

<!-- #pageWrapper --></div>

</body></html>

Code (markup):

EVERYTHING ELSE belongs in an external stylesheet behind that media type -- since it makes no sense to send screen layout to print or handheld. (something the folks who say it's fine to use the style attribute or tag fail to grasp!)

Said stylesheet going something like this:

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

hr {
	display:none;
	/*
		HR in my code are for semantic breaks in topic/section, NOT
		style/presenation, so hide them from screen.css users
	*/
}

@media (max-width:480px) {
	* {
		-webkit-text-size-adjust:none;
		-ms-text-size-adjust:none;
	}
}

body {
	font:normal 85%/150% arial,helvetica,sans-serif;
}

#pageWrapper {
	width:40em;
	margin:0 auto;
}

h1 {
	padding:1em;
	text-align:center;
}

h2 {
	padding-bottom:0.8em;
}

p {
	padding-bottom:1em;
}

ul,
ol {
	clear:both; /* get it clear of any floats */
	padding:0 0 1em 2em;
}

.leadingPlate {
	float:left;
	padding:0 0.5em 1em 0;
}

.leadingPlate img {
	display:block;
}

.plate {
	display:block;
	margin:0 auto 1em;
}

Code (markup):

The 'reset' at the top deals with browsers having different margins/padding, #pageWrapper is used to set the width and center the page, I then set up some proper behaviors, a clear on the OL so it doesn't interact funky with the floats, and then the various plates... since that's what you have, plate image behaviors. Setting the images inside the plates to display:block forces them to be on their own lines, so you don't have to use BR in the markup and worry about how "inline" elements can have all sorts of funky alignment issues.

deathshadow, Apr 28, 2013 IP

Rub3X likes this.

Rub3X Well-Known Member

Messages:: 1,902

Likes Received:: 75

Best Answers:: 0

Trophy Points:: 135

#7

Deathshaddow, that's for taking the time to explain that for me. I really put that page up with no understanding of html and especially css. When I posted the question I had it setup as a Wordpress blog, and breifly switched it to a static HTML page to see if I could get the CTR higher. I just switched it back because it didn't help at all..Anyways take a look at the Wordpress version, my goal is to get the 336 ad next to the list. For some reason the float I'm using starts the top of the ad one line below the list and it looks awkward. Any idea how to fix this?

Edit: read Nosliw's post, and that's actually exactly what I needed. Problem solved!

Rub3X, Apr 28, 2013 IP

Log in or Sign up

Advertising (learn more)

Help using float property

Rub3X Well-Known Member

smellocity Active Member

Rub3X Well-Known Member

avantemedia Active Member

Nosliw Well-Known Member Best Answer

deathshadow Acclaimed Member

Rub3X Well-Known Member

Log in or Sign up

Advertising (learn more)

Help using float property

Rub3X Well-Known Member

smellocity Active Member

Rub3X Well-Known Member

avantemedia Active Member

Nosliw Well-Known Member Best Answer

deathshadow Acclaimed Member

Rub3X Well-Known Member

Useful Searches