 |
|
|
|||||||
Before you post, read our:  |
|
|
Thread Tools | Rate Thread |
|
|
|
|||||||
|
|
|
Thread Tools | Rate Thread |
11-25-2009, 02:34 PM
|
PM User | #1 |
|
New to the CF scene Join Date: Nov 2009
Posts: 1
Thanks: 0
Thanked 0 Times in 0 Posts
 |
Positioning DIVs, please help
Hi there,
I am in the process of creating a website and have come across an obstacle which I cannot seem to overcome. Please visit http://www.officiallyurban.com/new If you look on the right side underneath the social networking buttons, you can see two columns, one on the left has two boxes with pink border, and the other has an advertisement banner. The positioning of these two columns are incorrect. They are too close to each other and are overlapping. The column on the left needs to be pushed left till the start of the search box above it, and the right column needs to be pushed right to the end of the search box. Please see my HTML and CSS below: HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OfficiallyUrban.com</title>
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body class="body" onload="MM_preloadImages('img/images/images/menu-rollover-news_07.png','img/images/images/menu-rollover-videos_09.png','img/images/images/menu-rollover-archives_11.png','img/images/images/menu-rollover-links_13.png','img/images/images/menu-rollover-contact_15.png')">
<!--wrapper-->
<div id="wrapper">
<div id="header">
<!--page-navigation-->
<div id="menu">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('News','','img/images/images/menu-rollover-news_07.png',1)"><img src="img/images/images/menu-news_07.png" name="News" width="39" height="15" border="0" id="News" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Videos','','img/images/images/menu-rollover-videos_09.png',1)"><img src="img/images/images/menu-videos_09.png" name="Videos" width="52" height="15" border="0" id="Videos" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Archives','','img/images/images/menu-rollover-archives_11.png',1)"><img src="img/images/images/menu-archives_11.png" name="Archives" width="64" height="15" border="0" id="Archives" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Links','','img/images/images/menu-rollover-links_13.png',1)"><img src="img/images/images/menu-links_13.png" name="Links" width="40" height="15" border="0" id="Links" /></a>
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','img/images/images/menu-rollover-contact_15.png',1)"><img src="img/images/images/menu-contact_15.png" name="Contact" width="58" height="15" border="0" id="Contact" /></a>
</div>
<!--page-navigation-->
<div id="topbanner"><center>
<a href="#"><img src="img/images/images/banner1.jpg" /></a></center>
</div>
</div>
<!--header-end-->
<!--content-->
<div id="content">
<!--left-col-->
<div id="left-col">
<!--post-->
<div id="post">
<!--blog posts will go here-->
<h1><a href="http://concreteloop.com/2009/11/download-kevin-cossoms-hook-vs-bridge" rel="bookmark" title="DOWNLOAD: KEVIN COSSOM’S <i>HOOK vs. BRIDGE</i>">DOWNLOAD: KEVIN COSSOM’S <i>HOOK vs. BRIDGE</i></a></h1>
<h4>Friday, November 20, 2009</h4>
<p align=left>
You may remember us <a href="http://concreteloop.com/2009/08/artist-to-watch-kevin-cossom">featuring him our artist spotlight section</a>, but now <font color="#ED145B"><strong>Kevin Cossom</strong></font> is setting the tone for his debut album with his <font color="#FCC538">extended EP, <i>Hook vs. Bridge</i></font>.</p>
<p>The EP consists of fourteen full tracks, production by <u>Nate “Danjahandz” Hill</u>, <u>HitBoy</u> and <u>The Runners</u>, with features from the likes of <font color="#FCC538">Drake</font>, <font color="#FCC538">Pusha-T</font> and more.</p>
<p>As a reminder, the <font color="#FCC538">name of the album references Cossom’s work as a hip hop hook writer,</font> having written hooks for some of <font color="#ED145B">today’s biggest hip hop artists</font> including Young Jeezy, Rick Ross, Lloyd Banks, DJ Khaled, Beanie Siegel, Plies and a host of others.</p>
<div align=center>
<h1><a href="http://www.***********/download/686895247e21fffe/" target="_blank">♫ DOWNLOAD <i>HOOK vs. BRIDGE</i> ♫</a></h1>
</div>
<div align=center>Click the above link to download the full EP…</div>
<p align=left>
<div class="meta">
<p class="left"><a href="#" class="comments">37 Comments</a> <a href="http://concreteloop.com/2009/11/download-kevin-cossoms-hook-vs-bridge#leaveacomment" class="leavecomment">COMMENT?</a></p>
<p class="right">Posted by: BRIAN</p>
</div>
</div>
<!--post-end-->
</div>
<!--left-col-end-->
<!--right-col-->
<div id="right-col">
<!--search-->
<div id="searchform">
<form id="searchform" action="<?php echo get_option('home') ?>" />
<input type="text" id="s" value="none" class="swap_value" />
<input type="image" src="img/images/images/searchbutton_30.png" width="52" height="13" id="go" alt="Search" title="Search" />
</form>
</div>
<!--search-end-->
<!--rss subscriber-->
<div id="feed">
<center>
<a href="http://www.facebook.com" target="_blank"><img src="img/images/images/facebook.png" width="48" height="48" /></a>
<a href="http://www.twitter.com/officiallyurban" target="_blank"><img src="img/images/images/twitter.png" width="48" height="48" /></a>
<a href="http://www.myspace.com/officiallyurban" target="_blank"><img src="img/images/images/myspace.png" width="48" height="48" /></a>
<a href="http://www.youtube.com/officiallyurban" target="_blank"><img src="img/images/images/youtube.png" width="48" height="48" /></a>
</center></div>
<!--rss subscriber-end-->
<!--sidebar-->
<div id="sidebar">
<!--sidebar1-->
<div id="sidebar1">
<!--sidebar-->
<ul>
<li><h2></h2>
</li>
<li><h2></h2>
</li>
</ul>
</div>
<!--sidebar1-end-->
<!--sidebar2-->
<div id="sidebar2">
<a href="#"><img src="http://b1.adbrite.com/iads/377821.jpg"/></a>
</div>
<!--sidebar2-end-->
</div>
<!--sidebar-end-->
</div>
<!--right-col-end-->
</div>
<div id="footer">
<p align="center"><b>© 2009 Officially Urban</b></p>
<p>The information contained in this website is for general information purposes only. While we endeavour to keep the information up to date and correct, we make no representations or warranties of any kind, express or implied, about the completeness, accuracy, reliability, suitability or availability with respect to the website or the information, products, services, or related graphics contained on the website for any purpose. Any reliance you place on such information is therefore strictly at your own risk.</p>
</div>
<!--content-end-->
</div>
<!--wrapper-end-->
<!--footer-->
<!--footer-end-->
</body>
</html>
Code:
body {background: #000 url(img/images/images/bg_02.png) repeat-x top center;font-family:Arial;font-size:12px; color:#FFF; }
#wrapper {
width: 960px;
margin: 0 auto;
min-height:250px;
background:none;
color:#fff;
}
#header {
width: 960px;
float: left;
padding-top: 320px;
}
#header #menu {
background: no-repeat url(img/images/images/menubg_04.png) ;
float: left;
width: 339px;
height: 15px;
padding: 10px 45px 10px 45px;
padding
}
#header #topbanner {
padding-top: 50px;
width: 960px;
}
#header #topbanner a img {
border:0;
}
#content {
width: 960px;
float: left;
}
#content #left-col {
width: 600px;
float: left;
position: relative;
padding-right: 30px;
margin-top: 20px;
}
#content #left-col #post {
background-color: #111111;
border: 1px solid #404040;
font-size:13px;
font-family:Arial;
color: #FFFFFF;
margin-bottom: 20px;
}
#content #left-col #post h1 a {
font-size:20px;
font-family:Arial;
color: #FF0066;
}
#content #left-col #post h4 {
font-size:16px;
font-family:Arial;
color: #949494;
}
#comments {
margin-top: 15px;
float: left;
width: 600px;
}
h3#comment-title {
background: url(images/comments.png) no-repeat top left;
width: 600px;
float: left;
text-indent: -9999em;
padding-top: 5px;
}
#comments ol, #comments ol li {
float: left;
width: 600px;
list-style: none;
padding: 0;
}
#comments ol li .comment-data {
float: left;
width: 478px;
margin-right: 10px;
background-color: #d7d39a;
padding: 5px 10px;
min-height: 120px;
_height: 120px; /* an IE6 hack */
overflow: auto;
border: 1px solid #c1bd85;
}
#comments ol li.alt .comment-data {
float: left;
width: 478px;
margin-right: 10px;
background-color: #eae8c6;
padding: 5px 10px;
min-height: 120px;
border: 1px solid #c1bd85;
_height: 120px; /* an IE6 hack */
overflow: visible;
margin-top: -1px;
margin-bottom: -2px;
}
#comments ol li .comment-info {
width: 90px;
float: left;
text-align: right;
font-size: 10px;
line-height: 12px;
}
#comments ol li .comment-info a img {
border: 0;
margin-bottom: 5px;
}
#comments ol li .comment-info a {
text-decoration: none;
}
#content #right-col {
width: 330px;
margin-top: 20px;
float: left;
position: relative;
}
#content #right-col #sidebar {
width: 330px;
float: left;
position: relative;
}
#sidebar ul {
list-style: none;
}
#sidebar1 {
float: left;
width: 160px;
padding-right: 10px;
}
#sidebar2 {
float: right;
width: 160px;
}
#sidebar2 a img {
border:0;
}
#sidebar ul {
}
#sidebar1 ul li {
float: left;
width: 158px;
background-color: #181818;
border: 1px solid #ff0066;
margin-bottom: 10px;
}
#sidebar ul li h2 { /* this is the widget title */
padding: 3px 4px 6px;
font: 400 18px Arial, Helvetica, sans-serif;
color: #4c6b0d;
}
#sidebar1 ul li ul {
}
#sidebar1 ul li ul li { /* begin for the widget list */
float: left;
width: 158px;
border: 0;
margin-bottom: 0;
}
#sidebar1 ul li ul li a {
border-top: 1px solid #bbb875;
float: left;
width: 150px;
text-decoration: none;
color: #5d5b35;
padding: 2px 4px;
}
#sidebar1 ul li ul li a:hover {
color: #fff;
background-color: #bbb875;
}
#searchform {
background-image: url(img/images/images/search_25.png);
width: 330px;
height: 45px;
}
#searchform #s {
float: left;
padding: 2px 3px 0 4px;
margin: 12px 0 0 12px;
border: 0;
width: 236px;
height: 16px;
background: url(img/images/images/searchtype_27.png);
font-size:11px;
font-family:Arial;
}
#searchform #go {
float: right;
margin: 15px 12px 0 0;
}
#feed {
padding-top: 20px;
padding-bottom: 20px;
}
#feed a img {
border:0;
}
#footer {
width: 960px;
float: left;
background: url(img/images/images/footerbg.png);
padding: 20px 10px 10px 10px;
color: #fff;
font-size:10px;
margin-top:30px;
}
I am pretty sure this is a simple fix, but I cannot seem to find what I'm doing wrong! Your help would be greatly appreciated. Thanks in advance, Technix |
|
|
|
11-25-2009, 05:29 PM
|
PM User | #2 |
|
Senior Coder   
Join Date: Dec 2006
Location: Alaska
Posts: 4,371
Thanks: 9
Thanked 607 Times in 601 Posts
 |
