Issue positioning text

[HDFilmMaker2112]

On this page, http://ghosthuntersportal.com/store.php?product=2, the ADD CART BUTTON text should be next to the Price, GHP#, ect. and centered within the space.

 

style.css

a:link {
color: #FFFFFF;
font-weight: bold;
text-decoration: none; 
}
a:visited {
color: #FFFFFF;
font-weight: bold;
text-decoration: none; 
}
a:active {
color: #FFFFFF;
font-weight: bold;
text-decoration: none; 
}
a:hover {
color: #FF44FF;
font-weight: bold;
text-decoration: none; 
}

.admin_cp a:link {
color: #0000FF;
text-decoration: underline;
font-weight: none;
}
.admin_cp a:visited {
color: #0000FF;
text-decoration: underline;
font-weight: none;
}
.admin_cp a:active {
color: #0000FF;
text-decoration: underline;
font-weight: none;
}
.admin_cp a:hover {
color: #0000FF; 
text-decoration: underline;
font-weight: none;
}


.header{
width: 999px;
height: 75px;
border: 2px;
border-color: #660066;
border-style: none;
border-bottom-style: solid;
}

.logo{
float: left;
margin-top: -12px;
margin-left: -3px;
height: 76px;
width: 460px;
}

.tag{
float: left;
margin-top: 40px;
margin-left: -453px;
height: 35px;
width: 460px;
}

.header_right{
width: 530px;
height: 74px;
float: left;
}

.header_links{
width: 350px;
height: 16px;
text-align: center;
font-size: 12px;
margin-left: 180px;
}

.header_links a:link{
color: #FFFFFF;
text-decoration: none;
}
.header_links a:hover{
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}

.ad{
margin-left: 140px;
width: 390px;
height: 55px;
text-align: center;
}

.adposition{
}

.adspacer{
}
.adspacer2{
}

.content_wrapper{
width: 995px;
height: 100%;
min-height: 450px;
border: 2px;
border-color: #660066;
border-style: solid;
border-top-style: none;
overflow: auto;
}

.categories{
margin-top: -10px;
margin-bottom: 3px;
margin-left: -5px;
font-weight: bold;
font-size: 16px;
text-align: center;
}

.links{
font-size: 14px;
margin-top: 15px;
margin-left: 10px;
float: left;
width: 165px;
}

.links a:link{
font-weight: bold;
}

.data_wrapper{
float: right;
width: 815px;
height: 100%;
min-height: 450px;
border: 2px;
border-color: #660066;
border-style: none;
border-left-style: solid;
}

.search_crumbs{
height: 30px;
width: 815px;
margin-top: 7px;
}

.crumbs{
float: left;
width: 400px;
height: 25px;
font-weight: bold;
font-size: 12px;
margin-left: 15px;
margin-top: 5px;
}

.search{
float: right;
width: 325px;
height: 25px;
text-align: right;
font-weight: bold;
font-size: 14px;
margin-right: 15px;
}

.content{
height: 100%;
min-height: 450px;
width: 790px;
margin-left: 15px;
}

.footer{
float: left;
width: 995px;
margin-top: 5px;
text-align: center;
font-size: 11px;
clear: both;
border: 7px;
border-color: #000000;
border-bottom-style: solid;
}

.content_text{
margin-top: 5px;
margin-left: 55px;
font-size: 15px;
width: 671px;
}

.content_header{
font-size: 24px;
text-align: center;
margin-bottom: 5px;
}

.popular_products{
height: 145px;
}

.product{
float: left;
text-align: center;
width: 160px;
margin-top: 10px;
margin-left: 10px;
font-size: 14px;
}

.product a:link{
color: #FF44FF;
font-weight: bold;
text-decoration: underline;
}
.product a:visited {
color: #FF44FF;
font-weight: bold;
text-decoration: underline;
}
.product a:hover{
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}

.product_image{
float: left;
margin-top: 5px;
}

.product_details{
float: left;
margin-left: 25px;
}

.product_price{
font-size: 18px;
color: #CC00CC;
}

.product_wrapper{
margin-left: 15px;
width: 700px;
}

.product_links_headers{
float: left;
width: 785px;
margin-top: 10px;
margin-left: 15px;
}

.product_highlights_text{
font-weight: bold;
font-size: 14px;
margin-top: 5px;
}

.product_highlights_item{
font-size: 14px;
margin-top: -13px;
margin-left: -25px;
}

.product_title{
width: 775px;
}

.product_code{
font-size: 12px;
}

.rating_image{
margin-top: 3px;
}

.review_container{
margin-top: 10px;
}

.add_cart_wrapper{
float: left;
width: 250px;
}

