|
CSS - Sidebar Help--grow With Content
Hello,
I've found many threads on making your sidebar appear as if it is growing with tiling backgrounds, but my situation is a tad more unique. My project can be found he http://tinyurl.com/ygq22wa If you are on the home page and click "About Us", the content behaves as I want it. The problem is, I want the sidebar to grow with the content, but only underneath the links. I want the bolts image to always be at the lower left of the page, and the "middle" of the sidebar to grow (so that the links stay put, but the sidebar grows underneath to match the content div). That way, I won't have undesired empty space next to the content when the page grows more than the min-height I have defined for the sidebar. I've seen some Javascript solutions, but I really would like to accomplish this with CSS. Big thanks to anyone who can help. Similar TutorialsLet me start by saying I am a php programmer and just starting to get into CSS layouts (I'm a table layout person but trying to change that) Well I have searched and searched and I cannot find a solution to this. Basically as content_left and content_right grows vertically..... the content div they are in does not.... I tried display: table-cell as I've seen on some responses but that breaks in opera, the only way I can get it to look right is to do like height: 1000px; but the content will be dynamic so that won't work... I am sure there is a simple solution any help would be much appreciated thanks! Here is the code: Code: <style type="text/css">
<!--
body {
text-align:center;
}
#wrapper {
width: 1000px;
margin: auto;
border: 1px solid black;
}
#content {
position:relative;
border: 1px solid red;
}
#content_left {
position: relative;
width: 640px;
float: left;
border: 1px solid green;
}
#content_right {
position: relative;
width: 350px;
float: right;
border: 1px solid blue;
}
-->
</style>
and then the html Code: <div id="wrapper"> <div id="content"> <div id="content_left"><br />left<br /><br />left<br /></div> <div id="content_right"><br />right<br /><br />right<br /></div> </div> </div> I need to center the contents of two divs in one of my sidebars. The page can be seen he http://dev.asbco.com I need to center the free quote image and also the tabbed section beneath it. Any help is greatly appreciated as I'm trying to launch this site by the end of the week. Thanks! This is my first completely css site and I am having troubles with my main content areas and some other small minor things. My design requires that the sidebar be the same height as my content area. What do I need to do to get them the same heights. The main content area changes on each page so my sidebar needs to do the same. Here is the website. I guess I cannot post url's so I hope I made sense. Also an example of what the site is going to look is here. Once again cannot post urls. Also, I need help with lists. In the example image I have the lists side-by-side. Normally I would use a table for this. Is there a way to do this with css? Any help would greatly be appreciated. Thanks, Shaun Hello all, On a friend's site: tincansingingtelegram dot com/who-are-we the horizontal sidebar keeps appearing. It doesn't appear on the homepage, but on all the subpages. Thanks for any help! I'd like to make a 2-column layout where each column fills the height of the container div, and the container div's height is determined by the longest div within it... this is getting a bit confusing, because I can't have one being determined by the other one with that one being determined by the first, if that makes sense? Any help would be greatly appreciated, thanks Hi, I have hit the "wall" in my knowledge of CSS while trying to implement a "flex-width-equal-height-sidebar-layout" style of layout as a skin/theme for a message board system and need some help. My trouble occurs when a direct link to the post is used (instead of following the menu navigation system) where the top menu information/links area (the area between the banner and the post) is chopped off... The relevant portion of the CSS seems to be the .col_wrap {margin-top: 10px; border: 0; overflow: hidden; float: left; width: 100%; position: relative; z-index: 10; clear: both;} portion of my CSS because if I take out the overflow:hidden declaration then the menu portion of the skin/theme/layout shows correctly but the sidebar the shows the part which should be hidden at the bottom and the footer completely vanishes from view! My apologies but this is the best I can do without having the ability to post pics or urls which could better explain what is wrong and frankly speaking I don't know how anyone here can help given my inability to show the problem but hopefully someone knows or has run into this problem before or can offer some resources that may be of assistance.... I have like this psudo-code: Code: <div id=parent position: absolute> <div id=child1 position: relative> </div> <div id=child2 position: absolute> </div> </div> As I fill up child1 with text or content, the parent grows along with it. I would like the child2 div to grow along with it as well. That is the concept. Here is the real code: Code: <div style="border: solid 3px; position: absolute; top: 0px; left: 0; width: 300px"> <div style="border: solid green; position: relative; width: 150px"> <p class="bodyCopy"> Lots of text to fill out the div and make it grow. <br/><br/> A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up <br/><br/>The next paragraph to make a div grow. <p class="bodyCopy"> Lots of text to fill out the div and make it grow. <br/><br/> A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up <br/><br/>The next paragraph to make a div grow. <p class="bodyCopy"> Lots of text to fill out the div and make it grow. <br/><br/> A lot more text I wish I knew that latin phrase everyone uses to fill out text, better than making stuff up <br/><br/>The next paragraph to make a div grow. </div> <div style="position: absolute; top: 0px; right: 0px; height: 100%; width: 10px; border: solid red 3px;"> </div> <div style="border: solid blue 1px; position: absolute; height: 10px; width: 10px; left: 200px; bottom: -14px;"> </div> </div> I also have a test page here This pretty much does what I would expect(or what I want) in FF, but not IE or Opera. I would like this to be dynamic and not use any javascript. Does anyone have any suggestions? Thanks for your time, CJB How do I get the 'results' div to be 100% in height ? The page height changes depending on the page being shown so need to have the height of the div to be 100%, but using 100% for the div does not make it 100% ! Any ideas how I do this ? Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>..</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="en" />
<meta name="rating" content="General" />
<meta name="robots" content="index,follow" />
<meta name="revisit-after" content="2 days" />
<meta http-equiv="expires" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-language" content="en" />
<style type="text/css">
/* div { border: 1px solid blue; } */
body { border: 0px solid #A52A2A; background-color: #F2F2F2; } /* brown */
.outerBody { width: 1150px; margin: 0 auto; }
.bodyContainer { float: left; width: 1150px; padding: 1px 0 5px 0; border: 0px solid #A52A2A; }
.menu { float: left; width: 100%; text-align: center; font-size: 15pt; font-family: Broadway; border: 0px solid #EDB6B6; }
.widthLimiter{ width: 100%; margin: 0 auto; }
.menuwidthLimiter{ width: 100%; margin: auto; text-align: center; } /* width: 1200px; */
ul{ list-style: none; padding: 0px; margin: 0px; }
ul#navbar{ width:auto; list-style: none; padding: 0px; margin: 0px auto; height: auto; overflow: hidden; background-color: #F2F2F2; /* white */ display: table; }
ul#navbar li, ul#navbar1 li{ float:left!important; display:inline!important; margin: 0px; }
ul#navbar li a { display:block; float:left;}
a:link,a:visited,a:active{ color: #757575; font-weight: bold; text-decoration: none; }
a:hover{ color: #222; text-decoration: underline; }
#navbar a:link,#navbar a:active,#navbar a:visited{ display:inline-block; color: #757575; text-decoration: none; border-left: 1px solid #DDD; border-right: 1px solid #DDD; padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ margin: 0px 4px 0px 4px; /* margin: 0px 5px 0px 5px; */ }
#navbar a:hover{ background: url('images/headerBarBgHover.png') repeat-x center #999999; display:inline-block; color: #222; text-decoration: underline; padding: 8px 3px 8px 3px; /* padding: 10px 20px 10px 20px; */ }
.leftSideImagePanel { float: left; width: 30px; height: 100%; overflow: hidden; padding: 0px 5px 0 5px; background-color: #F2F2F2; border: 0px solid #999999; }
.specials { float: left; width: 180px; height: 100%; overflow: hidden; margin: 15px 5px 0 5px; padding: 5px; border: 0px solid #999999; background-color: #DADADA; border-radius:18px; } /* light grey */
form{ padding: 0px; margin: 0 auto; }
.outerbodycontainer { float: left; width: 870px; height: 100%; border: 0px solid green; }
.innerbodycontainer { float: left; width: 870px; height: 100%; border-bottom: 0px solid #EDB6B6; }
.searchCategoryBox { border-right: 1px solid #EDB6B6; float: left; width: 130px; height: 100%; padding: 3px 3px 10px 10px; font-size: 9pt; }
.results { border: 1px solid #E5E5E5; float: left; width: 713px; height: 100%; padding: 4px 4px 4px 6px; font-size: 9pt; }
hr.smallDivider { color: #EDB6B6; height: 1px; } /* brown = #A52A2A */
.catListLineHeight { line-height: 12px; }
a.cat { text-decoration: none; }
a.cat:link { color: #333333; } /* grey */
a.cat:visited { color: #333333; } /* grey */
a.cat:hover { color: black; }
a.activeCat:link { color: blue; text-decoration: none; }
.clearfloat { clear: both; }
.indent { padding-left: 40px; }
.center { text-align: center; }
.centerTitles { text-align: center; font-weight: bold; font-size: 12pt; }
</style>
</head>
<body>
<div class="outerBody">
<!-- bodyContainer start -->
<div class="bodyContainer">
<img alt="logo" src="images/header-trans.png" height="79" width="1150" />
<!-- menu start -->
<div class="menu">
<div class="menuwidthLimiter">
<ul id="navbar">
<li> <a href="index.php">Home</a> </li>
<li> <a href="cart.php">Our catalogue</a> </li>
<li> <a href="cart.php?mycart=yes">View your cart</a> </li>
<li> <a href="map.php">Store locations</a> </li>
<li> <a href="contactus.php">Contact us</a> </li>
<li> <a href="aboutus.php">About us</a> </li>
</ul>
</div>
</div>
<!-- menu end -->
<div class="leftSideImagePanel">
<div style="width: 130px;"> </div></div>
<div class="outerbodycontainer">
<!-- innerbodycontainer start -->
<div class="innerbodycontainer">
<!-- search start -->
<div class="searchCategoryBox">
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text<br />text text
</div>
<!-- search end -->
<!-- results start -->
<div class="results">
<br />
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />text text tetext text text text text text text text text text text text text text text text text text text text text text text text text text text text
<br />
<br />wanting the 'results' div to be 100% in height.
</div>
<!-- results end -->
<div style="text-align: center; font-weight: bold; font-size: 10pt; font-style: italic;"><br />Prices correct at time of upload. Products, descriptions and prices subject to alteration and/or removal.</div>
</div>
<!-- innerbodycontainer end -->
<br class="clearfloat" />
</div>
<div class="rightSideImagePanel">
<!-- start of specials -->
<div class="specials">specials</div>
<!-- end of specials -->
</div>
</div>
<!-- body container end -->
</div><!-- end of outerBody -->
</body>
</html>
Hello, I've about given up.. I've always used mostly tables, with div 's here and there. I've been trying to build some completely CSS3 / HTML5 pages.. might as well be ready for the next step.. anyways.. Both w3.org validators (css3 and html5) validate the pages, but they are not right. I thought the body could be used as the parent container.. and if not i've tried this with a 'wrapper' div also .. with an image of bottom, problem area. . So, why wont the parent container, set to 'auto' or '100%' 'grow' beyond 1760 pixels? I can set it to 2000px or what ever, but then I have to change it anytime page content changes. FYI. I use mozilla nightly, Aurora browsers on all my openSuSE systems running KDE.. Don't know if it will look diff on another system.. don't really care, but .. Thank you in advance, Landis. Hi all, I've been struggling with a basic layout question for a while and I could use some direction as a recent CSS convert. Basically I have a two column layout contained within another div (for borders and colors). What is happening is that my container only grows vertically to the size of the right column regardless of the size of the the left. Is there a way to "attach" the containing div to which ever column is the tallest? I've setup a test page to show the problem. This occurs in I.E. 6.0 and Firefox 1.5.x (Windows and Unix). Thanks very much for any pointers. I am working on a site in CSS (first time! Yay!) I am having one problem: there is a sidebar, and I have used spacer images to make the coloring go to the very bottom of the page (the links stop above that). HOWEVER: this is for my screen size, and I am worried that when people view it with a different screen/window size, they will have scroll bars, even though there is no content at the bottom. Is there any attribute that will make it just go right to the bottom? Thanx. I'm trying to have a sidebar to the right of my page content that extends the entire height of the container it is in. Code: .sidebar {
padding: 0px;
margin: 0px;
width: 150px;
height: 100%;
color: #999999;
background: #ffffff;
float: right;
border-top: none;
border-left: 1px solid #cccccc;
border-bottom: none;
border-right: none;
}
This is the code I am currently using, but it is only as tall as the contents of the div. I need the border on the left to extend the length of the container it is in. Any ideas? Thanks, Scott I have three questions. 1. I saw some site which cut if there is a wide picture on side bars, like it just show the part which is on the sidebar box if its wider it cuts the extra part like this site if you see the first picture on the side bar its bigger but it cuts the extra part (-http://dot21.blogspot.com/-) , i want to know how to do it. 2. When some people add backgrounds they write background-repeat:no-repeat whats the function of that code??? and what can i write instead of no-repeat?? 3. whats the function of this code (background-position:bottom left) ??? If you couldnt answer some i hope you answer the ones you know. I'm a bit of a CSS newbie but I try. How do you get the sidebars' height to synchronize with the height of your content? I tried height=100% but it doesn't seem to work. If I put a lot of text in my content, it stretches down but the sidebars remain the same height, making the layout looking ugly. I don't want to have to press enter in my sidebars to match the content's height all the time! Here's my code: <style type="text/css"> #container { width: 100%; border: 1px solid gray; margin: 0px auto; } #banner { padding: 0px; background-color: #CDC8F1; } #content { padding: 5px; background-color: #FFFFFF; } #sidebar-a { float: left; margin: 0; padding: 0px; background-color: rgb(235, 235, 235); height: 100%; } #sidebar-b { float: right; margin: 0; padding: 0px; background-color: rgb(235, 235, 235); height: 100%; } #footer { clear: both; padding: 5px; background-color: rgb(213, 219, 225); } body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; } </style> I know this probably has a really simple answer but how do I make it so the sidebar is on the right side of the content box on a WordPress theme? Here is what it looks like right now: http://reptilenewsstation.1sthoster.com/ The sidebar is below the content box and I want it to be on the right side of the content box. I know the theme sucks right now but this is my first WordPress theme and I want to set everything up in the correct places before I start getting into really styling it. Hello, this is my first time posting here. I am having a problem with a CSS sidebar. You can view the page at this URL: http://approg.msu.edu/david/ccsac/index2.htm. For the life of me, I cannot get the sidebar to automatically extend to the length of the page. Obviously, it's not much of an issue at the URL I listed, but it makes a bigger difference when there is a lot of content on the page. I'm sure the solution is simple, I just need to be pointed in the right direction. Thanks. Hi all, At http://www.bartlett-family.net/chrisbartlett/blog2/ I have recently changed the entire layout and replaced it all with new images, BG, etc. In IE... On the right, the sidebar and BLOG searchform are all a little too far to the right. I've been playing with it all for a while, but can't seem to move it to the left. I basically just need to shift the entire righthand contents about 10 or 20 px to the left, but I need to avoid that also changing the righthanded content on all the other pages. Actually, in FF it is correct, except that the BLOG searchform bar needs to com over about 10-20px to the left. Other than that, it's perfect. I need to make IE look like that! CSS file is at http://www.bartlett-family.net/chrisbartlett/main.css I'd appreciate any help. Thank you! Chris i have created a new model for a 3 column layout, (left sidebar, main content, right sidebar) i used yui 3.0 index.php page as an example to float the main column right. this is designed to put the main column to static so that it is liquid, with a min width. im not working with a liquid layout however, so some adjustments are needing to be made. my site is 950 pixels wide. my sidebars are about 175 pixels each, when used. i have 2 classes that i append to the main column style depending on wether a left sidebar will be used or not. so when i set the #mainColumn for class .marginForLeftNav then it will accomodate for the left nav bar to pop up into place. if no left sidebar, then i use #mainColumn . marginForNoLeftNav class. The problem i am having is trying to accomodate the right sidebar, which will always be used. my requirements a 1) that the side bar html code falls below the main column code on the html page. so essentially i need to leave room in teh mainColumn for these columns to pop up into place. 2) that the styles used to float the left sidebar, and the main column are left in tact if possible. heres some code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
#wrapper{ /* Wraps everything. Glues header, centralContainer, and footer together */
margin: auto;
width: 950px;
text-align: left;
}
#header {
margin: 0;
position: relative;
background-color: #666;
}
#centralContainer { /* Glues left and right columns, and main area together */
zoom: 1;
}
#mainColumnWrapper {
margin-left: -195px;
overflow: hidden;
float: right;
}
#mainColumn {
margin-left: 195px;
background-color: #999;
position: relative;
width: 560px;
}
#mainColumn .marginForLeftNav {
}
#mainColumn .marginForNoLeftNav {
left: 0px;
width: 755px;
margin-right: 195px;
}
#leftColumn {
float: left;
width: 175px;
position: relative;
margin: 0;
padding: 0;
background-color: #CCC;
}
#rightColumn {
width: 175px;
margin-left: 775px;
background-color: #CCC;
position: relative;
}
#footer {
color: #666666;
font-size: 80%;
border-top: 1px solid #333333;
clear: both;
padding-top: 10px;
background-color: #FFF;
}
body {
background-color: #333;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="header">header</div><!-- end header -->
<div id="centralContainer">
<div id="mainColumnWrapper">
<div class="marginForLeftNav" id="mainColumn" >
<p>main column, with class narginForLeftNav</p>
<p> </p>
<p> </p>
<p>test</p>
</div><!--end <div id="mainColumn" class="marginForLeftNav"> -->
</div><!--end <div id="mainColumnWrapper"> -->
<div id="leftColumn">left column area</div>
<div id="rightColumn">right column area</div><!-- end rightColumn div -->
</div><!-- end centralContainer -->
<div id="footer">footer</div><!-- end footer -->
</div><!-- end wrapper -->
</body>
</html>
ive adjsuted the background colors to help see what is going on this is as close as i have gotten it so far. NOTICE, how the main column overflows behind the right sidebar, which makes the content in the right sidebar begin AFTER the bottom of the main column. this is obviously the main problem. I need the main column to obey the right sidebar, depending on wether theres a left sidebar or not. |
|||||||