0
NOTE: on this pic the box is to the right for some strange reason, i want the left to line up with the box above, (it lines up correctly online but the content is not in the box)
...so, here's what i want the spotlight box to look like..
and here's what happens when its published
link here
the problem maybe due to the floating of my div's but as my code is getting more and more in size its geting hard when i get little problems like this..
heres my html.. i tried to leave the relavent stuff in
<body> <div id="container"> <div id="topnavigation"></div> <div id="header"></div> <!--body--> <div id="main"> <div id="search"></div> <div id="stats"> </div> <div id="maincontent"></div> <div id="maincontent"></div> <div id="spotlight"> <div><img src="images/spotlight.png"></div> <div id="spotpic"><img src="" width="100px" height="100px"></div> <div class="black" id="spottext">Band Name<br> <font class="greynews">Band Description, info, and news. This will show a profile and other info blah blah this more info blah i can get quite alot of info here yackety yack talk talk....</font></div> <div class="pagelinkfont style2" id="spotlink" >Read More</div> </div> </div> <!--bodyend--> </body>
css
body{
padding:0;
margin-top:0;
margin-left:auto;
margin-right:auto;
background-image:url(images/bodybg.png);
background-position:top center;
background-repeat:no-repeat;
}
#container{
margin:0;
padding:0;
margin-top:0;
margin-left:auto;
margin-right:auto;
width:800px;
margin-top:0;
background-image:url(images/bgmain.png);
background-repeat:repeat-y;
}
#main{
padding:0;
margin:0;
width:610px;
float:left;
background-image:url(images/mainbg.png);
background-repeat:repeat-y;
}
#side{
padding:0;
margin:0;
width:190px;
float:right;
background-image:url(images/navbg.png);
background-repeat:repeat-y;
margin-top:4px;
height:auto;
}
#search{
padding:0;
margin:0;
margin-left:18px;
margin-top:15px;
width:280px;
height:100px;
border:1px solid #d4d5d5;
float:left;
}
#stats{
padding:0;
margin:0;
margin-right:14px;
margin-top:15px;
width:280px;
height:100px;
border:1px solid #d4d5d5;
float:right;
}
#maincontent{
padding:0;
margin:0;
margin-left:18px;
margin-top:15px;
width:576px;
border:1px solid #000000;
float:left;
clear:both;
}
#spotlight{
padding:0;
margin:0;
width:360px;
height:110px;
border:1px solid #d4d5d5;
float:left;
margin-left:18px;
margin-top:15px;
}
#spotpic{
padding:0;
margin:0;
margin-left:20px;
margin-top:15px;
float:left;
height:100px;
width:100px;
}
#spottext{
padding:0;
margin:0;
float:left;
margin-left:10px;
margin-right:4px;
margin-top:15px;
}
#spotlink{
padding:0;
margin:0;
clear:both;
float:right;
margin-right:10px;
margin-bottom:6px;
}
Edited by jamiecarter, 19 July 2006 - 06:05 PM.
