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)

  Print Answers RSS
0 George Jonsson 215
1 Kornfeld Eliyahu Peter 169
2 OriginalGriff 120
3 PIEBALDconsult 110
4 BillWoodruff 85
0 OriginalGriff 6,165
1 DamithSL 4,658
2 Maciej Los 4,087
3 Kornfeld Eliyahu Peter 3,649
4 Sergey Alexandrovich Kryukov 3,294


Advertise | Privacy | Mobile
Web02 | 2.8.141220.1 | Last Updated 16 Dec 2012
Copyright © CodeProject, 1999-2014
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