STUCK

I currently have a website which has a large image slider (980px wide) then underneath that a box with
information in. I want to change it so its a half width inc. padding (430px wide) and the second box
goes next to it, so its 2 boxes side by side instead of 2 boxes, one atop the other.

See screenshot for current. Top is Slider, bottom is Quad.

I have managed to get all the content I want in the quad section for the RHS box and managed to resize the slider to half width,
problem I am having is getting the two to go next to each other, side by side.

I tried using position:absolute and position:left but didn't get anywhere with that.

The CSS Produces


The CSS CODE is

/* slider */
.slider_container {display:block; width:980px; height:450px; margin:0 auto; background:url(images/bg_header.png) no-repeat;}
.sliderwrapper {position:relative;width:980px; height:400px; overflow:hidden;}
.sliderwrapper .contentdiv {position:absolute; width:980px; height:100%; left:0; top:0; visibility:hidden;filterrogidXImageTransform.M icrosoft.alpha(opacity=100); -moz-opacity:1; opacity:1;}
.coda_image {display:block; width:978px; height:398px; margin:1px;}
.coda_image a {display:block; width:960px; height:380px;}
.coda_pagination {float:left; display:inline; width:710px; height:47px; margin-left:20px; clear:both;}
.coda_left_bottom {float:left; display:inline; width:230px; height:47px; line-height:47px; text-align:right; padding-right:20px;}
.coda_pagination a {float:left; display:block; width:50px; height:34px; padding:13px 0 0 0; text-align:center; background:url(images/bg_pag.png) no-repeat 0px -47px; color:#999999; font:bolder 12px/25px Verdana, Arial, Helvetica, sans-serif; }
.coda_pagination a:hover{color:#999999; background:url(images/bg_pag.png) no-repeat 0px -94px;}
.coda_pagination a.selected {color:#999999; background:url(images/bg_pag.png) no-repeat 0px 0px;}

/* quad */
.quad_container {display:block; width:980px; height:250px; margin:15px auto; background:url(images/bg_quad.png) no-repeat;}
.quad_item {float:left; display:block; width:205px; height:210px; padding:20px;}
.quad_itemspeciale {float:left; display:block; width:243px; height:248px; padding:1px; overflow:hidden;}
.quad_excerpt {display:block; width:205px; height:100px; margin-top:4px;font:11px/14px Geneva, Arial, Helvetica, sans-serif; letter-spacing:0.05em;}
.quad_thumb a {display:block; width:205px; height:75px;}
.quad_cats {display:block; width:198px; height:49px; background:url(images/bg_cat.png) no-repeat 0px 0px; padding:8px 35px 5px 10px; font:10px/11px Arial, Helvetica, sans-serif;}
.quad_cats:hover {background:url(images/bg_cat.png) no-repeat 0px -62px;}


Any idea how I can change it? so they go next to each other ????
Urgently waiting reply.. Any help greatly appreciated.

[Deleted]
I think I get what you mean,
You want your text to go to the right of the images?
Wouldn't that be to do with HTML maybe?
or a Wrapper div to contain both the image + the text?

Do you maybe have a design you createdi n photoshop showing how you want it to look?

If I have understood your question I suggest you look at the sticky concerning floats in this forum. The link in the second post would seem to be just what you want.