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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy Layout stacked instead of side-by-side

    I'm not the greatest but I can usually make things work how I want them to, however, I'm perplexed on how to get these two divs beside of each other.

    The page is here: http://www.quadranthomes.com/findyou...rhoodmap_2.php

    A correct(er) version is here: http://www.quadranthomes.com/findyou...it/index_2.php
    In the correcter version you can see that they are side-by-side. In the broken page, you can see that I made the left column skinnier and the right side wider. But, pixel-wise, they should fit side by side. I don't know what I've done wrong. So, hi.


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="ROBOTS" content="ALL" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="description" content="Find new homes in Mount Vernon, WA, along with Mount Vernon real estate facts and new home construction information for the Seattle, Washington area." />
    <meta name="keywords" content="mount vernon wa new homes, mount vernon homes, homes for sale mount vernon, mt vernon homes, burlington homes, burlington real estate" />
    <title>Mount Vernon, WA Homes: New Homes in Mt. Vernon - Quadrant Homes</title>
    
    <link href="_css/style_2.css" rel="stylesheet" type="text/css" />
    <link href="_css/layout.css" rel="stylesheet" type="text/css" />
    <script src="_src/mz-packed.js" type="text/javascript"></script>
    <!--[if lt IE 7]>
    	<link href="ie_style.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="ie_png.js"></script>
       <script type="text/javascript">
           ie_png.fix('.png');
       </script>
    <![endif]-->
    </head>
    
    <body id="page1" class="main-bg1">
    	<div id="main">
    		<!-- header -->
    		<div id="header">
    			<div class="logo">
             	<h1>&nbsp;</h1>
             </div>
             <ul class="nav">
             	<li><a href="../index.php">FIND YOUR HOME </a></li>
                <li><a href="../../showroom/index.php">SHOWROOM</a></li>
                <li><a href="../../contactus/index.php">CONTACT US</a></li>
                <li><a href="../../agents/index.php" class="last">FOR AGENTS </a></li>
             </ul>
             <div class="slogan">Skagit Highlands </div>
    		</div>
    		<!-- content -->
    		<div id="content">
    			<div class="row-1">
             	<div class="wrapper">
                   <!-- box1 begin -->
                   <div class="box1 png">
                      <div class="inner">
                      	<ul>
                         	<li><a href="index.php">Skagit Highlands  </a></li>
                            <li><a href="index.php">Our Floor Plans </a></li>
                            <li><a href="../buildyourhome.php?com=skagithighlands">Build Your Home </a></li>
                            <li><a href="index.php">Driving Directions </a></li>
                            <li><a href="index.php">Community Map </a></li>
                            <div align="center"><img src="images/chaticon.png" alt="Chat with a Representative" width="139" height="119" />                            </div>
                      	</ul>
                     </div>
                   </div>
                   <!-- box1 end -->
                   <!-- box2 begin -->
                   <div class="box2 png">
                      <div class="inner">
                      	<!-- banner-box begin -->
                        <div class="banner-box bg1">
                          <script type="text/javascript" src="../../_images/rotator/swfobject.js"></script>
    	<embed src="../../_images/rotator/imagerotator.swf" width="577" height="288" allowscriptaccess="always" flashvars="file=rotator/hero_rotator.xml&transition=fade&shownavigation=false&allowfullscreen=false&linkfromdisplay=true&backcolor=0xFFFFFF&rotatetime=4&shuffle=false&screencolor=0xFFFFFF" />
    	</a></div>
                         <!-- banner-box begin -->
                      </div>
                   </div>
                   <!-- box2 end -->
                </div>
             </div>
             <div class="row-2">
             	<!-- content-box1 begin -->
               <div class="content-box1 png">
                	<div class="inside">
                   	<div class="wrapper">
                      	<div class="map-1">
                       	  <ul class="list1">
                              <li>
    							<a href="images/SKH_Div1_big.jpg" rel="zoom1" rev="images/SKH_Div1_small.jpg" title="Move the cursor around to explore your future homesite!"><h3>Division I</h3></a>
    						  </li>
    						  <li>
    						  	<a href="images/SKH_Div2_big.jpg" rel="zoom1" rev="images/SKH_Div2_small.jpg" title="Move the cursor around to explore your future homesite!"><h3>Division II</h3></a></li>
    						  <li>
    						  	<a href="images/SKH_Div5_big.jpg" rel="zoom1" rev="images/SKH_Div5_small.jpg" title="Move the cursor around to explore your future homesite!"><h3>Division V</h3></a></li>
                              </li>
                         	</ul>
                      </div>
                         <div class="map-2">
    	                   <a href="images/SKH_Div5_big.jpg" title="Move the cursor around to explore your future homesite!" id="zoom1" rel="zoom-position: inner" class="MagicZoom" style="cursor: crosshair"><img src="images/SKH_Div5_small.jpg"/></a>
                      </div>
                      </div>
                   </div>
                </div>
                <!-- content-box1 end -->
             </div>
    		</div>
    		<!-- footer -->
    	  <div id="footer">
          	<ul class="footer-nav">
             	<li><a href="../../index.php">Quadrant Home Page</a>|</li>
                <li><a href="../../privacy.php">Privacy Policy</a>|</li>
                <li><a href="../../sitemap.php">Site Map</a>|</li>
                <li>&copy; 2009 Quadrant Homes. All Rights Reserved</li>
          	</ul>
          </div>
    	</div>
    </body>
    </html>

  • #2
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    put float:left; on map-1 and map-2 class

  • Users who have thanked seco for this post:

    JonnyFiveAlive (08-18-2009)

  • #3
    Regular Coder noneforit's Avatar
    Join Date
    Apr 2009
    Location
    England
    Posts
    268
    Thanks
    10
    Thanked 20 Times in 20 Posts
    Assuming you mean the map and the Division 1, Division 2 etc buttons then I did this and it lined up ok:

    Changes added in red:

    Code:
    #page1 #content .map-1 { width:230px; margin-right:10px; float:left}
    #page1 #content .map-2 { width:580px; float:right; margin-right:8px}

  • Users who have thanked noneforit for this post:

    JonnyFiveAlive (08-18-2009)

  • #4
    New to the CF scene
    Join Date
    Aug 2009
    Posts
    2
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Quite right. Is there a benefit to using one vs. the other? I put float left in and solved it, but thank you equally for your post as well, laurie

  • #5
    Regular Coder seco's Avatar
    Join Date
    Nov 2008
    Location
    Oregon
    Posts
    687
    Thanks
    6
    Thanked 79 Times in 77 Posts
    since you have a margin-right on map-1 you can use float left on both. with float right on the right block you have to set a margin right to map-2 hence writing more code. no use for float right in this situation.


  •  

    Posting Permissions

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