Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
Googled alot on this issue but not found a valid solution yet.
My site under development is at www.glhf.no/dev
As you can see i want an border around the entire page. The div wrapper is basicly what keeps everything together.
With an height set at 100%. I learnt that i had to set body as well at 100% if this is going to work but its not.
The border gets cut off in the middle as you can see.
Any tips here if anyone can look with Firebug? :) -
How about this one?
-
Set the display value for the parent item (with the border) to table:
i.e
.parent_container
{
display:table;
}
This will make the parent DIV grow to accommodate the size of all the items inside it. -
I recommend you to add a very useful technique called Clearfix, so the thin line of the main DIV will follow the content inside (for less or for more).
Below is the code, put it at the top of your CSS stylesheet and then apply it as a class to the #wapper DIV:
/*---- begin Clearfix code ---------- */
.Clearfix:after /*W3C*/
{
content:" ";
display:block;
font-size:0;
height:0;
clear:both;
visibility:hidden;
}
.Clearfix {display: inline-block;}
*+html .Clearfix {min-height: 1%;} /*IE7*/
* html .Clearfix {height:1%;} /*IE6*/
/*---- end of clearfix code ----------------*/
And delete from your #wrapper DIV the following:
height:auto !important;
min-height:100%;
position:relative;
This is just to not cause any problem with the Clearfix class.
The Clearfix class can be applied to any element that works as a container or a wrapper.
I see iDonny tell you to use the property display:table; but this is not recommended in this case of a main container.
Cheers!
,-·*’°§ aleare §°’*·-,
www.aleare.com.ar -
- CommentAuthornikhil_nine
- CommentTimeJul 2nd 2009
hi...
i hv a small suggestion whether it is workin for u or not i dnt know... if u wanna give a border to a whole page...plz give a style (class) to a table like..style="border-left: 1px solid #63686e; border-top: 1px solid #63686e; border-right: 1px solid #63686e; border-bottom: 1px solid #63686e; padding: 0"
and put ur design in that table also make the table property 98% width and center allign so that it will be displayed in center of page as u want.
1 to 5 of 5