I have a layout that contains absolute and relative divs within a overall relative container div.
When the outside relative container div has a border around it, all the internal divs position well. When I remove the border (it was temporary only), positioning breaks. and absolute divs become "place" inside the next relative div below them.
Any suggestions?
(and yes, I know this is still quite rough regarding overall style. And no, I didn't choose these fonts... so bear with me on that stuff :) )
Tami, sorry, I thought those two links were screenshots, I didn't look deeper..it's the margin on #pagecontainer, if you change the margin-top to 0, and add a padding top of 117px, it should work for you..
Tami, don't know what to tell you then, that's the culprit..I'd discourage you from adding more positioning in, because it just causes headaches down the road. The margin-top of #pagecontainer pushes everything else down..
Your other alternative is adding overflow: auto; to the parent div, but then you lose the box-shadow altogether.
If you're set on using positioning to remedy the problem, you could alternatively apply top: -117px to both logo and phone number to compensate for the margin-top: 117px
Frankly, I'm of the opinion that the use of positioning should be limited to 'special' effects that can't be done any other way.
Using them to position everything means, IMO, that the coder hasn't grasped the proper way HTML flows.
Also, they are a b*tch to maintain / update.
On looking at the link given, there is really nothing in there that requires any element positioning at all. A couple of floats maybe (which isn't the same thing) but otherwise, nada.
Though I agree with @ChrisP and @PaulieD that it is probably be better to do things in a different way, the easiest fix in my opinion would be to change that yellow border to a transparent one:
I agree @PaulieD, but prject is inherited and client not certain of positioning of top area at this point. I wound up separating the two containers, so that #pagecontainer is not nested within the other container which contains the absolute positioning. Not elegant, but simpler and easier manage updates.
IMO, I rarely use absolute positioning on most work.
Thanks guys.
@TBurke,
I can answer your question. Your basic markup was like this: #outercontainer, then two child divs that were taken out of the document flow because they were position: absolute. The next element was the #pagecontainer which has a top margin of 117px. This top margin extends outside of its parent (#outercontainer) unless one of couple things happen. The first two are either a top padding, or top border on the parent - you had placed a top border to temporarily outline elements. The other way is to change the block formatting context of the parent. Any of these changes will force the element's top margin to begin at the top of the parent instead of extending outside. So, how do you change the BFC of the element? Simple - add overflow: hidden; to #outercontainer
Now, that you know the why, I have to agree with Paulie, I don't think I would have used absolute positioning here. I'm not as reserved as Paulie with regards to AP, but I would have gone with floats here.
I have a layout that contains absolute and relative divs within a overall relative container div. When the outside relative container div has a border around it, all the internal divs position well. When I remove the border (it was temporary only), positioning breaks. and absolute divs become "place" inside the next relative div below them.
Here are some links that may help show the issue: http://hhwdsandbox.com/csstest/testwborder.cfm
(border around outercontainer. All positions well)
http://hhwdsandbox.com/csstest/testnoborder.cfm (border commented out. Throws top abolute divs logo & phone off)
Here is a graphic of the overall div structure: http://hhwdsandbox.com/csstest/pagelayout.png
Any suggestions? (and yes, I know this is still quite rough regarding overall style. And no, I didn't choose these fonts... so bear with me on that stuff :) )
Tx, Tami
Tami, do you by chance have a live link so we can see what's going on?
yes, in the links above: CSS files are identical, but I commented out the "border" for the #outercontainer div on the "testnoborder" example...
the CSS files would be http://hhwdsandbox.com/csstest/cerra_bordered.css and http://hhwdsandbox.com/csstest/cerra.css
(identical w/ no border)
Tami, sorry, I thought those two links were screenshots, I didn't look deeper..it's the margin on
#pagecontainer, if you change the margin-top to 0, and add a padding top of 117px, it should work for you..No, that #pagecontainer has a shadow that I do not want in the top area. Adding padding adds the shadow all the way to the top.
I can make the div absolute, but then my page's bottom margin gets cropped off.
Tami, don't know what to tell you then, that's the culprit..I'd discourage you from adding more positioning in, because it just causes headaches down the road. The
margin-topof#pagecontainerpushes everything else down..Your other alternative is adding
overflow: auto;to the parent div, but then you lose the box-shadow altogether.If you're set on using positioning to remedy the problem, you could alternatively apply
top: -117pxto both logo and phone number to compensate for themargin-top: 117pxEdit: the phone number would be -80px
Frankly, I'm of the opinion that the use of positioning should be limited to 'special' effects that can't be done any other way.
Using them to position everything means, IMO, that the coder hasn't grasped the proper way HTML flows.
Also, they are a b*tch to maintain / update.
On looking at the link given, there is really nothing in there that requires any element positioning at all. A couple of floats maybe (which isn't the same thing) but otherwise, nada.
Though I agree with @ChrisP and @PaulieD that it is probably be better to do things in a different way, the easiest fix in my opinion would be to change that yellow border to a transparent one:
I agree @PaulieD, but prject is inherited and client not certain of positioning of top area at this point. I wound up separating the two containers, so that #pagecontainer is not nested within the other container which contains the absolute positioning. Not elegant, but simpler and easier manage updates.
IMO, I rarely use absolute positioning on most work. Thanks guys.
@TBurke, I can answer your question. Your basic markup was like this: #outercontainer, then two child divs that were taken out of the document flow because they were position: absolute. The next element was the #pagecontainer which has a top margin of 117px. This top margin extends outside of its parent (#outercontainer) unless one of couple things happen. The first two are either a top padding, or top border on the parent - you had placed a top border to temporarily outline elements. The other way is to change the block formatting context of the parent. Any of these changes will force the element's top margin to begin at the top of the parent instead of extending outside. So, how do you change the BFC of the element? Simple - add overflow: hidden; to #outercontainer
Now, that you know the why, I have to agree with Paulie, I don't think I would have used absolute positioning here. I'm not as reserved as Paulie with regards to AP, but I would have gone with floats here.