Click here to Skip to main content
11,802,442 members (71,316 online)
Rate this: bad
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.


Screenshot of how the site is now:!111&authkey=!AAjj6qxMvhQz_IY[^]
Posted 15-Dec-12 19:02pm
Edited 15-Dec-12 19:45pm
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

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..
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..
margin: auto;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
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 and read it see if anything will assist you.

1 solution

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

Solution 1

You need to use both auto in the style:

This is somewhat counter-intuitive, but works correctly.

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?
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 KrunalRohit 366
1 OriginalGriff 365
2 F-ES Sitecore 295
3 Afzaal Ahmad Zeeshan 230
4 CPallini 230
0 OriginalGriff 2,950
1 Maciej Los 1,910
2 KrunalRohit 1,862
3 CPallini 1,645
4 Richard MacCutchan 1,157

Advertise | Privacy | Mobile
Web03 | 2.8.151002.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