Aligning all divs [HELP]

Magic

Posting Freak
Oct 11, 2012
1,026
196
So I added borders and box shadows to my divs and than it all turned to shit by going out of center. I would like all boxes to be centered nicely, I've tried a lot of things by adding margins, increasing the page wrapper width, making the divs smaller etc.

This is like the second website i have ever worked on so excuse me for any sloppy code.

You must be registered for see images attach


Code:
#header {
    float: left;
    height: 95px;
    width: 1000px;
    background: #FF6633;
    float: right;
    border:2px solid;
    border-radius:25px;
    border-color: #000000;
    box-shadow: 5px 5px 2px #888888;
}

#navigation {
    float: right;
    height: 45px;
    width: 1000px;
    background-image: url(../images/everything.png);
    border:2px solid;
    border-radius:25px;
    border-color: #000000;
    box-shadow: 5px 5px 2px #888888;
    margin: 12px;
}

#content {
    float: left;
    background-image: url(../images/everything.png);
    width: 850px;
    box-shadow: 5px 5px 2px #888888;
    margin: 12px;
    border:2px solid;
    border-radius:25px;
    border-color: #000000;
}

#leftcolumn {
    background-image: url(../images/everything.png);
    width: 150px;
    float: left;
    box-shadow: 5px 5px 2px #888888;
    margin: 12px;
    border:2px solid;
    border-radius:25px;
    border-color: #000000;
}

#footer {
    float: right;
    height: 35px;
    width: 1000px;
    background-image: url(../images/everything.png);
    clear: both;
    box-shadow: 5px 5px 2px #888888;
    margin: 10px;
    border:2px solid;
    border-radius:25px;
    border-color: #000000;
}
 

Sysode

Front-End Developer
Dec 11, 2012
1,673
848
Do you not have a container? Using of them will help aligning things, I take it you'd want it a fixed design so try this code:
Code:
.container {
    width:980px; /* change to what you want */
    margin:0 auto; /* Aligns it center */
Apple this before all of your grouped elements and see if that helps you out. Feel free to PM if you require any further help.

Also just a heads up, try to use classes (example: .container) in CSS as they're faster selectors and use ID's (#header) for javascript as it's what they're meant for. It doesn't really make a real difference for a small site, just comes in handy to get in the habit of.
 

Users who are viewing this thread

Top