Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: HTML HTML5/CSS
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.5K
Edited 15-Dec-12 20:45pm
v3
Comments
Krunal Rohit at 16-Dec-12 1:05am
   
could you please attach screen shot of it ??
Sicppy at 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 at 16-Dec-12 1:31am
   
Take a screenshot and upload it on sky drive or dropbox etc... and provide us link..
Krunal Rohit at 16-Dec-12 1:47am
   
Now tell the exact problem that you're facing...
Sicppy at 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 at 16-Dec-12 1:56am
   
Okay have you tried with <table> ??
Krunal Rohit at 16-Dec-12 1:59am
   
take one <div width="75%"> under center tag....
Sicppy at 16-Dec-12 2:19am
   
I don't quite get what you mean, could you sketch up some quick sample code
Krunal Rohit at 16-Dec-12 2:25am
   
<div width="75%">
// here your site data
</div>
 
try this code under center tage...
Sicppy at 16-Dec-12 2:31am
   
I don't have a center tag
Krunal Rohit at 16-Dec-12 2:34am
   
so write center tag and do as I said..
see http://www.w3schools.com/tags/tag_center.asp
Sicppy at 16-Dec-12 2:37am
   
Center tag isn't supported in html5
Krunal Rohit at 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 at 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 at 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 at 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
Sergey Alexandrovich Kryukov at 25-Dec-12 1:43am
   
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 at 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)



Advertise | Privacy | Mobile
Web01 | 2.8.150302.1 | Last Updated 16 Dec 2012
Copyright © CodeProject, 1999-2015
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