How Do I Move The Date Box Back Up To Orignal Place? [Archive]

Byronwells

01-04-2010, 04:55 PM

Alright Guys I had the date box section in the right place before I added the productlicense box.. I need to move it back, so that it looks like in this image please http://www.supreme-host.com/web/categories.html

I have tried all differnt combinations but cant seem to figure out how to get in to appear at the top right hand corner before I had the second div to it..

Source Code

<div id="middle">
Testing
<div class="productboxheader">
<img src="images/productheader.jpg" width="485" height="38" />

</div>
<div class="productbox">
<div class="producttitle">Getting Introduced to Oil Painting </div>
<div class="productlicense">(Master Resale & Private Label Rights Included)
</div>
<div class="datebox">
<div align="center">
Added:
DEC/09/2009

</div>

</div>
</div>

<div class="productbottom">
</div>
</div>
{/code]

css code
[code]
/************************************************

* Middle Column *

************************************************/

#middle {

float: left;

width: 485px;

margin: 0px 0px 0px 10px;

padding: 0px;

line-height: 20px;

display: inline;

}

.productboxheader {

background: #FFFFFF;

float: left;

width: 485px;

height: 38px;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

}

.productbox {

background: #FFFFFF;

float: left;

width: 481px;

margin: 0px 0px 0px 0px;

padding: 0px 0px 0px 0px;

border-left: 2px solid #9B9B9B;

border-right: 2px solid #9B9B9B;

font-size: 11px;

font-family: Tahoma;

font-weight: Bold;

color: #359CBB;

}

.producttitle {

background: #FFFFFF;

float: left;

width: 362px;

height: 25px;

margin: 15px 3px 0px 18px;

font-size: 12px;

font-family: Tahoma;

font-weight: Bold;

color: #17279e;

}

.productlicense {

background: #FFFFFF;

float: left;

width: 362px;

margin: 0px 3px 0px 18px;

font-size: 11px;

font-family: Tahoma;

font-weight: Bold;

color: #dc1400;

}

.productbottom {

background: #FFFFFF url(images/productbottom.jpg) no-repeat;

float: left;

width: 485px;

height: 25px;

margin: 0px 0px 0px 0px;

padding: 0px 0px 10px 0px;

}

.datebox {

background: #FFFFFF;

float: left;

width: 74px;

height: 36px;

margin: 11px 0px 0px 0px;

padding: 5px 7px 10px 7px;

border: 2px solid #9B9B9B;

font-size: 11px;

font-family: Tahoma;

font-weight: Bold;

color: #030000;

}

hdewantara

01-07-2010, 10:20 PM

I thought this might
give a hint...:D
<html>
<head>
<title>test</title>

<style type="text/css">
#middle {
float: left;
width: 485px;
line-height: 20px;
}

.productboxheader {
width: 485px;
height: 38px;
}

.productbox {
border-left: 2px solid #9B9B9B;
border-right: 2px solid #9B9B9B;
border-bottom: 2px solid #9B9B9B;
font-size: 11px;
font-family: Tahoma;
font-weight: Bold;
color: #359CBB;
padding: 1em 1em 0em 1em;
}

.producttitle {
font-size: 12px;
font-family: Tahoma;
font-weight: Bold;
color: #17279e;
}

.productlicense {
font-size: 11px;
font-family: Tahoma;
font-weight: Bold;
color: #dc1400;
}

.datebox {
float: right;
width: 74px;
padding: 5px 7px 10px 7px;
border: 2px solid #9B9B9B;
font-size: 11px;
font-family: Tahoma;
font-weight: Bold;
color: #030000;
text-align: center;
line-height: .9em;
}

.productcontent{
border-top: 1px dotted #9B9B9B;
border-bottom: 1px dotted #9B9B9B;
}

.productdiv{
text-align: center;
}

.productbottom {
background: url(http://www.supreme-host.com/web/images/productbottom.jpg) no-repeat;
width: 485px;
height: 25px;
}
</style>
</head>

<body>

<div id="middle">
<div class="productboxheader"><img src="http://www.supreme-host.com/web/images/productheader.jpg" /></div>

<div class="productbox">
<div class="datebox">Added: DEC/09/2009</div>
<div class="producttitle">Getting Introduced to Oil Painting </div>
<div class="productlicense">(Master Resale & Private Label Rights Included)</div>
<div class="productcontent">
blablabla
</div>
<div class="productdiv">DOWNLOAD MOREINFO VIEWSALESPAGE</div>
</div>

<div class="productbox">
<div class="datebox">Added: DEC/09/2009</div>
<div class="producttitle">Getting Introduced to Oil Painting </div>
<div class="productlicense">(Master Resale & Private Label Rights Included)</div>
<div class="productcontent">
blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
</div>
<div class="productdiv">DOWNLOAD MOREINFO VIEWSALESPAGE</div>
</div>

<div class="productbox">
<div class="datebox">Added: DEC/09/2009</div>
<div class="producttitle">Getting Introduced to Oil Painting </div>
<div class="productlicense">(Master Resale & Private Label Rights Included)</div>
<div class="productcontent">
blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla
</div>
<div class="productdiv">DOWNLOAD MOREINFO VIEWSALESPAGE</div>
</div>

<div class="productbottom"></div>
</div>

</body>
</html>