Click here to Skip to main content
12,073,325 members (73,034 online)
Rate this:
 
Please Sign up or sign in to vote.
See more: HTML HTML5
I would like to be able to have my website centered but not take up the space around it, what I am trying to do is have my website centered but then have a side box outside of the main site that takes up the space in the left margin, the margin:auto; or margin: 0 auto; in css doesn't work because then the div takes up the space in the margins and there is no room for anything else, and there is no float:center; Any and all help is appreciated.

-Jordan

Screenshot of how the site is now: https://skydrive.live.com/redir?resid=BA174670C15415EE!111&authkey=!AAjj6qxMvhQz_IY[^]
Posted 15-Dec-12 20:02pm
Sicppy1.6K
Edited 15-Dec-12 20:45pm
v3
Comments
Krunal Rohit 16-Dec-12 1:05am
   
could you please attach screen shot of it ??
Sicppy 16-Dec-12 1:30am
   
of how it is now
or do you want me to make a rough sketch of how I want it?
Krunal Rohit 16-Dec-12 1:31am
   
Take a screenshot and upload it on sky drive or dropbox etc... and provide us link..
Krunal Rohit 16-Dec-12 1:47am
   
Now tell the exact problem that you're facing...
Sicppy 16-Dec-12 1:50am
   
I told you, I need to know how to keep the site centered while still being able to put stuff in the margins
Krunal Rohit 16-Dec-12 1:56am
   
Okay have you tried with <table> ??
Krunal Rohit 16-Dec-12 1:59am
   
take one <div width="75%"> under center tag....
Sicppy 16-Dec-12 2:19am
   
I don't quite get what you mean, could you sketch up some quick sample code
Krunal Rohit 16-Dec-12 2:25am
   
<div width="75%">
// here your site data
</div>

try this code under center tage...
Sicppy 16-Dec-12 2:31am
   
I don't have a center tag
Krunal Rohit 16-Dec-12 2:34am
   
so write center tag and do as I said..
see http://www.w3schools.com/tags/tag_center.asp
Sicppy 16-Dec-12 2:37am
   
Center tag isn't supported in html5
Krunal Rohit 16-Dec-12 2:39am
   
So use css for that..
<style>
.center{
margin: auto;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
</style>
Sicppy 16-Dec-12 2:46am
   
First of all, if you use css inside of the same html page id recommend using the <link> tag to add an external css page that would be applicable to all the pages, second, what exactly are you saying I should do
vbmike 16-Dec-12 18:32pm
   
Sounds like you need a two or three column layout. Centering the website will center everthing inside a "wrapper" div in the center of the screen. You need to use css to float some of your divs and use margins to position everything. I dont fully understand what you are trying to have the page look like either. Visis http://matthewjamestaylor.com/blog/ultimate-multi-column-liquid-layouts-em-and-pixel-widths and read it see if anything will assist you.

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

You need to use both auto in the style:
margin-left:auto;
margin-right:auto;

This is somewhat counter-intuitive, but works correctly.

—SA
  Permalink  
Comments
Sicppy 25-Dec-12 1:28am
   
Two things, first, using the margins would take up the space in the margins not allowing me to put a div there, second, using margin: 0 auto; gets the job done, I recommend using that instead
   
You are saying strange thing. If you want to center anything, it assumes that there is a space on left and right which you need to distribute evenly. What "take up space" do you mean? If you see that margin: 0 auto solves your problem, what's the problem though?
—SA
Sicppy 1-Jan-13 18:24pm
   
I was saying that margin: 0 auto; and magin-left:auto; margin-right:auto; accomplish the same thing, and neither of them solve my problem, I want to put a nav box in the margin, but I cant because it floats above or below the margins.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web03 | 2.8.160208.1 | Last Updated 16 Dec 2012
Copyright © CodeProject, 1999-2016
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100