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 Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts

    lining up 3 DIVs and enabling resizing based on browser window

    Hi, I am having a little issue with some DIVs on this page: http://www.minifigtimes.com/test.shtml

    There are three DIV containers in a row and all wrapped in another DIV.

    My first problem is that for some reason the first 2 DIVs are lined up side-by-side (no issue - this is what I wanted) but the third is not.

    The second thing is that even if all three were lined up fine I would prefer if I did not have to specify the DIV widths in px, i.e. I would like for them to be able to expand / shrink as the browser window size is altered.

    Any ideas?

    This is the relevant code:



    PHP Code:
         <div id="subwrapper">
               <
    div id="first">
                   <
    div class="subimage"><img src="images-site/test-image-medium.png" alt="test"></div>
                   <
    div id="subbody">
                 
                 
    Three second half goals from the reigning champions saw LFC end Napolis 13 game unbeaten run at the San Paolo
                 
                             
       
                   </
    div>
               </
    div>
               <
    div id="second">
                <
    div class="subimage"><img src="images-site/test-image-medium.png" alt="test"></div>
                    <
    div id="subbody">
                     
                       
    A goal from Den&#237;lson soon followed and the three points were secured by Marco Materazzi in the 83rd minute.  
                 
                
                     
                     
    </div>
                   </
    div>

                <
    div id="third">
                    <
    div class="subimage"><img src="images-site/test-image-medium.png" alt="test"></div>
                    <
    div id="subbody">
                    
                     
    Ajax Skerries boss Roberto Donadoni praised his minifigs for beating the odds and claimed if they believe in themselves he believes they can go all the way
                 
                    
                    
                    </
    div>
                 </
    div>      
            </
    div>      <!-- sub wrapper Div end --> 
    PHP Code:
    #subwrapper{
     
    width:420px
    }



    #first{
     
    margin:0;
     
    padding:0
     
    width:130px;
     
    background-color:white;
     
    position:absolute;
    }

    #second{
     
    top:0;
     
    margin:0;
     
    padding:0;
     
    width:130px;
     
    background-color:white;
     
    position:relative;
     
    left:140px;
     }
     
    #third{
     
    top:0;
     
    margin:0;
     
    padding:0;
     
    width:130px;
     
    background-color:white;
     
    position:relative;
     
    left:280px;
     }
      

    .
    subimage{
     
    background:white;
     
    width:130px;
    }

    #subbody{
    background-color:white;


  • #2
    Regular Coder
    Join Date
    Jul 2008
    Location
    UK
    Posts
    116
    Thanks
    4
    Thanked 0 Times in 0 Posts
    well instead of pixels use ems and if your looking for a fluid 3 column layout check out

    http://bonrouge.com/3c-hf-fluid.php

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    Percentages seem like the way to go. First let's change your HTML to get rid of the divitis (unnecessary divs) and clean it up:

    Code:
    <div id="subwrapper">
    	<div>
    		<img src="http://www.minifigtimes.com/images-site/test-image-medium.png" alt="test">
    		<p>Three second half goals from the reigning champions saw LFC end Napoli's 13 game unbeaten run at the San Paolo.</p>
    	</div>
    	
    	<div>
    		<img src="http://www.minifigtimes.com/images-site/test-image-medium.png" alt="test">
    		<p id="subbody">A goal from Denílson soon followed and the three points were secured by Marco Materazzi in the 83rd minute.</p>
    	</div>
    	
    	<div>
    		<img src="http://www.minifigtimes.com/images-site/test-image-medium.png" alt="test">
    		<p>Ajax Skerries boss Roberto Donadoni praised his minifigs for beating the odds and claimed if they believe in themselves he believes they can go all the way.</p>
    	</div>      
    </div>      <!-- sub wrapper Div end -->
    Note how the divs containing the text become <p>, which is what they really are, and how the <img> tags don't need a containing div either.

    Next let's work on the CSS:

    Code:
    #subwrapper{
     margin:0;
     padding:0; 
     border:1px solid #f00; /*diagnostic*/
     overflow:auto; /*these two lines*/
     width:100%; /*uncollapse the box*/
    }
    
    #subwrapper div{
     margin:0;
     padding:0; 
     width:33%; /*sets the column width as a percentage of #subwrapper*/
     float:left;
    }
    
    #subwrapper img{
     width:130px;
    }
    If all three "columns" have exactly the same behavior in terms of the text and images, then there's no need to give them individual ids or even classes; CSS selectors work just fine. I added the border just to be able to tell where #subwrapper is; feel free to remove it as it's just a diagnostic technique (some prefer changing the background color temporarily, which works too).
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    Partizan (02-17-2009)

  • #4
    Regular Coder Partizan's Avatar
    Join Date
    Dec 2008
    Location
    Legoland and Ireland
    Posts
    139
    Thanks
    74
    Thanked 0 Times in 0 Posts
    Thanks alot msuffern, that was really very helpful, exactly what I wanted!! Red border helped too!


  •  

    Posting Permissions

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