PDA

View Full Version : Help with floating problem (i think0


kearnsy
10-26-2010, 08:11 PM
Evening all, i was wondering if anyone could help me out with what i presume is a floating problem i've got.

I'm making a mock up site, it's not a real site by the way, although i wish it was '0)

I'm trying to get two divs to sit directly underneath the yellow div on the left hand side so that they're both symmetrical with the divs down the right hand side

Here's the test page http://www.merseyme.co.uk/halobums/ I've highlighted the div in yellow, so i want two others to sit underneath, i've also highleted the footer at the bottom, in case that's anything to do with clear, float etc.

I've tried a few things, but nothing seems to work

Thanks folks

Here's the 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
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_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_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>
<script type="text/javascript" src="p7tbm/p7tbmenu.js"></script>
<script type="text/javascript" src="js/stscode.js"></script>
</head>
<body onload="P7_initTBM(1,2,1,1,200,8);MM_preloadImages('images/header_01_swap.jpg','images/bud2.jpg','images/bud3.jpg','images/bud1.jpg')">
<div id="container">
<div id="header"><a href="index.html"><img src="images/header_01.jpg" width="920" height="94" id="Image1" onmouseover="MM_swapImage('Image1','','images/header_01_swap.jpg',1)" onmouseout="MM_swapImgRestore()" /></a></div>
<span><a href="http://www.dhtml-menu-builder.com" style="display:none;visibility:hidden;">Javascript DHTML Image Web Scroller Powered by dhtml-menu-builder.com</a>
<script id="sothink_widgets:dwwidget_webscroll9_26_2010.sjc" type="text/javascript">
<!--
sts_bs("jwscroller2e8e",[20080623,"images/","","blank.gif",1,1,1,1,"920px","center",4,0,900,0,0,25,0,0,0,2000,1,30,0,"",-2,80],["none",1,"#006699","transparent","background.gif","repeat-x"]);
sts_tbd([1],["double",2,"#0099CC #FFFFFF",5,"round_tl.gif","round_tr.gif","round_br.gif","round_bl.gif","transparent","round_t.gif","repeat","transparent","round_r.gif","repeat","transparent","round_b.gif","repeat","transparent","round_l.gif","repeat"]);
sts_ai("i0",[0,"Hopefully, Cannabis will be legalised in the UK one day, if it ever is, then make sure you come back to Dial A Weed for the very best deals","","_self","",0,0,"center"],["transparent","bold 8pt Arial","#FFFFFF","none","bold 8pt Arial","#339e33","none"]);
sts_es();
//-->
</script>
</span>
<div id="navigation">
<div id="p7TBM">
<div id="p7TBMroot">
<div id="p7TBMrootbox">
<ul class="p7TBMtext">
<li><a href="#" id="p7TBMt01">About</a></li>
<li><a href="#" id="p7TBMt02">Products</a></li>
<li><a href="#" id="p7TBMt03">Merchandise</a></li>
<li><a href="#" id="p7TBMt04">Links</a></li>
<li><a href="#" id="p7TBMt05">Contact Us</a><br />
</li>
</ul>
</div>
</div>
<div id="p7TBMsubwrap">
<div id="p7TBMsub01" class="p7TBMsub">
<div class="p7TBMsubbox">
<ul>
<li><a href="#">About This Site</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Cannabis History</a></li>
<li><a href="#">Why It's Illegal</a></li>
<li><a href="#">Famous Smokers</a></li>
<li><a href="#">Safe Smoking</a><br />
</li>
</ul>
</div>
</div>
<div id="p7TBMsub02" class="p7TBMsub">
<div class="p7TBMsubbox">
<ul>
<li><a href="#">Afghan</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Haze</a></li>
<li><a href="#">Kush</a></li>
<li><a href="#">Northern Light</a></li>
<li><a href="#">Pollen</a></li>
<li><a href="#">Rocky</a></li>
<li><a href="#">Skunk</a></li>
<li><a href="#">White Widow</a><br />
</li>
</ul>
</div>
</div>
<div id="p7TBMsub03" class="p7TBMsub">
<div class="p7TBMsubbox">
<ul>
<li><a href="#">T-Shirts & Clothing</a></li>
<li><a href="#">Mugs</a></li>
<li><a href="#">Posters</a></li>
<li><a href="#">Picture Frames</a></li>
<li><a href="#">Various</a><br />
</li>
</ul>
</div>
</div>
<div id="p7TBMsub04" class="p7TBMsub">
<div class="p7TBMsubbox">
<ul>
<li><a href="http://www.potsmokersnet.com/">Pot Smokers</a></li>
<li><a href="http://www.marijuanadictionary.com/">Marijuana Dictionary</a></li>
<li><a href="http://www.420pot.com/">Pot Search</a></li>
<li><a href="http://www.lca-uk.org/">Legalise Cannabis Alliance</a></li>
<li><a href="http://www.youtube.com/results?search_query=legalise+cannabis&aq=f">Youtube</a><br />
</li>
</ul>
</div>
</div>
<div id="p7TBMsub05" class="p7TBMsub">
<div class="p7TBMsubbox">
<ul>
<li><a href="#">General Enquiries</a></li>
<li><a href="#">Website Enquiries</a><br />
</li>
</ul>
</div>
</div>
</div>
<!--[if IE 5]>
<style>#p7TBMroot a {margin-bottom: -3px !important;}</style>
<![endif]-->
<!--[if lte IE 6]>
<style>
#p7TBM ul, #p7TBM a {height: 1%}
#p7TBMroot ul {padding: 0 0;}
#p7TBMroot .p7TBMtext li a {display: inline-block;}
.p7TBMsub li {line-height: normal;}
.p7TBMsub li a {display: inline-block; margin: 0 0 12px 0;}
</style>
<![endif]-->
</div>
</div>
<div id="left"></div>
<div id="maincontent"><!-- TemplateBeginEditable name="EditRegion1" -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc.</p>
<p>Sed et lectus in massa imperdiet tincidunt. Praesent neque tortor, sollicitudin non, euismod a, adipiscing a, est. Mauris diam metus, varius nec, faucibus at, faucibus sollicitudin, lectus. Nam posuere felis ac urna. Vestibulum tempor vestibulum urna. Nullam metus. Vivamus ac purus. Nullam interdum ullamcorper libero. Morbi vehicula imperdiet justo. Etiam mollis fringilla ante. Donec et dui. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Etiam mi libero, luctus nec, blandit ac, rutrum ac, lectus.</p>
<p>Morbi consequat felis vitae enim. Nunc nec lacus. Vestibulum odio. Morbi egestas, urna et mollis bibendum, enim tellus posuere justo, eget elementum purus urna nec lacus. Nullam in nulla. Praesent ac lorem. Donec metus risus, accumsan ut, mollis non, porttitor eget, mi. Aliquam aliquet, tortor a elementum aliquam, erat odio sodales eros, suscipit blandit lectus dolor sit amet elit. In eros wisi, mollis vitae, tincidunt in, suscipit id, nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Phasellus ornare. Suspendisse potenti. Mauris convallis. Vestibulum nec mauris in augue porta mollis. Proin ut nunc. Mauris aliquam dui eget purus.</p>
<!-- TemplateEndEditable --></div>
<div id="box1"><img src="images/bud1.jpg" width="150" height="195" id="Image2" onmouseover="MM_swapImage('Image2','','images/bud2.jpg',1)" onmouseout="MM_swapImgRestore()" /> </div>
<div id="box2"><img src="images/bud2.jpg" width="150" height="195" id="Image3" onmouseover="MM_swapImage('Image3','','images/bud3.jpg',1)" onmouseout="MM_swapImgRestore()" /> </div>
<div id="box3"><img src="images/bud3.jpg" width="150" height="195" id="Image4" onmouseover="MM_swapImage('Image4','','images/bud1.jpg',1)" onmouseout="MM_swapImgRestore()" /> </div>
<div id="footer"> </div>
</div>
</body>
</html>



and the css

body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #000;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
font-family: Verdana, Geneva, sans-serif;
}
a {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}

