www.webdeveloper.com
Results 1 to 6 of 6

Thread: [RESOLVED] Div Layout Issue

  1. #1
    Join Date
    Jul 2009
    Posts
    62

    resolved [RESOLVED] Div Layout Issue

    So im building this site with a div layout. The layout was done a long time ago but i just notice this issue.

    Inside the #container Div i have a #Sections Div, inside it i have #left #right and #center Div.

    #left is floated left
    #right is floated right
    #center remains in the middle of #left and #right

    The problem is that the last Div inside the #center always stretches its height to match the longest side panel, either #right or #left.

    Here is the link of the page im having problem with http://thechozenfew.net/downloads.php. (The page source of this link may look odd and confusing if you view it, im using PHP to joint different sections of the page, like header...)

    CSS
    Code:
    #Sections {
    	margin-top:0px;
    }
    #left {
    	float:left;
    	width:180px;
    	clear:none;
    }
    #left table tbody tr td div {
    	display:none;
    }
    #right {
    	float:right;
    	width:180px;
    	clear:none;
    }
    #right h3, #right h4 {
    	margin-bottom:5px;
    }
    
    #center {
    	width:420px;
    	margin-right:auto;
    	margin-left:auto;
    }
    #center p {
    	text-indent:0.3in;
    	font-size:18px;
    }
    HTML
    Code:
    <div id="Sections">
        <div id="left">
          <!-- FeedSweep -->
        </div>
        <div id="right">
        	<?php include('includes/user_box.php'); ?>
            <!-- Ads End-->
        </div>
        <div id="center">
            <div class="round">
            	<h1>No Contents Yet </h1>
                <p>There is no content for download yet but we have some good stuff coming, just make sure to keep on cheking this section. What would you like to see on this section? </p>
            </div>
    	  <a name="comments"></a>
          <div class="roundDiv">
            <center>
                <div class="js-kit-comments"  uniq="/index" paginate="5" label="Leave a Comment" backwards="yes" permalink="http://thechozenfew.net/home.php"></div>
            </center>
          </div>
        </div>        
    </div> <!--Sections Div ends-->
    i removed the scripts to make the code look cleaner

    Any recommendations will be appreciated... Thank You

  2. #2
    Join Date
    Jan 2005
    Location
    Frankfort, KY, USA
    Posts
    6,167
    I'm a little confused -- do you need the columns equalized, or do you have another concern?

  3. #3
    Join Date
    Jul 2009
    Posts
    62
    Actually i want the center to be undependable of the sides columns, Right now the center height is dependant of the sides columns

  4. #4
    Join Date
    Jan 2004
    Location
    Sweden
    Posts
    850
    I had a quick glance on the codes your have posted, and there the center works fine, it does not follow the height of the side columns.

    I haven&#180;t had time to investigate your site yet, but there must be something that differs the layout from the code that you have posted..... or pehaps the content inside the side columns.

  5. #5
    Join Date
    Aug 2009
    Location
    England
    Posts
    29
    Can you post the css, if any, for the roundDiv and js-kit-comments classes?

  6. #6
    Join Date
    Jul 2009
    Posts
    62
    Thank you for your effort guys...
    This is what i did, i just floated the #center to the left and with a little of padding here and there i centralized it and now the divs in the center are expanding anymore. But it was weird thou, never had this kind of problem before.

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