buddies Posted May 10, 2013 Share Posted May 10, 2013 Hi, I have a wordpress blog, http://bupphawitt.com/, that I want to create extra sidebars outside the container, and on both sides of it. The sidebars have to be fixed, so that when I scroll down the page the sidebars remain fixed. Please see yahoo page for similar idea I want to create, http://www.yahoo.com/. Have a look at its left sidebar, which is how I want my site to be, just the extra boxes on both sides. I have tried to create a wrapper outside it, but unsuccessful. I must have done something wrong. Can someone please guide me to the right direction? Any help would be highly appreciated. Please find a drawing attached, so you can better see how it should look. Beforehand Thanks! My website is: http://bupphawitt.com/ Regards, Buppha Witt Link to comment Share on other sites More sharing options...
niche Posted May 10, 2013 Share Posted May 10, 2013 Just add a div with the appropriate width on either side of the wrapper and float everything left including the wrapper. Link to comment Share on other sites More sharing options...
buddies Posted May 10, 2013 Author Share Posted May 10, 2013 Hi, thanks for your prompt response! I'll try it now. Thanks! Link to comment Share on other sites More sharing options...
buddies Posted May 10, 2013 Author Share Posted May 10, 2013 Please tell me again how to float everything left and in which file do I have to modify? I've added 2 boxes on both sides, but they look terrible, and I don't know how to fix it. Link to comment Share on other sites More sharing options...
buddies Posted May 10, 2013 Author Share Posted May 10, 2013 Please have a look on my website now with the new boxes on both sides, http://bupphawitt.com/ Link to comment Share on other sites More sharing options...
buddies Posted May 10, 2013 Author Share Posted May 10, 2013 They don't seem to be fixed at all, and don't stay along the container?! Link to comment Share on other sites More sharing options...
niche Posted May 11, 2013 Share Posted May 11, 2013 I looked at your site, but didn't see the divs I suggested (on either side of the wrapper). This should help: http://www.w3schools.com/cssref/pr_class_float.asp Link to comment Share on other sites More sharing options...
buddies Posted May 11, 2013 Author Share Posted May 11, 2013 Hi, thanks for your advice. I have put the code you told me from http://www.w3schools.com/cssref/pr_class_float.asp. And change "image" to left & right sidebars instead. But the layout still looks funny?! Below is the code that I put in between the <head> tag and in the style.css: <style>.new-leftsidebar .new-rightsidebar{float:left;}</style> Link to comment Share on other sites More sharing options...
niche Posted May 11, 2013 Share Posted May 11, 2013 link is down Link to comment Share on other sites More sharing options...
dsonesuk Posted May 11, 2013 Share Posted May 11, 2013 The position fixed container can be placed anywhere within the page, it does not matter as it out of the flow from all other elements, its position is determined by the boundary area of the browser window. (1) create fixed outer container, and use top:0; left:0; right:0;(2) create inner container same width as wrapper plus the width of both side panels(3) add left right side panels, and float these Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now