SitePoint Sponsor |
|
User Tag List
Results 1 to 7 of 7
Thread: CSS menu and main content areas
-
Sep 24, 2008, 06:35 #1
- 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; }
-
Sep 24, 2008, 12:36 #2
- 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?)Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 24, 2008, 12:53 #3
- 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.
-
Sep 24, 2008, 22:40 #4
- 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.
-
Sep 24, 2008, 22:49 #5
- 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>
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 30, 2008, 03:07 #6
- Join Date
- May 2006
- Posts
- 120
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Yeah except I don't have a footer.
-
Sep 30, 2008, 03:38 #7
- 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.)Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
Bookmarks