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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    127
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Side by Side divs trouble

    So I'm building a page that will be used by multiple companies, but I'm having some issues. In the first example, with the code for just the two divs, the layout is messed up in the latest browsers (but looks fine in older versions of IE.) I've also posted this code below. Then in the second link, I've pasted the code with a layout of one of the companies that will use the code. It looks better but it pushes the sidebar down.

    http://tinyurl.com/bo6ukqe

    http://tinyurl.com/cerzfwd

    So I'm curious what's the best way to fix this. I need the left div and right div to line up. Currently

    1. I want the left and right div to line up. Meaning, both are the same height.
    2. I'd like if there's a little bit of space between each row. Currently, the pictures are right on top of each other.
    3. I'd like the right div's size to depend on how much room it has. So instead of one company having to have it at 55% because of a sidebar, then another company has to change it to 80% because it doesn't have a sidebar.

    Here's the code if you prefer no to dig through the code in the above links:

    Code:
    <style type="text/css">
    .body { border : 1pt solid black; }
    .left { float : left; width:226px; height:127px;  }
    .right { float : right; width : 80%; }
    .spacer { clear : both; height: 10px; }
    img { border: none; }
    p.description {
    	line-height:18px;
    	color:#767676;
    	font-size:12px;
    }
    p.description a {
    	font-weight:bold;
    }
    a.read-more-link {
    	border-top:none;
    	text-transform: uppercase;
    	margin:0; padding:0;
    	font-size:10px;
    }
    .read-more a {
    	border-top:none;
    	display: block;
    	text-align: right;
    	text-transform: uppercase;
    	margin:15px 0 0 0; padding:0;
    	text-decoration: none;
    
    }
    
    </style>
    <div class=body>
      <div class="left""><a href=""><img src="http://image.pbs.org/merlin/d3uly0oc2bnj1.cloudfront.net/hostedbento-prod/filer_public/2012/12/14/104399333.jpg.resize.226x.jpg" alt="GED Connection" /></a>
    </div>
      <div class="right"><h4 class="title"><a href="">GED Connection</a></h4>
                    <p class="description">GED Connection will help you prepare for all five subjects on the GED&lt;sub&gt;&amp;reg;&lt;/sub&gt; exam, with special attention to the calculator used on the exam, the essay, special answer formats, and tips for test day. </p>
                    <div class="read-more">
                       
                        <a href="">Find out more</a>
                       </div>
      <div class="spacer"></div> <!-- note no content -->
    </div>
    
      <div class="left"> <a href=""><img src="http://image.pbs.org/merlin/d3uly0oc2bnj1.cloudfront.net/hostedbento-prod/filer_public/2012/12/14/137949938.jpg.resize.226x.jpg" alt="Pre-GED Connection" /></a>
    </div>
      <div class="right""><h4 class="title"><a href="">Pre-GED Connection</a></h4>
                    <p class="description">These 26 programs were selected from the GED Connection series to go with the Pre-GED Connection workbooks. </p>
                   <div class="read-more">
                      
                     <a href="">Find out more</a>
                       </div>
      <div class="spacer""></div> <!-- note no content -->
    </div>
    
      <div class="left"><a href=""><img src="http://image.pbs.org/merlin/d3uly0oc2bnj1.cloudfront.net/hostedbento-prod/filer_public/2012/12/17/76800952_1.jpg.resize.226x.jpg" alt="Workplace Essential Skills" /></a>
    </div>
      <div class="right"> 
                     <h4 class="title"><a href="">Workplace Essential Skills</a></h4>
                    <p class="description">Are you ready for a good job? Workplace Essential Skills covers the skills you&#39;ll need to find a job and strategies that will help you get ahead. </p>
                     <div class="read-more">
                     
                     <a href="">Find out more</a>
                    
                       </div>
      <div class="spacer"></div> <!-- note no content -->
    </div>
    Thanks for your help.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Good morning javanewbie7,
    In your first example, the floats are acting like they should. To stop each .left from sitting next to the previous .left, use the clear property like this -
    Code:
    .left {
        clear: left;
        float: left;
        height: 127px;
        width: 226px;
    }
    You might think about putting all those .left's in a containing element that could be used as a left column instead.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    javanewbie7 (12-20-2012)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    In your second example, your layout does not make 3 columns because #content_right is a child of #content_left. If you close #content_left before #content_right then #content_right can be beside #content_left instead of inside it.
    Hope that was not too confusing.

    Look at what an extra closing tag does -
    Code:
                    
                       </div>
      <div class="spacer"></div> <!-- note no content -->
    </div>
        
    </div>        
              <div id="content_right">
                <div class="full_sponsors">               </div>
                <!-- InstanceBeginEditable name="feature_section" -->
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    javanewbie7 (12-20-2012)

  • #4
    Regular Coder
    Join Date
    Oct 2010
    Posts
    127
    Thanks
    26
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Excavator View Post
    In your second example, your layout does not make 3 columns because #content_right is a child of #content_left. If you close #content_left before #content_right then #content_right can be beside #content_left instead of inside it.
    Hope that was not too confusing.

    Look at what an extra closing tag does -
    Code:
                    
                       </div>
      <div class="spacer"></div> <!-- note no content -->
    </div>
        
    </div>        
              <div id="content_right">
                <div class="full_sponsors">               </div>
                <!-- InstanceBeginEditable name="feature_section" -->

    That worked. Thanks to you both!


  •  

    Posting Permissions

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