should I float these somehow?

I think this is a problem solved by float

It is. But first of all, change your ids to classes or use unique ids (an id should never be repeated in a given web page).

<div id="rotating_images">
<div id="rotating_image1" onclick="location.href='https://mickeydork.com/';" style="cursor: pointer;">
<?php include (TEMPLATEPATH . '/rotating_images.php'); ?></div>
<div id="rotating_image2" onclick="location.href='https://mickeydork.com/';" style="cursor: pointer;">
<?php include (TEMPLATEPATH . '/rotating_images.php'); ?></div>
</div>

CSS

#rotating_images {
	width:885px;
	height: 150px;
}
#rotating_images div {
	width:50%;
	float:left;
	margin:0;
	padding:0;
}

Adjust the height of #rotating_images to suit your design. You may also need to add a clear:left to .content_box (the next block-level element immediately after the rotating_images header.

One final point – consider replacing “onclick” with “onfocus”. Not every potential visitor to your site will be using a mouse.

thanks Esmi, but doesn’t seem to work, please have a look

https://www.mickeydork.com

I’m interested in your solution, but can you also tell me the advantage of it (once I implement it properly) over just using a style=”position: relative; left: 400px;” type solution on the bottom one and also figure out a way to move it up on the page (if that is in fact possible?)

but doesn’t seem to work, please have a look

I can’t find the relevant CSS in your stylesheets or page.

can you also tell me the advantage of it

Relative positioning doesn’t always work predictably cross-browser (eg IE6/7). Floats, on the other hand, tend to work pretty well apart from the odd issue with margins/padding in older versions of IE. Also, in theory, a floated approach where you have blocks on known width and height should render slightly faster than a relative positioning approach as the browser should have less work to do when calculating element positions before rendering the page.

i put the CSS in the custom css, are you saying I have it in the wrong place, or you can’t for some other reason find what you would need to fix the problem

Esmi, was this the CSS in the style sheet that you might have been looking for?

‘#rotating_image { width: 885px; margin: 0 0 10px 0; }

#rotating_image img { display: block; border: 10px solid #eee; }’

By the way, when I change the “id” to a “class,” what else do I need to change? When I changed “id” to “class” without changing anything else, it just took away the border and the image no longer became clickable

Any help?

Esmi (or anyone else who wants to go back and follow this thread)

I changed my IDs to classes (as you recommended) and managed to keep the border around them etc as before, but I don’t know what else to change in order to make the CSS work

a) do I put the two classes inside an ID and refer to the ID somehow in order to float them side by side?

b) what is the CSS you recommeded (for floating them side by side) supposed to look like if the IDs are changed to classes?

https://www.mickeydork.com

c) when I manually positioned the right one next to the left (i.e. moved it over and then up using “position: relative or position: absolute” it left a space between the header and content area? any way to get rid of that?

found another kind of float solution (not the one that Esmi proposed) that sort of works, but the margins between the headers don’t work in Chrome

would still like to apply Esmi’s CSS suggestion to my classes (instead of IDs) if anyone has a suggestion how to do it

https://www.mickeydork.com