...

View Full Version : Having troubles with 3 columns



plattenumdesign
04-09-2009, 12:05 AM
im tryin to put my ads on the right and my sidebar on the left but everytime i do it shows up like this

http://plattenumdesigns.com/index2.html

it is right above my ads "Sidebar 2" is what it says.

ive tried moving my div id but it throws everything off.

i want it to be like this

[SIDEBAR] [MAIN CONTENT] [ADS]
[SIDEBAR] [MAIN CONTENT [ADS]
[SIDEBAR] [MAIN CONTENT] [ADS]
[SIDEBAR] [MAIN CONTENT] [ADS]
[ FOOTER FOOTER FOOTER FOOTER ]

Could somebody help me out with this problem i am having.

here is the link once again
http://plattenumdesigns.com/index2.html

Excavator
04-09-2009, 12:19 AM
Hello again plattenumdesign,
Your box model is off, as well as the order of your floats. Try this -
CSS
body, html {
color:#000;
background-color:#CCCCCC;
width:998px;
margin:12px;
}
* {
margin:0;
padding:0;
}
#wrap {
background:#CCCCCC;
margin:0 auto;
width:998px;
}
#sidebar2 {
background:#ffffff;
float:left;
width:120px;
}
#sidebar {
background:#ffffff;
float:right;
width:120px;
}
#main {
width:758px;
margin: 0 auto;
background-color:#FFFFFF;
text-align:center;

}

markup

<!-- BEGIN WRAPPER-->
<div id="wrap">

<!-- BEGIN HEADER-->
<div id="header">

<!-- END HEADER-->

</div>

<ul id="nav">
<li><a href="index.html" class="H">HOME</a></li>
<li><a href="portfolio.html" class="P">PORTFOLIO</a></li>
<li><a href="portfolio.html" class="L">LAYOUTS</a></li>
<li><a href="portfolio.html" class="T">TEMPLATES</a></li>
<li><a href="portfolio.html" class="F">FREEBIES</a></li>
<li><a href="portfolio.html" class="C">CONTACT ME</a></li>
</ul>
</div>
<div id="sidebar2">
Side bar
</div>
<div id="sidebar">
<!-- Begin: AdBrite, Generated: 2009-04-08 14:33:50 -->
<script type="text/javascript">
var AdBrite_Title_Color = 'FFFFFF';
var AdBrite_Text_Color = 'E6E6E6';
var AdBrite_Background_Color = '000000';
var AdBrite_Border_Color = '000000';
var AdBrite_URL_Color = 'FFFFFF';
try{var AdBrite_Iframe=window.top!=window.self?2:1;var AdBrite_Referrer=document.referrer==''?document.location:document.referrer;AdBrite_Referrer=encodeUR IComponent(AdBrite_Referrer);}catch(e){var AdBrite_Iframe='';var AdBrite_Referrer='';}
</script>
<script type="text/javascript">document.write(String.fromCharCode(60,83,67,82,73,80,84));document.write(' src="http://ads.adbrite.com/mb/text_group.php?sid=976736&zs=3132305f363030&ifr='+AdBrite_Iframe+'&ref='+AdBrite_Referrer+'" type="text/javascript">');document.write(String.fromCharCode(60,47,83,67,82,73,80,84,62));</script><script src="http://ads.adbrite.com/mb/text_group.php?sid=976736&amp;zs=3132305f363030&amp;ifr=1&amp;ref=http%3A%2F%2Fwww.plattenumdesigns.com%2Findex2 .html" type="text/javascript"></script>
<div><a target="_top" href="http://www.adbrite.com/mb/commerce/purchase_form.php?opid=976736&amp;afsid=1" style="font-weight: bold; font-family: Arial; font-size: 13px;">Your Ad Here</a></div>
<!-- End: AdBrite -->






</div>
<div id="main">
<p>

MAIN<br>
MAIN
MAIN
MAIN<br>
MAIN
</p>
</div>


<div id="footer">
WEBSITE DESIGNED AND CODED BY PLATTENUMDESIGNS.COM 2009
</div>

plattenumdesign
04-09-2009, 12:28 AM
hello again Excavator

does this look about right?

http://plattenumdesigns.com/index2.html

Excavator
04-09-2009, 12:43 AM
Seems to work fine here, I checked in FF3 and added text to each of the 3 columns and it behaves like it should.
Didn't check any of the IE's.

plattenumdesign
04-09-2009, 12:45 AM
Seems to work fine here, I checked in FF3 and added text to each of the 3 columns and it behaves like it should.
Didn't check any of the IE's.



ok, well i will check that out also,

thanks alot for all the help lol you have helped me out alot!

really appreciate your help.

plattenumdesign
04-09-2009, 03:30 PM
the only thing that is wrong and i cant figure out is the Main container is out of position in IE ive tried a couple ways of fixing it but nothing has worked.


http://www.plattenumdesigns.com/index2.html
here is the image from IE

http://i39.tinypic.com/25rcl8j.jpg

Excavator
04-09-2009, 04:45 PM
Sorry I didn't look at that in IE6 plattenumdesign. Looks like the IE6 double margin bug (http://www.positioniseverything.net/explorer/doubled-margin.html)but not quite.
Just have to approach it a little differently. Does it work if you make your CSS look like this? -


#main {
width:818px;
float: left;
background-color:#FFFFFF;
text-align:center;

}

plattenumdesign
04-10-2009, 03:25 AM
wow! thanks alot lol your a Pro when it comes to CSS and HTML.

it is fixed now, thanks for your help



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum