Hello all,
I really think I need to take more advantage of the width of this home page by sectioning it into three. This is for the page at Atlanta Review Group- Product Articles.
Would I section it into three by having 3 divs using float:left or something?
So, I could do something like:
<div class="columns"><!-- left-side window content --></div>
<div class="columns"><!-- main window content --></div>
<div class="columns"><!-- right-side window content --></div>
then
.columns{float:left; /*other styles*/}
this was a wild guess. i would like to put a background image on the left and right window sides. I’m still pretty lost.
The gifs might be better off not being on the floats anyway. Otherwise, if there’s a lot of text in the floats, to get backgrounds showing without text over the top you’d need to increase the floats’ widths even more by adding padding to them. Which means more math headaches, and I’m lazy and don’t like math.
The two images might be better off on, say, the body and the container. So on the body it’d be like 0 50% (left size, half-way down) and on teh container it’d be like 100% 50% (right side, half-way down).
Then the floats only have to worry about the stuff inside them, and then if the container or the screen or whatever gets too small and teh last (right) float drops, the background image at least isn’t affected too.
Hi,
I’m not sure what you are trying to do there exactly.
The floats have no width or height so no background will show anyway. You don’t usually add floats just to apply backgrounds but I’d need to see the finished design to advise the best way to proceed.
(Unfortunately my computer has packed up so I will be offline most of the next few days while I set up a new one so hopefully someone else will jump in if you are still stuck.)
I have two gif images for background images for div’s with id of “leftside” and “rightside”. I tried arranging them with floats with backgrounds. They appear in the back, but not to the side. I just updated my site at Atlanta Review Group- Product Articles, but if you can’t see all the code…
HTML:
<!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" />
<meta name="Description" content="You can find product reviews here for internet products and services. This is an unbiased site that exposes bad products and promotes the good ones." />
<meta name="Keywords" content="keyword1, keyword2,..." />
<meta http-equiv="Content-Language" content="en" />
<link href="style/main.css" rel="stylesheet" type="text/css" media="screen,projection,tv" />
<link href="style/dropdownmenus.css" rel="stylesheet" type="text/css" media="screen" />
<title>Atlanta Review Group- Product Articles</title>
</head>
<body>
<div id="leftside"> </div>
<div id="middle">
<div id="header"> </div><!-- end header div -->
<div id="body">
<p id="welcomestatement">Hello everyone, <br /> This site is dedicated to consumer reviews on current products in many different markets. This site is here to promote the good ones and expose the bad ones. Thank you for visiting!</p>
<div id="wrapper"><!-- begin Personal navigation menu -->
<ul id="pMenu">
<li><a href="http://www.atlantareviewgroup.com/health.html">health</a>
<div id="health">
<h2>weight loss</h2>
<h3><span>fitness</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/health/fitness/weiderpowerbell1.html">Weider PowerBell</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/fitness/brazilbuttlift1.html">Brazil Butt Lift</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/fitness/georgesstpierre1.html">MMA Training with Georges St. Pierre</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/fitness/turbofire1.html">TurboFire Fitness</a></li>
</ul>
<h3><span>dieting</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/health/dieting/healthetrimdiet1.html">Healthé Trim Diet</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/dieting/southbeach1.html">South Beach Diet</a></li>
</ul>
<h2>skin care</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/health/skincare/shivaacne1.html">Shiva23 Acne Cream</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/skincare/deadseamineral1.html">Dead Sea Mineral Cellulite Treatment</a></li>
</ul>
<h2>supplements</h2>
<h3><span>vitamins</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/health/Rx/nutrilitevitamins1.html">Nutrilite Multivitamins</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/Rx/dochangover1.html">Doc Hangover Cure</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/Rx/libigrow1.html">Libigrow</a></li>
</ul>
<h3><span>stop smoking</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/health/Rx/smokedeter1.html">Smoke Deter</a></li>
<li><a href="http://www.atlantareviewgroup.com/health/ecig1.html">Electronic Cigarettes</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/insurance.html">insurance</a>
<div id="insurance">
<h2>home/property insurance</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/insurance/homeinsurance1.html">LowerMyHomeInsuranceRate.com</a></li>
</ul>
<h2>auto insurance</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/insurance/save5001.html">Save500.com</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/usinsuranceauto1.html">USInsuranceOnline.com- Auto</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/quotewizard1.html">Quote Wizard</a></li>
</ul>
<h2>health insurance</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/insurance/healthquoteinsider1.html">Health Quote Insider</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/cobraalternatives1.html">COBRA Alternatives to Health Insurance</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/usinsurancehealth1.html">USInsuranceOnline.com- Health</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/quoteit4me1.html">Quote It 4 Me- Health Insurance</a></li>
</ul>
<h2>life insurance</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/insurance/lifequoteinsider1.html">Life Quote Insider</a></li>
<li><a href="http://www.atlantareviewgroup.com/insurance/usinsurancelife1.html">USInsuranceOnline.com- Life</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/general.html">general</a>
<div id="general">
<h2>electronics</h2>
<h3><span>gaming</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/gaming/haltgame1.html">Haltgame 3D</a></li>
<li><a href="http://www.atlantareviewgroup.com/gaming/battlestargalactica1.html">Battlestar Galactica</a></li>
<li><a href="http://www.atlantareviewgroup.com/gaming/gsn1.html">GSN Gaming</a></li>
</ul>
<h3><span>electronic gadgets</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/electronics/kindle1.html">Kindle e-Reader</a></li>
</ul>
<h2>style & fashion</h2>
<h3><span>make up</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/makeup/dinair1.html">Dinair Airbrush Makeup</a></li>
<li><a href="http://www.atlantareviewgroup.com/makeup/simplykaren1.html">Simply Karen</a></li>
</ul>
<h2>food/dining</h2>
<h3><span>net grocers</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/food/efooddepot1.html">eFood Depot</a></li>
<li><a href="http://www.atlantareviewgroup.com/food/peapod1.html">Peapod</a></li>
</ul>
<h3><span>coupons</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/coupons/brandcaster1.html">Brandcaster Coupons</a></li>
</ul>
<h2>cars/auto</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/auto/carfax1.html">Carfax Vehicle History Reports</a></li>
<li><a href="http://www.atlantareviewgroup.com/auto/carprices1.html">CarPrices.com</a></li>
</ul>
<h2>security</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/security/adtalarm1.html">ADT Alarm System</a></li>
</ul>
<h2>hobby</h2>
<h3><span>music</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/guitartricks1.html">GuitarTricks</a></li>
<li><a href="http://www.atlantareviewgroup.com/jamorama1.html">Jamorama- Learn Guitar</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/dating.html">dating</a>
<div id="dating">
<ul>
<li><a href="http://www.atlantareviewgroup.com/dating/realmaturesingles1.html">RealMatureSingles</a></li>
<li><a href="http://www.atlantareviewgroup.com/dating/seniorpeoplemeet1.html">SeniorPeopleMeet</a></li>
<li><a href="http://www.atlantareviewgroup.com/dating/adultfriendfinder1.html">Adult Friend Finder</a></li>
<li><a href="http://www.atlantareviewgroup.com/dating/benaughty1.html">BeNaughty.com</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/education.html">education</a>
<div id="education">
<ul>
<li><a href="http://www.atlantareviewgroup.com/education/scholzone1.html">Scholarship Zone</a></li>
<li><a href="http://www.atlantareviewgroup.com/education/speedstudytechniques1.html">Speed Study Techniques</a></li>
</ul>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/legal.html">legal</a>
<div id="pLegal">
<h2>mortgage</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/mortgage/foreclosurefighter1.html">Home Foreclosure Fighter</a></li>
<li><a href="http://www.atlantareviewgroup.com/mortgage/fastcash4homes1.html">Fast Cash 4 Homes</a></li>
</ul>
<h2>debt</h2>
<h3><span>bankruptcy</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/debt/evalbankruptcy1.html">Evaluate Bankruptcy</a></li>
</ul>
<h3><span>credit debt</span></h3>
<ul>
<li><a href="http://www.atlantareviewgroup.com/debt/debtnegotiator1.html">Debt Negotiator</a></li>
</ul>
<h2>DUI</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/legal/DUIattorney1.html">DUI Attorney</a></li>
</ul>
</ul>
<!-- end Personal navigation menu-->
<!-- begin Business navigation menu-->
<ul id="bMenu">
<li><a href="http://www.atlantareviewgroup.com/bizopps.html">business opportunities</a>
<div id="bizopps">
<ul>
<li><a href="http://www.atlantareviewgroup.com/bizopps/freesitesignup1.html">Cash-Pulling Affiliate Marketing Websites</a></li>
<li><a href="http://www.atlantareviewgroup.com/bizopps/anthonymorrison1.html">Anthony Morrison's Big Profits Secret</a></li>
</ul>
<h2>affiliate marketing</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/bizopps/mobilemassmoney1.html">Mobile Mass Money</a></li>
<li><a href="http://www.atlantareviewgroup.com/bizopps/autopilothomeprofits.html">Autopilot Home Profits</a></li>
</ul>
<h2>start your own business</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/bizopps/milliondollarpips1.html">Pips Forex Trading Robot</a></li>
<li><a href="http://www.atlantareviewgroup.com/bizopps/pennystockprophet1.html">The Penny Stock Prophet</a></li>
</ul>
<h2>trading/investing</h2>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/bizservices.html">business services</a>
<div id="bizservices">
<ul>
<li><a href="http://www.atlantareviewgroup.com/bizservices/1choicesolutions.html">Telecom Master Quote Agency</a></li>
</ul>
<h2>technology solutions</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/bizservices/projmgmttemplates1.html">Project Management Templates</a></li>
</ul>
<h2>project management</h2>
</div>
</li>
<li><a href="http://www.atlantareviewgroup.com/legal.html">legal services</a>
<div id="legal">
<ul>
<li><a href="http://www.atlantareviewgroup.com/legal/bankruptcy1.html">Bankruptcy Attorney Finder</a></li>
</ul>
<h2>bankruptcy</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/legal/willcreator1.html">Create My Will</a></li>
</ul>
<h2>personal will</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/legal/divorcedocuments1.html">Divorce Documents</a></li>
</ul>
<h2>divorce</h2>
<ul>
<li><a href="http://www.atlantareviewgroup.com/legal/personalinjury1.html">Personal Injury Attorneys</a></li>
</ul>
<h2>personal injury</h2>
</div>
</li>
</ul>
<!-- end Business navigation menu-->
</div><!-- end wrapping div -->
</div><!-- end body div -->
<div id="footer"> </div><!-- end footer div -->
<h3 class="copytagatbottom">©AtlantaReviewGroup.com<br />Updated August 3, 2011</h3>
</div>
<div id="rightside"> </div>
</body>
</html>
CSS:
@charset "utf-8";
/* CSS Document */
html, body,
h1, h2, h3, h4, h5, h6, p, img,
form, fieldset, legend, label, textarea,
table, tbody, td, tfoot, th, thead, tr, tt,
dl, dt, dd, ol, ul, li {
margin: 0;
padding: 0;
}
body{
background-image: url(bg.jpg);
background-position:top center;
background-color:#FFF;
background-repeat: repeat;
margin:0 auto;
}
#leftside{
background:url("leftsidehomepage.gif") no-repeat scroll 50% 5px transparent;
float:left;
}
#middle{float:left;}
#rightside{
background:url("rightsidehomepage.gif") no-repeat scroll 50% 5px transparent;
float:right;
}
#header{
background-image:url(header.jpg);
background-repeat:no-repeat;
width:626px;
height:206px;
text-align: center;
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
margin:0 auto;
padding:0 auto;
}
#welcomestatement{
display:block;
background-color:#FF9;
text-align:left;
padding:3px 20px;
border-bottom:2px inset #F8CB87;
margin:auto;
width:400px;
position:relative;
top:10px;
text-shadow:1px 1px 1px #000;
/*for IE*/
filter:alpha(opacity=50);
/*standard CSS3*/
opacity:0.5;
}
#body{
background-image:url(body.jpg);
width:626px;
text-align: center;
margin:0 auto;
}
#footer{
background-image:url(footer.jpg);
width:626px;
height:60px;
text-align: center;
margin:0 auto;
padding:0;
}
.redshadow{
color:#CCC;
font-size:16px;
font-family:Verdana, Geneva, sans-serif;
text-shadow: 0px 0px 2px #900, 0px -7px 30px #966, 0px -14px 60px;
}
p.redshadow {
color:white;
margin-left:20%;
margin-right:20%;
}
#blueshadow{
font-size:24px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
text-align:center;
vertical-align:bottom;
text-shadow:0 0 4px #09F, 0 -5px 15px #009;
margin:0;
padding-top:.8em;
}
.whitebox{
color:#000;
text-shadow:1px 1px 1px #000;
display:block;
background:#FFF;
border:6% inset #CCC;
width:70%;
height:auto;
padding:2%;
/*for IE*/
filter:alpha(opacity=50);
/*standard CSS3*/
opacity:0.5;
}
#pMenuBG{
position:relative;
top:75px;
background-image:url(/style/pMenuBG.gif);
background-repeat:no-repeat;
}
#realmaturesingles{
text-decoration:none;
font-family:Impact;
font-size:3em;
color:#CF0;
right:-6%;
top:-1em;
}
#seniorpeoplemeet{
text-decoration:none;
font-family:Tahoma, Geneva, sans-serif;
font-size:3em;
color:#FF0;
right:-39%;
top:-.2em;
}
.copytagatbottom{
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
text-shadow:1px 1px 1px #000;
text-align:center;
color:#000;
display:block;
background-color:#FFF;
width:200px;
margin:0 auto;
padding:2px;
padding-bottom:4px;
border:1px dashed #6B6B6B;
letter-spacing:1.5;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
#lowerheader tr td #redshadow b {
font-size: 16px;
}
Okay I updated my files at Atlanta Review Group- Product Articles. That will show you a basis (at least on the left side) of what I am going for. I want the middle div to be directly in the center, thus the page will be spread out farther and, for many users, this should generate a horizontal scroll bar as the images surpass their screen’s capacity.
I don’t even know why the rightside div appears at the very bottom of the right side of the screen.
Here’s what I changed to get to this point:
#leftside{
background:url("leftsidehomepage.gif") no-repeat scroll 50% 5px transparent;
float:left;
height:500px;
width:300px;
}
#middle{
float:left;
width:600px;
margin:0 auto; }
#rightside{
background:url("rightsidehomepage.gif") no-repeat scroll 50% 5px transparent;
float:right;
height:500px;
width:300px;
}
This code has 2 columns side by side for the main content and it uses javascript to set the heights of the 2 columns to the height of the tallest column. You can add more columns to the two there and adjust the widths accordingly.
You could also set equal column height using just css (without js) but the html and css are then a little more complicated and not as intuitive.
<style type="text/css">
ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type: none}
#container {
border: 1px solid red;
width: 800px;
overflow: hidden;
margin: 0px auto 0px auto;
padding: 20px 20px 20px 20px}
/* sidebar's and content's padding values must be the same */
#sidebar {
margin: 0px 0px 0px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid green;
float: left;
width: 250px}
#content {
margin: 0px 0px 10px 0px;
padding: 10px 10px 10px 10px;
border: 1px solid blue;
float: right;
width: 490px}
#content div {
margin: 0px 0px 0px 0px;
padding: 0px 0px 70px 0px;
}
</style>
<script type="text/javascript">
window.onload=function() {
var maxHeight = 0;
//get the column containers
var colsA = document.getElementById("container").childNodes;
//get the height of the tallest column
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].clientHeight > maxHeight) maxHeight = colsA[i].clientHeight;
}
//set all the column containers heights to maxHeight
for(var i=0; i < colsA.length; i=i+1) {
if(colsA[i].nodeType == 1) colsA[i].style.height = maxHeight+'px';
}
}
</script>
</head>
<body>
<div id="container">
<div id="sidebar">
<ul id="menu_list">
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
</div>
<div id="content">
<div>
Lorem ipsum dolor sit amet, tellus et. Molestie auctor nisl faucibus ut, lorem tortor mattis, fusce nullam enim fringilla vel.
Mauris vitae gravida dolor praesent. Id in nascetur aut odio, nam et. Pede libero bibendum sit felis pretium sodales, fusce
pharetra vestibulum bibendum morbi ultricies nullam, est nulla, id amet mollis. Nec consectetuer urna dapibus luctus ut,
ipsum nascetur consequat dapibus dui ac molestie, est nascetur id nec nunc. Mi etiam mauris facilisi sed, nec ut id,
aliquam non, taciti donec ut. Risus integer hymenaeos velit, nisl suspendisse sollicitudin ut, sed tempor sagittis curae dolor,
volutpat massa ut sagittis. Voluptatem a enim, lobortis lectus volutpat, vitae vero diam purus morbi class, tristique donec
ante sed, ac turpis dis dui vestibulum aut.
</div>
</div>
</div>
</body>
I assume you have a fixed width so give each float a width and then you should be good to go.
You can apply image backgrounds to the columns but don’t expect all columns t be automatically equal.
You haven’t really given us a lot to go on to give more specific help but have a bash yourself first 
Hi,
I’m not seeing the rightside gif at the bottom of the screen. It’s a the top but at the far right unless you close the window smaller and then the float will drop.
If you don;t want the float to drop then wrap all those three elements in a div and give the div the combined with of all three elements and use margins aut to center it.
e.g.
.wrap{
width:1218px;
margin:auto;
overflow:hidden;
}
<body>
[B]<div class="wrap">[/B]
<div id="leftside"> </div>
<div id="middle">
....
</div>
<!-- end wrapping div -->
</div>
<!-- end body div -->
<div id="footer"> </div>
<!-- end footer div -->
<h3 class="copytagatbottom">©AtlantaReviewGroup.com<br />
Updated August 3, 2011</h3>
</div>
<div id="rightside"> </div>
[B]</div>[/B]
</body>
</html>
That page is a little wide now though. Are you putting content into those left and right side elements? If so be careful as fixed height containers and fluid text do not work well together.
Yes you would usually float three columns and then stack each column with the content as required. It all depends on the design of course and what you want to achieve.
I don’t think I will be putting much content in there. I was thinking about a bulleted list with a header containing the text “Most Popular” for example. Maybe I will end up lowering these left and right side windows in size. I don’t know. Just trying to bring to creation the visions I have for my website.