CSS - Center Sidebar Content
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! Similar TutorialsHello, 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. 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 All, I have the following layout. The problem I am having is when the "center" div has lots of text in it the text expands out of the "center" div. I would like the div to stretch with the content. Code: <div id="main"> <div id="mainTop"></div> <div id="mainContent"> <div id="left"></div> <div id="center"> Lots and lots of text goes here </div> <div id="right"></div> </div><!-- end of maincontent --> <div id="mainBottom"> <div id="left2"></div> <div id="center2"></div> <div id="right2"></div> </div> </div> CSS Code: html, body{ margin: 0px; padding: 0px; text-align: center; min-height: 100%;} div{ border: 1px solid black;} /* Hack for IE, Reset to 100% height */ html, body, #main, #mainContent, #left, #center, #right, #left2, #right2{ height: 100%; } #left, #center, #right{ height: 100%; } /* End IE Hack */ #main{ position: relative; width: 100%; min-height: 100%; } #mainTop{ margin: auto; position: relative; height: 210px; width: 850px; text-align: left; background-color: yellow; } #mainContent{ margin: auto; position: relative; min-height: 100%; width: 850px; text-align: left; } #left{ position: absolute; min-height: 100%; width: 79px; left: 0px; background-color: yellow; } #center{ border: 1px solid red; position: absolute; width: 696px; left: 79px; background-color: #dcdbdc; min-height: 100%; } #right{ position: absolute; left: 775px; width: 75px; background-color: yellow; } #mainBottom{ margin: auto; position: relative; min-height: 146px; width: 850px; text-align: left; } #left2{ position: absolute; min-height: 100%; width: 79px; left: 0px; background-color: yellow; } #center2{ border: 1px solid red; position: absolute; width: 696px; left: 79px; background-color: yellow; min-height: 100%; } #right2{ background-color: yellow; position: absolute; left: 775px; width: 75px; min-height: 100%; } Also shown he http://www.steudel.org/css/test.php The yellow divs represent images that border the content. The whole layout is supposed to be able to stretch vertically. I'm not sure why the text is not stretching the center div. TIA, Mark HI hope someone can help me with this its been driving me mad for a couple of days now. Have desiged a site with css layout but I want to center it in a page so when I resize the browser window it will stay in the middle of the page. I know its a bit long winded but I would greatly appreciate the help. I've used the css sheet and html bellow Thanks ---------------------------css--------------------------------- body { text-align: center; background-color:#000000; } #container { margin-left: auto; margin-right: auto; width: 65em; text-align: left; } #pageContent { height: 100px; width: 100%; background-color:#000000; border:solid #000000 thin; } /*Headings*/ h1{ } h2{ font-size:16px; font-weight: bold; color:#ff0000; padding-left: 0em; } h3{ } /*Div id's*/ /* --------------------------------------------------title------------------------------------------------------- */ #title { position:absolute; width: 429px; height: 162px; left: 194px; top: 25px; z-index:1; } /* --------------------------------------------------titleImage------------------------------------------------------- */ #titleImage { position:absolute; width: 358px; height:180px; left: 670px; top: 7px; z-index:2; } /* --------------------------------------------------navLeft------------------------------------------------------ */ #navLeftContainer { position:absolute; top: 188px; left: 194px; width: 154px; height: 405px; background-color:#ffffff; z-index:3; } #navLeft { position:absolute; top: 2px; left: 3px; width: 145px; height: 395px; background-color:#FFFFFF; border: solid #cccccc 2px; overflow:auto; } /* #navLeft ul { list-style:none; padding-top: 0em; padding-left: 0em; } #navLeft li { padding-bottom: .2em; } #navLeft a { text-decoration:none; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#999999; font-weight:800; } #navLeft a:hover { color:#ff0000; } /* --------------------------------------------------navTop------------------------------------------------------ */ #navTop { position:absolute; top: 188px; left: 346px; width: 670px; height: 24px; background-color:#000000; font-family: Arial, Helvetica, sans-serif; border: solid #ff0000 2px; overflow:hidden; z-index: 4; } #navcontainer { padding: 0; height: 22px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #000000; width: 223px; height: 24px; border-top: 0px solid #000000; border-left: 0px solid #000000; border-bottom: 0px solid #000000; border-right: px solid #000000; padding: 0; margin: 0 0 10px 0; color: #ffffff; text-decoration: none; display: block; text-align: center; font: normal 16px/18px Arial, Helvetica, "Lucida Sans Unicode", verdana, lucida, sans-serif; } #navcontainer ul li a:hover { color: #ffffff; background: #ff0000; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } /* --------------------------------------------------navBargains-------------------------------------------------- */ #navBargainsContainer { position:absolute; top: 594px; left: 194px; width: 154px; height: 158px; background-color:#ffffff; z-index:5; } #navBargains { position:absolute; top: 0px; left:2px; width: 146px; height: 150px; background-color:#000000; font-family: Arial, Helvetica, sans-serif; border: solid #ff0000 2px; overflow:auto; padding-left: 0px; color: ff0000; } /* -----------------------------------------------------contents---------------------------------------------------- */ #contents { position: absolute; left: 348px; top: 217px; width: 672px; height: 535px; background-color: #FFFFFF; overflow:auto; z-index:6; } #triangle { position: absolute; right: 0px; bottom: 0px; z-index:7; } /* -----------------------------------------------------html------------------------------------------------------*/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "(URL address blocked: See forum rules)"> <html xmlns="(URL address blocked: See forum rules)"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <link href="main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <!-- ****************************************************title******************************************* **** --> <div id="title"> <img src="test/images/Dark-Logo.jpg" /> </div> <!-- ****************************************************titleImage************************************** ********* --> <div id="titleImage"> <img src="test/images/titleImage.jpg" width="353" height="180" /> </div> <!-- ****************************************************navLeft***************************************** **** --> <div id="navLeftContainer"> <div id="navLeft"> <h2>Menswear</h2> <ul> <li><a href="linked.htm">Jackets </a></li> <li><a href="linked.htm">Jeans</a></li> <li><a href="linked.htm">T-shirts</a></li> <li><a href="linked.htm">Polos</a></li> <li><a href="linked.htm">Jumpers</a></li> <li><a href="linked.htm">Hodies & Sweats</a></li> </ul> <h2>Womenswear</h2> <ul> <li><a href="linked.htm">Going out Tops </a></li> <li><a href="linked.htm">Day Tops</a></li> <li><a href="linked.htm">Shirts & Blouses</a></li> <li><a href="linked.htm">Jeans & Denim</a></li> <li><a href="linked.htm">Knitwear</a></li> <li><a href="linked.htm">Polos</a></li> </ul> </div> </div> <!-- ****************************************************navTop****************************************** **** --> <div id="navTop"> <div id="navcontainer"> <ul id="navlist"> <li id="active"> <li><a href="#" id="current">Menswear</a></li> <li><a href="#">Womenswear</a></li> <li><a href="#">Junior</a></li> </ul> </div> </div> <!-- ****************************************************navBargains************************************* **** --> <div id="navBargainsContainer"> <div id="navBargains"> <h2>Items in Focus</h2> <ul> <li id="active"><a href="#" id="current">Item one</a></li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">Item four</a></li> </ul> </div> </div> <!-- ****************************************************contents**************************************** ***** --> <div id="contents"> <div id="triangle"> <img src="test/images/triangle.gif" width="55" height="55" /> </div> </div> </div> </body> </html> /* Links End */ Hi I'm having a bit of trouble with a DIV/CSS layout - 2 DIVs are inside a 100% height 100% width container DIV. The first (top) DIV is the content and the second (bottom) DIV being a 100% width 240px height footer DIV. I can make the footer stick to the bottom of the page and display fine no problem, however, I am having trouble getting the content div to fill only the area above the footer. If I specify a 100% height for it then it extends the entire height of the page and content disappears behind the footer. Plus, I want to absolutely center the content in the space above the footer, not the absolute center of the whole page, which is all i am acheiving with 100% height! Basically, I need the content DIV to extend 100% then subtract the 240px height of the footer - I suspect it's not wise to mix px and %, however. I have attached an image to help with my probably confusing explanation! I do have a workaround using tables, which I would ideally like to avoid, particularly as it does not support IE6/7 browsers. If a solution can be acheived which uses JavaScript to format the DIVs, then I am open to any suggestions anyone may have. Thanks R 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.... Hi guys, I recently redeseigned my site using CSS from tables. When the window (IE) was made smaller before, the content would stay put but you just wouldnt see it all (obviously cause now the window is smaller) but with CSS it dumps it at the very bottom of the screen and leaves my content area totally blank. Is there some way this can be fixed? Daragh I actually have two problems... Installing hte firebug plugin for firefox may ease helping me out... The problem is with http:// kthxbai2u<dot>com I cant for the life of me center the "content" div. I have tried every method I found on the first 4 pages of Google. The only thing I can think of is that it is inheriting something wierd or I am missing something simple... The second problem, I can't seem to make the left and right side bar expand to meet up with the footer wayy down at the bottom of the page. I want that div to make a column the whole way down. If anyone can help me out, it would be more than appreciated! Thanks I am using the following code how do I change it so that it would show up in the center of the brower window? Thanks Tim PHP Code: <div style="position: absolute; left: 0px; z-index: 1; top: 0px; align: center\"> <object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0 ,0\" width=\"544\" height=\"396\" id=\"cardio\" align=\"middle\"> <param name=\"allowScriptAccess\" value=\"sameDomain\" /> <param name=\"movie\" value=\"ads/cardio3.swf\" /> <param name=\"loop\" value=\"false\" /> <param name=\"quality\" value=\"high\" /> <param name=\"wmode\" value=\"transparent\" /> <param name=\"bgcolor\" value=\"#ffffff\" /> <embed src=\"ads/cardio3.swf\" loop=\"false\" quality=\"high\" wmode=\"transparent\" bgcolor=\"#ffffff\" width=\"544\" height=\"396\" name=\"cardio\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" /> </object> </div> 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 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 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> Here's the main site: http: // anomalyrecords . net / index . html Here's the sto http: // anomalyrecords . net / catalog I am using a Zencart embedded template to wrap the main site design around Zencart.. This is working perfectly with a small remaining issue.. I am trying to synchronize the content placement of the sidebar items between Zen Cart and the rest of the site pages.. There is an ever so slight "shift" of the sidebar elements when you toggle bewteen the site pages and the store.. I've done a lot of tweaking and I'm fairly close, but I am at a COMPLETE loss how to put this to bed once and for all. I am hoping one of the CSS gurus here will see what I am clearly missing and guide me back to the light.. 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. Hello everyone. I am working in wordpress trying to make a web site. I am pretty new to wordpress and i have basic CSS and HTML knowledge so i need some help with this. The website: Code: http://sitesuperhostdemo.com/m2/ 1. The #sidebar-1-wrap. The problem i am having is the sidebar. As you can see on the page the sidebar (#sidebar-1-wrap) is positioned under the content but i would want it to stand beside the content (#home-content). 2.The #content-sidebar-wrap. I didnt add this container it is built into wordpress but the problem is that anything i add in wordpress -> pages -> Home page is for some reason placed inside the #content-sidebar-wrap but i have no idea why. The #content-sidebar-wrap is streching my page down because it contains the sidebar but starts at the top of the default wordpress content and i am clueless as to how i can change it so it doesent include all the content i place on the page. I would like it to only contain #sidebar-1-wrap and if i am correct i assume i can then place the sidebar next to the content and stop the div from extending my page. 3. The sidebar position. I can for example set the following code to the #sidebar-1-wrap: Code: .home_page #sidebar-1-wrap { position: relative; top: -615px; left: 40px; } but there must be a better way. Also doing this doesent change the #content-sidebar-wrap. It still extends the page down as if the sidebar is still under the content. This would maybe work if i knew how to change the content so it isnt inside #content-sidebar-wrap but i see no way of doing it. Someone help please before i blow my brains out. If anyone needs clarification on anything lmk and ill clarify. 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 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. |