#container {
width: 980px;
background-color: #000;
margin-right: auto;
margin-left: auto;
height: 830px;
}
#header {
margin-top: 5px;
margin-right: 30px;
margin-left: 30px;
width: 920px;
margin-bottom: 5px;
}

#scroller {
margin-top: 5px;
margin-right: 30px;
margin-left: 30px;
height: 50px;
width: 860px;
margin-bottom: 5px;
}
#navigation {
width: 920px;
margin-right: 30px;
margin-left: 30px;
height: 25px;
}

#left {
width: 150px;
margin-left: 30px;
margin-top: 10px;
float: left;
height: 195px;
background-color: #FF0;
}

#maincontent {
margin-left: 10px;
width: 590px;
float: left;
margin-top: 10px;
height: 605px;
background-image: url(images/main_content_bg.jpg);
padding-right: 5px;
padding-left: 5px;
}
#box1 {
width: 150px;
float: left;
margin-top: 10px;
margin-left: 10px;
height: 195px;
}

#box2 {
width: 150px;
float: left;
margin-left: 10px;
margin-top: 10px;
height: 195px;
}
#box3 {
float: left;
width: 150px;
margin-top: 10px;
margin-left: 10px;
height: 195px;
}
#footer {
clear: both;
float: left;
height: 50px;
width: 920px;
margin-top: 10px;
margin-right: 30px;
margin-left: 30px;
background-color: #F0F;
}
/*
-----------------------------------
TabBar Magic Style Sheet
by Project Seven Development
www.projectseven.com
Style Theme:08 - Pure Center
-----------------------------------
*/
#p7TBM {
font-family: Tahoma, Geneva, sans-serif;
}
#p7TBMroot {
font-size: .9em;
margin: 0 0 6px 0;
}
#p7TBMrootbox {
background-color: #000;
border: 1px solid #339F32;
}
#p7TBMroot img {
border: 0;
}
#p7TBMroot ul {
text-align: center;
margin: 0;
padding: 5px 0 5px 0;
}
#p7TBMroot li {
list-style-type: none;
display: inline;
}
#p7TBMroot li a {
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #339F32;
border-left-color: #339F32;
}
#p7TBMroot .p7TBMtext li a {
padding: 5px 10px 5px 10px;
color: #FFF;
text-decoration: none;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #339F32;
border-left-color: #339F32;
}
#p7TBMroot .p7TBMtext .p7TBMdown, #p7TBMroot .p7TBMtext .p7TBMdown:hover {
color: #339F32!important;
background-color: #000 !important;
border-color: #FFF !important;
}
/*
The Root Level Hover. This also locks the Hover state while
the root item's associated sub-menu is visible.
DO NOT CHANGE SELECTOR NAMES*/
.p7ie6Fix:active,
#p7TBMroot .p7TBMtext .p7TBMon,
#p7TBMroot .p7TBMtext li a:focus,
#p7TBMroot .p7TBMtext li a:active {
color: #339F32;
background-color: #000;
border-color: #FFF;
}
#p7TBMsubwrap{
font-size: .75em;
position: relative;
height: auto;
}
.p7TBMsub {
position: absolute;
visibility:hidden;
left: 0;
top: 0;
width: 100%;
text-align: center;
}
.p7TBMsubbox {

}
.p7TBMsub ul {
text-align: center;
margin: 0;
padding: 5px 0 5px 0;
background-image: url(p7tbm/img/iebfix.gif);
border: 0;
}
.p7TBMsub li {
list-style-type: none;
display: inline;
margin: 0 3px 0 0;
line-height: 2.5em;
}
.p7TBMsub li a {
padding: 5px 6px;
color: #FFF;
border: 1px solid #000;
background-color: #000;
}
.p7TBMsub li a:hover,
.p7TBMsub li a:active,
.p7TBMsub li a:focus {
color: #359E35;
background-color: #000;
text-decoration: none;
}
#p7TBM br {
display: none !important;
}
/* current marker style */
#p7TBM .p7TBMmark,
.p7TBMsub .p7TBMmark:hover,
.p7TBMsub .p7TBMmark:active,
.p7TBMsub .p7TBMmark:focus {
cursor: default;
}

gentleone
10-26-2010, 09:24 PM
Make from your div #left a sidebar which hold the divs you want to place underneath each other. Something like this:

<div id="left">

<div class="left-box">

</div>

<div class="left-box">

</div

<div class="left-box">

</div

</div>
CSS:

#left {
width: 150px;
margin-left: 30px;
margin-top: 10px;
float: left;
}

/* You don't have to position the .left-box, because they will use the normal flow to stack up each other. */

.left-box {
height: 195px;
background-color: #FF0;
margin-bottom: 10px;
}

kearnsy
10-27-2010, 09:02 AM
Cheers G.O.

I think i know what you mean

Extend the div.left, and put 3 smaller divs inside that one?

I originally had the left sided one with a length of 600 px but then thought i'd experiment with changing it into 3 smaller ones, and that's when i hit on the problem.

I'm guessing to 'wrap around selection' with the new divs inside the .left one?

time to get my hands dirty i think, trial & error

kearnsy
10-27-2010, 09:28 AM
Thanks G.O. that's done the trick