.contactus_links{
font-weight: bold;
}
.contactus_links a:link {
color: #FF44FF;
text-decoration: none;
}
.contactus_links a:visited {
color: #FF44FF;
text-decoration: none;
}
.contactus_links a:active {
color: #FF44FF;
text-decoration: none; 
}
.contactus_links a:hover {
color: #FFFFFF;
text-decoration: none; 
}

.product_tab{
width: 200px;
text-align: center;
float: left;
border: 1px;
border-color: #CC00CC;
border-style: solid;
border-collapse: collapse;
}

.product_tab a:link {
color: #FFFFFF;
text-decoration: none;
}
.product_tab a:visited {
color: #FFFFFF;
text-decoration: none;
}
.product_tab a:active {
color: #FFFFFF;
text-decoration: none; 
}
.product_tab a:hover {
color: #FFFFFF;
text-decoration: none; 
}

.product_tab_wrapper{
width: 700px;
clear: both;
margin-top: 320px;
margin-left: 15px;
}

.product_information{
width: 750px;
border: 1px;
border-color: #CC00CC;
border-style: solid;
border-collapse: collapse;
margin-left: 15px;
clear: both;
}

.product_information_text{
padding: 10px;
}

.address{
color: #008800;
margin-left: 40px;
}

.seventypercent{
width: 70%;
}

img{
border: 0px;
}
.center{
text-align: center;
}
.underline{
text-decoration: underline;
}
.bold{
font-weight: bold;
}
.italics{
font-style: italic
}
.eleven{
font-size: 11px;
}
.twelve{
font-size: 12px;
}
.fourteen{
font-size: 14px;
}
.sixteen{
font-size: 16px;
}
.gray{
color: #6F6F6F;
}
.eighteen{
font-size: 18px;
}
.twentyeight{
font-size: 28px;
}
.twentysix{
font-size: 26px;
}
.thirtytwo{
font-size: 32px;
}
.skyblue{
color: #3399FF;
}
.red{
color: #FF0000;
}
.sig{
margin-left: 50px;
margin-top: 325px;
}
.green{
color: #008800;
}
.blue{
color: #000000;
}
.fortyfive{
width: 45%;
}
.sixty{
width: 60%;
}
.twenty{
width: 20%;
}
.clear{
clear: both;
}

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head>
<base href="http://ghosthuntersportal.com/" />
<title>Ghost Hunter's Portal  - Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="verify-v1" content="" />
<meta name="keywords" content="ghost, hunters, hunter, ghosts, spirit, spirits, paranormal, investigation, investigator, investigators, k2, emf, meter, kii" />
<meta name="description" content="Ghost Hunters Potal. Parnormal research equipment store." />
<meta name="author" content="Andrew McCarrick" />
<meta name="robots" content="index, follow" />

<style type="text/css">
body {background-color: #000000; color: #FFFFFF; font-family: Verdana; margin-top: 10px;
margin-right:auto;margin-left:auto;max-width:1000px;}</style>
<link rel="stylesheet" type="text/css" href="style.css" />

<link rel="shortcut icon" href="./favicon.png" />
<script type="text/javascript">
<!--
function load(){
var url = window.location.href;
var parts = url.split("#");
var type = parts[1];
if(type==undefined){
type="overview";
}
sndReq(type);
changeClr('nav'+type);
}


function requestObj() {
    var reqObj;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        reqObj = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        reqObj = new XMLHttpRequest();
    }
    return reqObj;
}

var http = requestObj();

function sndReq(action) {
var product_id ="2";
    http.open('get', 'data.php?get='+action+'&product='+product_id, true); 
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        document.getElementById("ajaxout").innerHTML = response;
    }
}

function changeClr(sel) {
    if(sel == "navoverview"){
        document.getElementById('navoverview').style.backgroundColor = '#AA00AA';
        document.getElementById('navspecifications').style.backgroundColor = '#660066';
        document.getElementById('navreviews').style.backgroundColor = '#660066';
    }
    else if(sel == "navspecifications"){
        document.getElementById('navoverview').style.backgroundColor = '#660066';
        document.getElementById('navspecifications').style.backgroundColor = '#AA00AA';
        document.getElementById('navreviews').style.backgroundColor = '#660066';

    }
    else if(sel == "navreviews"){
        document.getElementById('navoverview').style.backgroundColor = '#660066';
        document.getElementById('navspecifications').style.backgroundColor = '#660066';
        document.getElementById('navreviews').style.backgroundColor = '#AA00AA';
    }
}
//-->
</script></head>
<body onload="load();">
<div class="header">
<a href="./index.php">
<div class="logo"><img src="./logo.png" alt="Ghost Hunter's Portal" /></div>
<div class="tag"><img src="./tag.png" alt="Ghost Hunter's Portal" /></div>
</a>
<div class="header_right">
<div class="ad">

