Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Nov 2009
    Posts
    3
    Thanks
    1
    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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
    <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
    <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
    <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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    
    <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>
    &nbsp;&nbsp;
    <a href="http://www.twitter.com/officiallyurban" target="_blank"><img src="img/images/images/twitter.png" width="48" height="48" /></a>
    &nbsp;&nbsp;
    <a href="http://www.myspace.com/officiallyurban" target="_blank"><img src="img/images/images/myspace.png" width="48" height="48" /></a>
    &nbsp;&nbsp;
    <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>
    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: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;
    }
    The ID's for the DIVS are sidebar1 for the left one, and sidebar2 for the right column.

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 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, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •