Thursday, November 15, 2012

Answers > How Do I Create an Html/xhtml/css Header That Automatically Adjusts to Any Screen Resolution?

How Do I Create an Html/xhtml/css Header That Automatically Adjusts to Any Screen Resolution?

by nForms on March 10, 2011

I've noticed on the wordpress website and facebook that the headers take up the full width of the screen of any computer or laptop screen i view the websites on and the center of the website stays fixed.

What is the easiest way to do this in xhtml/html/css?

Is there a website that will guide me through the process?

Help is appreciated.

Tags: , , , , ,

make header fill screen width

Similar XForms | XML Posts

{ 2 comments… read them below or add one }

y0urm0msname March 10, 2011 at 9:36 pm

Create a div that has a 100% width, give it the id #header and give it a background-color you like. Inside THAT div, create another div with a class called .container. Center the container with ‘margin: 0 auto’ and give it a width of around 975px so people will be able to see it on 1024 x 768 monitors without side scrolling. Then put your logo and website title inside the container.

Note: You can download the Firebug extension for Firefox and see exactly how FB does it if you want

RockyMtnHi March 10, 2011 at 9:36 pm

I recently had the same problem, so I Googled this: fluid css layouts
There are many examples along with the code to use directly on your pages.

Previous post:

Next post: