Jump to content
xisto Community
darran

Hybrid Css Layouts What is the right way to create them?

Recommended Posts

I was looking for a hybrid layout where the header and footer are set to full percentage width and the content is set to a fix width, a very popular layout in today's websites. Do you think you could provide such an example? Not that I do not know how to create one, I just want to know about the right way to actually layout with such specifications.

Share this post


Link to post
Share on other sites

That is exactly how I would create a hybrid layout but 1 question?I tend to define my base font size with px and everything else later in em because 1em in a 12px is 12px and 0.95em is 11px and so on and so forth. For DIVs, I just use px too. What is the significance of using em all the way? It will become something very relative.

Share this post


Link to post
Share on other sites

IE has problems with text re-sizing of pixel based pages, which is a really good feature to have if you want/need a more accessible site, so using ems solves this problem.The percent size of Font on the Body tag brings IE font-sizes in-line with the other Browsers. Without the 62.5% there, IE will display larger font sizes by default and using this technique allows you better font management across multiple browsers.

Share this post


Link to post
Share on other sites

IE has problems with text re-sizing of pixel based pages, which is a really good feature to have if you want/need a more accessible site, so using ems solves this problem.The percent size of Font on the Body tag brings IE font-sizes in-line with the other Browsers. Without the 62.5% there, IE will display larger font sizes by default and using this technique allows you better font management across multiple browsers.


Once again it is IE. So lets say if I put 1em as the margin-right for my DIV, what is the exact spacing in pixels it will generate?

I will be sure to note this when I get down to coding my WordPress template.

Share this post


Link to post
Share on other sites

Once again it is IE. So lets say if I put 1em as the margin-right for my DIV, what is the exact spacing in pixels it will generate?
I will be sure to note this when I get down to coding my WordPress template.


There is no way to tell. It will depend on the browser and its settings. As one em is the width of an 'm' in the current font, at the current font size, the margin would change depending on which font and font size the browser was using.

Share this post


Link to post
Share on other sites

There is no way to tell. It will depend on the browser and its settings. As one em is the width of an 'm' in the current font, at the current font size, the margin would change depending on which font and font size the browser was using.

So there is no way of setting a fixed layout which will look the same? I want to have a layout which will look the same in every browser. Let's say I am using Arial with font size: 100%, I do know that IE uses 12px for that, but I am not sure about Safari, FireFox and Opera.

Share this post


Link to post
Share on other sites

Try specifying a particular font-face, font-size and font-weight then check it in a few Browsers.Use the body font percent code found above if they display differently and use em's as above is the cure I use.

Share this post


Link to post
Share on other sites

I can't manage to get the em right on the DIVs, giving me a headache. What does it take reference to? What if it is a div is nested in another div?I am confused, would appreciate some assistance, it is much more easier setting the layout in px and text size in em.

Share this post


Link to post
Share on other sites

Can you post up your code and we'll have a look to see if what you are doing is possible?Or better still, post a link to a page... Thanks.

Share this post


Link to post
Share on other sites

Replied by PM.Simply give the content div a width in pixels and then the inner content should be given a smaller width in pixels and margin: 0 auto to centre it. Older versions of IE mayl need text-align: center on the outer div to behave in the same fashion.

Share this post


Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.