I have begun a new theme on drupal using the Boilerplate theme. I am trying to achieve a centered(responsive width) layout with borders on both left and right sides. I have attached a diagram. DIAGRAM HERE

I have the left side borders working fine, they are within the #PAGE div which is the one and only WRAPPER of all content. (there is no other div above it)

As i have shown in the diagram, i am having trouble with the RIGHT side borders. With the same CSS syntax as the left borders, you can see they are positioned all the way to the right, even though they are inside the #PAGE div. Why is this? why is the #PAGE div not pulling it together?

Thanks for the help!

EDIT codejsFiddle demo/mockup

PS- these 'borders' need to hold images as backgrounds so i can not simply use the 'border' property. And the 'border-image' is not well supported. DIV's is what i need.

  • Is there a reason you're not declaring the "borders" in CDs as border-left/right as declarations on the page div? – nizz0k Jun 22 '15 at 5:00
  • Like border-right:34 px solid your color – nizz0k Jun 22 '15 at 5:01
  • Yes, i will make it clear in the original post. I need images inside the 'borders'. – tacss Jun 22 '15 at 5:09

The main problem in your example is that your "border" <div>'s have position: fixed; so they refer to the viewport rather than to the parent <div id="page">.

It's why you observe the right ones behaviour, which is pretty normal.
The left ones seem to refer to #page, only because they have not any left or right property set, so it defaults to auto.

Hence here is the first point: you must set position: absolute; for these "borders".

Additionaly you must remember that, for the absolute positioned element to refer to its nearest parent, this one must not have position: static, or another parent will be looked for as reference... till <body> if none is found, so it will be the same as for a fixed positioned element.

So here is the second point: you must set position: relative; for the parent #page.

From there you have to manage with leftand right properties to get what you want.
You can look at this fiddle, where I added the needed properties to strictly conform to your DIAGRAM exposed wills.

  • This works very well, Big Thanks! the only thing is......when i begin to resize the browser window, #border1-l and #border1-r disappear. I cant manage to put a margin on, if i use margin-left/right then both borders are pushed Inwards rather than have an Outside margin. I cant use margin-left/right on #page because im using "margin:0 auto". Any suggestions? – tacss Jun 23 '15 at 20:16
  • I don't understand: I just controlled, not only with the fiddle but also creating an independant .html file, and borders never disappear. Only when the window becomes smaller than the whole picture, they're gracefully reduced till disappearing, yes, but seems totally normal in this extreme situation. So what? – cFreed Jun 24 '15 at 10:24
  • yes, that's what I mean, the brown borders slowly dissapear. I can put a border around #page this works. I can also use margins on everything, but just a bit messy. I began reading about a spacer div, will try it later tonight -not at my computer. – tacss Jun 24 '15 at 13:58
  • Oh, if that's what you mean, I can't figure out what else you hoped? The only alternative I can think to is: when the window becomes too small, reduce the #page itself. You could get that simply replacing its width by max-width. – cFreed Jun 24 '15 at 20:19
  • Oops... Don't pay attention to the previous comment: I'd thoughtlessly forgotten that #page already had a max-width, so this is not the solution. Fortunately, a few hours later, I was curious to examine it again and realized... But now I find a solution using jQuery, and it works: look at this new fiddle version. – cFreed Jun 24 '15 at 23:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.