</div>
<div class="header_links">
<a href="./index.php">Home</a> | View Cart | <a href="./index.php?returns">Returns</a> | <a href="./index.php?aboutus">About Us</a> | <a href="./index.php?contactus">Contact Us</a>

</div>
</div>
</div>
<div class="content_wrapper">
<div class="links">
<div class="categories">Categories</div>
<div><a href="store.php?cat=test">Test</a></div>
<div><a href="store.php?cat=test2">Test2</a></div>
<div><a href="store.php?cat=test10">Test10</a></div>
<div><a href="store.php?cat=test20">Test20</a></div>
<div><a href="store.php?cat=test50">Test50</a></div>

<div class="sig"><img src="./sig.png" /></div>
</div>
<div class="data_wrapper">
<div class="search_crumbs">
<div class="crumbs">
<a href="./index.php">Home</a> <span class="eleven">></span> <a href="./store.php?cat=test">Test</a>
<span class="eleven">></span> <a href="./store.php?product=2">Test123</a></div>
<div class="search">
<form action="./index.php?search" method="post">
<label>Search</label> <input type="text" name="search" size="30" />

<input type="submit" value="Go" name="Go" />
</form>
</div>
</div>
<div class="content">

<div class="product_wrapper">
<div class="product_title">Test123</div>
<div class="product_image">
<div><img src="test123.png" alt="Test123" /></div>
</div>
<div class="product_details">
<div class="product_price">Price: $1000</div>
<div class="product_code">GHP#: test</div>

<div class="rating_image"><img src="4.5.png" alt="4.5" /> <span class="twelve">(2 Reviews)</span></div><div><div class="product_highlights_text">Product Highlights</div><div class="product_highlights_item"><ul><li>test</li>
<li>test2</li>
<li>test3</li></ul></div>
</div>
</div>
<div class="add_cart_wrapper">
<div class="add_cart">ADD CART BUTTON</div>
</div>
</div>
<script type="text/javascript"><!--
document.write("\n<div class=\"product_tab_wrapper\">\n<div class=\"product_tab\" id=\"navoverview\" style=\"background-color: #AA00AA;\">\n<a href=\"./store.php?product=2#overview\" onclick=\"sndReq(\'overview\'); changeClr(\'navoverview\');\">Overview</a>\n</div>\n<div class=\"product_tab\" id=\"navspecifications\" style=\"background-color: #660066;\">\n<a href=\"./store.php?product=2#specifications\" onclick=\"sndReq(\'specifications\'); changeClr(\'navspecifications\');\">Specifications</a>\n</div>\n<div class=\"product_tab\" id=\"navreviews\" style=\"background-color: #660066;\">\n<a href=\"./store.php?product=2#reviews\" onclick=\"sndReq(\'reviews\'); changeClr(\'navreviews\');\">Customer Reviews</a>\n</div>\n</div>\n<div class=\"product_information\" id=\"ajaxout\">\ntest\n</div>\n\n");
//--></script>


<noscript>
<div class="product_tab_wrapper">
<div class="product_tab" id="navoverview" style="background-color: #AA00AA;">
<a href="./store.php?product=2">Overview</a>
</div>
<div class="product_tab" id="navspecifications" style="background-color: #660066">
<a href="./store.php?product=2&get=specifications">Specifications</a>
</div>
<div class="product_tab" id="navreviews" style="background-color: #660066;">
<a href="./store.php?product=2&get=reviews">Customer Reviews</a>
</div>
</div>

<div class="product_information"><div class="product_information_text">test</div>
</div>
</noscript>

</div>
<br />
</div>
</div>
<div class="footer">
© 2011  Ghost Hunter's Portal (Designed by: Andrew McCarrick)
</div>
</body>
</html>

[cssfreakie]

I am glad you have an online example. The thinng is your .add_cart_wrapper is wider than needed.

You might want to try something like firebug to see what is going on.

right now your .add_cart_wrapper is wider than  possible; .add_cart_wrapper

[HDFilmMaker2112]

When I take that css down to a smaller width, the div doesn't actually butt up against the second div tag that .add_cart_wrapper is contained in (product_wrapper).

 

I just made the width shorter, now take a look. It's about 60-80 pixels short of being centered in the space between "Price: $1000" and the right border.

 

http://ghosthuntersportal.com/store.php?product=2

 

I had .add_cart_wrapper set to a width of 250px... now it's 200px.

[HDFilmMaker2112]

I just used position: relative;.