SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Talking Dividing Up the Page Into Three

    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?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    So, I could do something like:
    Code:
    <div class="columns"><!-- left-side window content --></div>
    <div class="columns"><!-- main window content --></div>
    <div class="columns"><!-- right-side window content --></div>
    then
    Code:
    .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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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

  5. #5
    Non-Member
    Join Date
    Apr 2011
    Location
    no fixed address
    Posts
    851
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


    Code:
            
    <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>

  6. #6
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:
    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" />
    <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">&nbsp;</div>
    <div id="middle">
    <div id="header">&nbsp;</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&eacute; 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 &amp; 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">&nbsp;</div><!-- end footer div -->
    <h3 class="copytagatbottom">&copy;AtlantaReviewGroup.com<br />Updated August 3, 2011</h3>
    </div>
    <div id="rightside">&nbsp;</div>
    </body>
    </html>
    CSS:
    Code:
    @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;
    }

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.)

  8. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    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.

  9. #9
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    #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;
    }

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,513
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.
    Code:
    .wrap{
    	width:1218px;
    	margin:auto;
    	overflow:hidden;
    	}
    Code:
    <body>
    <div class="wrap">
     <div id="leftside">&nbsp;</div> 
     <div id="middle">
    
      ....
    
     </div>
     <!-- end wrapping div --> 
     </div>
     <!-- end body div -->
     <div id="footer">&nbsp;</div>
     <!-- end footer div -->
     <h3 class="copytagatbottom">&copy;AtlantaReviewGroup.com<br />
    				Updated August 3, 2011</h3>
     </div>
     <div id="rightside">&nbsp;</div>
    </div>
    </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.

  11. #11
    SitePoint Guru etidd's Avatar
    Join Date
    May 2011
    Location
    atlanta, ga
    Posts
    632
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.


Tags for this Thread

Bookmarks

Posting Permissions

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