View Full Version : Layout stacked instead of side-by-side

Aug 18th, 2009, 11:33 PM
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/findyourhome/New_Skagit/neighborhoodmap_2.php

A correct(er) version is here: http://www.quadranthomes.com/findyourhome/New_Skagit/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.

<!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">

<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">

<body id="page1" class="main-bg1">
<div id="main">
<!-- header -->
<div id="header">
<div class="logo">
<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>
<div class="slogan">Skagit Highlands </div>
<!-- content -->
<div id="content">
<div class="row-1">
<div class="wrapper">
<!-- box1 begin -->
<div class="box1 png">
<div class="inner">
<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>
<!-- 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" />
<!-- banner-box begin -->
<!-- box2 end -->
<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">
<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>
<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>
<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>
<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>
<!-- content-box1 end -->
<!-- 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>

Aug 18th, 2009, 11:38 PM
put float:left; on map-1 and map-2 class

Aug 18th, 2009, 11:43 PM
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:

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

Aug 18th, 2009, 11:51 PM
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

Aug 19th, 2009, 12:03 AM
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.