Hello technix,
If you put a background color on #wrapper, change background:none; to background: #00f; , you can see it's not containing the whole site. Adding overflow: auto; makes the floats clear and #wrap can extend to contain everything. Here is a site that shows how that works.Since #header is the full width of it's container there is no reason for it to be floated. We float things so we can put other things beside them. In your problem right column, the math all works till you get down to #sidebar ul li. It has a default padding-left:40px; A CSS reset would fix that, or you could use #sidebar ul{margin: 0;padding: 0;}Try these changes to your CSS - Code:
body {background: #000 url(img/images/images/bg_02.png) repeat-x top center;font-family:Arial;font-size:12px; color:#FFF; }
#wrapper {
width: 960px;
margin: 0 auto;
min-height:250px;
background: #00f; /*for testing only*/
color:#fff;
overflow: auto;
}
#header {
width: 960px;
/*float: left; why float?*/
padding-top: 320px;
}
#header #menu {
background: no-repeat url(img/images/images/menubg_04.png) ;
float: left;
width: 339px;
height: 15px;
padding: 10px 45px 10px 45px;
padding
}
#header #topbanner {
padding-top: 50px;
width: 960px;
}
#header #topbanner a img {
border:0;
}
#content {
width: 960px;
background: #f00; /*for testing only*/
overflow: auto;
}
#content #left-col {
width: 600px;
float: left;
position: relative;
padding-right: 30px;
margin-top: 20px;
}
#content #left-col #post {
background-color: #111111;
border: 1px solid #404040;
font-size:13px;
font-family:Arial;
color: #FFFFFF;
margin-bottom: 20px;
}
#content #left-col #post h1 a {
font-size:20px;
font-family:Arial;
color: #FF0066;
}
#content #left-col #post h4 {
font-size:16px;
font-family:Arial;
color: #949494;
}
#comments {
margin-top: 15px;
float: left;
width: 600px;
}
h3#comment-title {
background: url(images/comments.png) no-repeat top left;
width: 600px;
float: left;
text-indent: -9999em;
padding-top: 5px;
}
#comments ol, #comments ol li {
float: left;
width: 600px;
list-style: none;
padding: 0;
}
#comments ol li .comment-data {
float: left;
width: 478px;
margin-right: 10px;
background-color: #d7d39a;
padding: 5px 10px;
min-height: 120px;
_height: 120px; /* an IE6 hack */
overflow: auto;
border: 1px solid #c1bd85;
}
#comments ol li.alt .comment-data {
float: left;
width: 478px;
margin-right: 10px;
background-color: #eae8c6;
padding: 5px 10px;
min-height: 120px;
border: 1px solid #c1bd85;
_height: 120px; /* an IE6 hack */
overflow: visible;
margin-top: -1px;
margin-bottom: -2px;
}
#comments ol li .comment-info {
width: 90px;
float: left;
text-align: right;
font-size: 10px;
line-height: 12px;
}
#comments ol li .comment-info a img {
border: 0;
margin-bottom: 5px;
}
#comments ol li .comment-info a {
text-decoration: none;
}
#content #right-col {
width: 330px;
margin-top: 20px;
float: left;
position: relative;
}
#content #right-col #sidebar {
width: 330px;
float: left;
position: relative;
}
#sidebar ul {
list-style: none;
}
#sidebar1 {
float: left;
width: 160px;
padding-right: 10px;
}
#sidebar2 {
float: right;
width: 160px;
}
#sidebar2 a img {
border:0;
}
#sidebar ul {
margin: 0;
padding: 0;
}
#sidebar1 ul li {
width: 158px;
background: #181818;
border: 1px solid #ff0066;
margin-bottom: 10px;
}
#sidebar ul li h2 { /* this is the widget title */
padding: 3px 4px 6px;
font: 400 18px Arial, Helvetica, sans-serif;
color: #4c6b0d;
}
#sidebar1 ul li ul {
}
#sidebar1 ul li ul li { /* begin for the widget list */
float: left;
width: 158px;
border: 0;
margin-bottom: 0;
}
#sidebar1 ul li ul li a {
border-top: 1px solid #bbb875;
float: left;
width: 150px;
text-decoration: none;
color: #5d5b35;
padding: 2px 4px;
}
#sidebar1 ul li ul li a:hover {
color: #fff;
background-color: #bbb875;
}
#searchform {
background-image: url(img/images/images/search_25.png);
width: 330px;
height: 45px;
}
#searchform #s {
float: left;
padding: 2px 3px 0 4px;
margin: 12px 0 0 12px;
border: 0;
width: 236px;
height: 16px;
background: url(img/images/images/searchtype_27.png);
font-size:11px;
font-family:Arial;
}
#searchform #go {
float: right;
margin: 15px 12px 0 0;
}
#feed {
padding-top: 20px;
padding-bottom: 20px;
}
#feed a img {
border:0;
}
#footer {
width: 960px;
float: left;
background: url(img/images/images/footerbg.png);
padding: 20px 10px 10px 10px;
color: #fff;
font-size:10px;
margin-top:30px;
}
__________________
Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, then hack it for IE
Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad |
|
|
|
|
| Bookmarks |
| Thread Tools | |
| Rate This Thread | |
|
|
