Need help with div alignment

Question

0.00/5 (No votes)

See more:

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 19:02pm

Sicppy

Updated 15-Dec-12 19:45pm

v3

Add a Solution

Comments

[no name] 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?

[no name] 16-Dec-12 1:31am

Take a screenshot and upload it on sky drive or dropbox etc... and provide us link..

[no name] 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

[no name] 16-Dec-12 1:56am

Okay have you tried with <table> ??

[no name] 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

[no name] 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

[no name] 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

[no name] 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

Add a Solution

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

Sergey Alexandrovich Kryukov · Answer 1 · 2012-12-16T13:50:00

Solution 1

You need to use both auto in the style:

CSS

margin-left:auto;
margin-right:auto;

This is somewhat counter-intuitive, but works correctly.

—SA

Posted 16-Dec-12 13:50pm

Sergey Alexandrovich Kryukov

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

Sergey Alexandrovich Kryukov 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 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.

Need help with div alignment

1 solution

Solution 1

Add your solution here

Preview 0

Need help with div alignment

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us