Webpage needs to float with gray border all around

I've got to make a webpage that looks like it's floating in a gray background.  I know how to do most things when it comes to designing webpages but this is stumping me.  Any help would be greatly appreciated.  Would also like the css to be on the template so I can put all my settings there.
lrollinsIT ManagerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Can you please elaborate on what you mean by "float with gray border all around"? Thanks!
RartemassLife CoachCommented:
If I understand you correctly you want main content that doesn't extend to the full dimensions of the browser window, and fills the empty space with the colour gray. Is that accurate?
Assuming it is you need to set the HTML tags like this:

<div id="container">
<div class="banner">...</div>
<div class="menu">...</div>
<div class="content">...</div>

In the CSS you then style body and html to have 100% width, and container as smaller than that eg 80% width.
Everything else will adjust to the size of the container div and there will be 20% of the view window left blank. You style body with an appropriate background colour (gray in your instance).
If you want you can also position content so that it breaks free of the borders of the container and utilises the empty space.

Another interpretation is your client wants it to look like the page is floating on water which is gray. Again you'd set it up as I suggested above, but with styling you'd need to create borders so it looks like it has depth (not too difficult).
From there you could add a ripple effect with flash/silverlight/javascript/jquery/etc to the gray background when scrolling or clicking.
You could also have the page tilt slowly when not being interacted with so it appears as a leaf floating on water. All of that needs flash or similar but would make it look like it is floating on a liquid similar to water (just gray).
lrollinsIT ManagerAuthor Commented:
Rartemass,  The gray area around it is exactly what I want but my problem is that I'm not very good yet at using css.  We had someone else do our previous website but now they want me to do it.  I understand what you're telling me to do but just don't know how as of yet.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

RartemassLife CoachCommented:
OK then, with the above HTML as a base the CSS would look something like this.
html {
overflow-y: scroll; /* this adds a vertical scrollbar on all pages and prevents short pages from aligning wider to account for the missing scrollbar. */
overflow-x: auto; /* this adds a horizontal scrollbar for wide pages when needed. */

body {
width: 100;

#container {
width: 80%;
max-width: 1260px; /* this stops the layout getting too wide on large monitors. IE6 does not respect this. */
min-width: 780px; /* this stops the layout getting too narrow. Again IE6 does not respect this. */
background: #ffffff;
margin: 0 auto; /* this will centre the layout */

Open in new window

From here the rest of the styling will be up to preference and function.

www.w3schools.com is a great reference for all the CSS options and what can and can't be done. Click on the CSS3 link. Clicking on the property will explain all about it and how to use it.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
lrollinsIT ManagerAuthor Commented:
Thanks.  I really appreciate the help.  This will help me get started.
lrollinsIT ManagerAuthor Commented:

I have another question for you.  Attached is an example of how the page will be laid out.  The text and pictures will change and some of the boxes within the container will probably change in size from webpage to webpage.  Is it possible to get the page to float in the center of the gray area?  I don't usually have problems with this stuff but I just can't seem to get it going.
RartemassLife CoachCommented:
Yes that layout will work on the "floating grey".
As long as all your content is placed inside the container div in your html it should stay within it.

My previous HTML example already started on this for you.

<div id="container">
<div class="banner">...</div>
<div class="menu">...</div>
<div class="content">...</div>

Banner could be the place for the logo, text, text, and search across the top.
Menu could be for the menubar.
Content could be for the 3 pictures + 2 text + one blank slice.
You can then add in another couple divs for the other wide image and the footer (logo+text+copyright).
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.