www.webdeveloper.com
Results 1 to 5 of 5

Thread: Arranging DIVs

  1. #1
    Join Date
    Aug 2006
    Posts
    89

    Arranging DIVs

    I am trying to center three DIVs on a page but I need each div to be able to automatically resize itself vertically to accommodate the amount of content it holds (which will change). Every time I try to float them, the parent container (the one centering them) will stop holding them.

    (Refer to attached file for clarification)

    Any help would be appreciated.
    Attached Images Attached Images
    "It'll could only cost you your life--and you got that for free."
    Forgotten Games

  2. #2
    Join Date
    Jun 2008
    Location
    Texas
    Posts
    84
    Quote Originally Posted by meinsla
    I am trying to center three DIVs on a page but I need each div to be able to automatically resize itself vertically to accommodate the amount of content it holds (which will change). Every time I try to float them, the parent container (the one centering them) will stop holding them.

    (Refer to attached file for clarification)

    Any help would be appreciated.
    I am sure I can help, but I am gonna need source code...
    I hope you found this answer when your manager told you to "just Google it".

    Ubuntu 10.04 LTS | Vim | Chromium/Google Chrome

    Intel Core 2 Duo | 8 GB DDR2 | 2x 500 GB WD HDD | ATI Quad Head | 3 22" AOC Monitors

    http://drupal.org/ | http://magento.org/ | http://cakephp.org

  3. #3
    Join Date
    Jun 2008
    Location
    Texas
    Posts
    84

    Here you go

    HTML:
    HTML Code:
    <div id="pageWrapper">
    	<div id="leftColumn">
    		<div id="whateverContainer"></div>
    	</div>
    	<div id="middleColumn">
    		<div id="whateverOtherContainerOne"></div>
    		<div id="whateverOtherContainerTwo"></div>
    	</div>
    	<div id="rightColumn">
    		<div id="YouGetTheIdea"></div>
    	</div>
    	<div id="anythingBelow"></div>
    </div>
    and here is the CSS

    Code:
    body {
    background-color:#fffff7;
    text-align:center;
    }
    #pageWrapper {
    width:960px;
    margin:0pt auto;
    position:relative;
    text-align:left;
    background-color:#fffff7;
    }
    
    #leftColumn, #middleColumn {
    float:left;
    width:315px;
    }
    
    #rightColumn {
    float:right;
    width:315px;
    }
    
    #anythingBelow {
    clear:both;
    
    }
    Ok, that was some like 2 minute hand coding....but you should get the idea...
    I hope you found this answer when your manager told you to "just Google it".

    Ubuntu 10.04 LTS | Vim | Chromium/Google Chrome

    Intel Core 2 Duo | 8 GB DDR2 | 2x 500 GB WD HDD | ATI Quad Head | 3 22" AOC Monitors

    http://drupal.org/ | http://magento.org/ | http://cakephp.org

  4. #4
    Join Date
    Aug 2007
    Posts
    3,767
    EDIT: Said what chadsten did.
    Last edited by Declan1991; 07-07-2008 at 10:53 AM.
    Great wit and madness are near allied, and fine a line their bounds divide.

  5. #5
    Join Date
    Aug 2006
    Posts
    89
    Fantastic. Thanks for your help, chadsten.
    "It'll could only cost you your life--and you got that for free."
    Forgotten Games

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles