SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS menu and main content areas

    Is there a way I can change this style sheet so that the menu and main content areas can expand in height depending on how much text is in the main content area instead of being fixed?

    Code CSS:
    #wrapper {
    width: 75%;
    height: 714px;
    border-width: 2px;
    border-style: solid;
    border-color: #75b844;
    }
     
    #header {
    width: 100%;
    height: 214px%;
    background: #75b844;
    }
     
    #menu {
    width: 25%;
    height: 500px;
    background: #75b844;
    float: left;
    }
     
    #content {
    width: 75%;
    height: 500px;
    float: left;
    }

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Jeremy, what does the HTML code that this goes with look like, and do you have a link to a demo I could look at?

    (In the meantime, perhaps this could help you?)

  3. #3
    SitePoint Member
    Join Date
    Sep 2008
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In general you can remove the fixed height issue in two ways. One, you can simply remove the "height: XXpx;" line from the CSS and the div will expand or shrink to an appropriate height in relation to the content in the div. Two, you can use the "min-height: XXpx;" option which will put the div at a static minimum height and expand it if necessary to the height of whatever the content is but the div will not shrink below the min-height number. Alternatively you can keep the static height and use the overflow property to view all the content of that div if you don't want it expanding beyond a certain point.

  4. #4
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    So basically their is a wrapper that holds everything. Then there is a header at the top. Underneath the header there is a menu at the left and a main content area at the right.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean like this? (As far as the HTML code goes.)

    HTML Code:
    <div id="container">
    	<div id="header">
    		
    	</div>
    	<ul id="menu">
    		<li><a href="#">Menu Item</a></li>
    		<li><a href="#">Menu Item</a></li>
    		<li><a href="#">Menu Item</a></li>
    		<li><a href="#">Menu Item</a></li>
    		<li><a href="#">Menu Item</a></li>
    		<li><a href="#">Menu Item</a></li>
    	</ul>
    	<div id="content">
    		<div class="wrapper">
    			
    		</div>
    	</div>
    	<div id="footer">
    		
    	</div>
    </div>

  6. #6
    SitePoint Zealot
    Join Date
    May 2006
    Posts
    120
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah except I don't have a footer.

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not needed.

    (Well, the footer code anyway - gimme a few while I write something up for ya.)


Bookmarks

Posting Permissions

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