#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0

    Need help with basic 2 column div positioning


    Hi there,

    1. I am attempting to make this index.html site at:
    www.pmdm.co

    into a 2 column layout, with my photo going on the right side of the text. However, currently, it is simply displaying at the bottom of the site. I need it moved over, so that it fits to the right of the text. How would I do that?

    2. Another issue I am having is that due to the absolute positioning of my logo in the upper left hand orner, my page isn't rendering correctly on phones. So, I need it to expand and contract with screensize, and maintain relative positioning like the rest of the site. How would I do that?

    Thanks a ton for any and all help!

    index.php page:
    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" />
    <title>Patrick Meaney Designs</title>
    
    
    <link rel="stylesheet" type="text/css" href="styles.css"  >
    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    
    <script type="text/javascript" src="thumbslide.js">
    
    // Thumbnail Slider- by JavaScript Kit (www.javascriptkit.com)
    // Visit JavaScript Kit at http://www.javascriptkit.com/ for full source code
    
    </script>
    <link rel="stylesheet" type="text/css" href="thumbslide.css" />
    
    <script>
    
    //Initialization code:
    $(document).ready(function(){ // on document load
    		
    		$("#thumbsliderdiv").imageSlider({ //initialize slider
    			'thumbs': [
    			"fpslideshowphp/graphicDesignPortfolio/acclivity2_10.jpg",
    			"fpslideshowphp/graphicDesignPortfolio/gadgetTreeLogo.png",
    			"fpslideshowphp/graphicDesignPortfolio/pmlogo_edits.png",
    			"fpslideshowphp/graphicDesignPortfolio/pm_edits.png",
    			"fpslideshowphp/graphicDesignPortfolio/gtc1.jpg",
    			"fpslideshowphp/graphicDesignPortfolio/gtc2.jpg",
    			"fpslideshowphp/graphicDesignPortfolio/gtc3.jpg",
    			"fpslideshowphp/graphicDesignPortfolio/vanadiaSite.jpg"
    			], // file names of images within slider. Default path should be changed inside thumbslide.js (near bottom)
    			'auto_scroll':true,
    			'auto_scroll_speed':4500,
    			'stop_after': 2, //stop after x cycles? Set to 0 to disable.
    			'canvas_width':620,
    			'canvas_height':500 // <-- No comma after last option
    			})
    	});
    
    </script>
    
    
    </head>
    
    <body>
    <div id="container">
    
    <div id="topbarL"><img src="images/logo.jpg" usemap="#Map2" border="0" />
      <map name="Map2" id="Map2">
        <area shape="poly" coords="113,3,155,3,164,22,169,41,169,61,157,69,163,95,168,133,149,177,132,189,143,225,135,237,105,237,96,223,69,224,51,237,39,237,4,237" href="#" alt="Patrick Meaney Designs Peacock Logo" />
      </map>
    </div>
    
    <div id="topbarR"><img src="images/banner.jpg" usemap="#Map" border="0" />
      <map name="Map" id="Map">
        <area shape="rect" coords="4,6,380,184" href="index.php" alt="Patrick Meaney Designs Banner" />
        <area shape="rect" coords="387,65,747,106" href="#" alt="Web Content Management" />
        <area shape="rect" coords="566,109,745,145" href="#" alt="Copyrighting" />
        <area shape="rect" coords="535,149,745,187" href="#" alt="Graphic Design" />
      </map>
    </div>
    
    <div id="navbar">
    <? include 'dropdown_nav.php' ?>
    </div>
    <div id="contentwrapper">
    <div id="indexPageLeftTextColumn">
    <hr />
    <br />
    <h1>Welcome to Patrick Meaney Design & Marketing</h1>
    <h2></h2>
    <p><br />
    I am a graphic designer and marketing professional located in Austin, Texas.
    <br /><br />
     I enjoy helping businesses and individuals develop their marketing collateral, specifically web content, such as graphics and articles (including  copyrighted product descriptions and topic-focused blogs).
    <br /><br />
    My style is minimalist, which is why I enjoy an occasional watercolor painting session.
    <br /><br />
    Having conquered Adobe Illustrator and Photoshop, I am now learning web development, with a particular interest in online database development
     for its importance in e-commerce, social media, and e-education.
    <!-- The gallery below features some of my work for clients, including logo design, business card design, and basic web design.-->
    
    
    </p>
    <br /><br />
    <h2>"Your integrity is your destiny - it is the light that guides your way. </h2>
    <h3>~ Heraclitus (Greek Philosopher, 5th Century BCE)</h3>
    <hr />
    </div>
    <div id="indexPageRightImageColumn">
    <img src="images/patheadshot3.jpg" />
    </div>
    </div>
    <!-- Don't remove spacer div. Solve an issue about container height -->
    <div class="spacer"></div>
    <div id="footer"> 2013 Patrick Meaney Designs</div>
    </div>
    </body>
    </html>
    styles.css page:
    Code:
    /*  CSS Document */
    
    
    /* ------------------------------
    HTML Redefine Tags
    ------------------------------ */
    body { padding: 5px; font-family: Helvetica, Arial, sans-serif; } 
    /* body{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin:20px; padding:0;} */
    
    input, form, textarea
    h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
    h1{font-size:18px;}
    h2{font-size:14px; color:#999999;}
    h3{font-size:13px; border-bottom:solid 1px #DEDEDE; padding:4px 0; margin-bottom:10px;}
    
    a:link, a:visited{color:#36C}
    a:hover{text-decoration:none;}
    
    /* ------------------------------
    PAGE STRUCTURE
    ------------------------------ */
    
    /* #container has an absolute width (780 pixel) */
    
    #container{width:780px; margin:0 auto; padding-top:10px;}
    #topbarL{
      position: fixed;
      top: 30px;
      left: 30px;
      width: 175px;
    }
    #topbarR{width:auto; display:block; height:60px;}
    #navbar{width:auto; display:block; padding-top:150px; padding-left:300px; height:50px; position:relative; z-index:1;}
    
    
    #main{width:780px; padding:20px 0;}
    #contentwrapper {width: 780px; margin:0 auto;}
    #indexPageLeftTextColumn{width:560px; float:left;}
    #indexPageRightImageColumn{width:220px; float:right; clear:both;}
    #thumbsliderdiv { margin-top:10px;}
    
    div.spacer{clear:both; height:10px; display:block;}
    
    #footer{width:auto; display:block; padding:10px 0; font-size:11px; color:#666666;}
    
    /* ------------------------------
    CUSTOM CLASSES
    ------------------------------ */
    
    /* Add here your custom classes ... */
  2. #2
  3. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2009
    Posts
    310
    Rep Power
    162
    1) This is the bit that is causing the image to sit below the text:

    Code:
    <div id="contentwrapper">
    <div id="indexPageLeftTextColumn">
    <div id="indexPageRightImageColumn">
    What's happening here is that the image is falling below the text because the width of the 2 columns is far wider than the width of the content wrapper. It simply doesn't fit, so the browser puts it underneath. To fix it you have to make sure that the width of the content wrapper is the same or wider than the combined width + left/right paddings + left/right margins of the 2 columns inside the wrapper.

    Also, you'd have to remove the css property clear:both; from the right side column. This property basically tells the div to steer clear of everything and go sit underneath.

    2) I don't know how exactly you'd want to have this, but absolute positioning takes an object 'out' of the website, ignoring everything like resizing etc. The only way to make sure it stays where it is that I know of, is to make sure it's sitting on top of an element that has a set width/height, so that the absolute positioned object always has the space it needs. This way it shouldn't cause any problems.

    If this does not give the desired result, the only other option I can think of is to turn your website into 3 columns, and get rid of absolute positioning completely.
    Last edited by LDHosting; May 30th, 2013 at 06:41 AM.
    Quality European Web Hosting - LDHosting.com
    High Quality, Low Cost Web Hosting Services
    www.ldhosting.com
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    2
    Rep Power
    0
    Wow, LDHosting, thank you tremendously.

    What a helpful explanation-- this really helps me better understand CSS. Thank you for sharing your knowledge with me/us.

IMN logo majestic logo threadwatch logo seochat tools logo