CODEWITHSUNDEEP
javascriptcsspaddinghtml
OhSoAdam
OhSoAdam

Reputation: 31

Using JavaScript to center multiple divs in a fluid layout

I'm trying to align multiple divs in the center of a container div. I am using the modulus function to work out the padding needed from the left hand side of the page. Here is the JavaScript I am using:

JavaScript

window.addEventListener("resize", winResize, false);
var width, leftPad, space, boxWidth;

winResize();

function winResize() {
    width = document.getElementById('body').offsetWidth;
    boxWidth = 350 + 10 + 10;
    space = width % boxWidth;
    document.getElementById('a').innerHTML = width + '....' + space;
    leftPad = space / 2;
    document.getElementById('container').style.paddingLeft = leftPad + 'px';
    document.getElementById('container').style.width -= leftPad;

};

The HTML is as follows:

<div id="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

And the CSS:

#container {
    width: 100%;
    float: left;
}
#container .block {
    width: 350px;
    height: 350px;
    background-color: 4e4e4e;
    float: left;
    margin: 10px;
}

My problem is with this code, the padding on the left pushes the container div to the right, which makes the page wider than the window. I have tried removing the padding from the width of the container (in the bottom line of the winResize function) but this doesn't seem to do anything. Is there a way I can remove this "excess div" with CSS padding/margins?

Upvotes: 0

Views: 252

Answers (2)

SidOfc
SidOfc

Reputation: 4584

I would like to know if there is any reason why you want to CENTER an html element?

This is a CSS job and CSS does a very good job at it.

If you want to center your DIVS you could use margin: 0 auto; on the .block. This would center your layout and keep the elements block level as well.

Your css would look like this:

#container {
    width: 100%; /*Remove the float, it's not needed. Elements align top-left standard.*/
}

#container div.block {
    width: 350px; /*Makes it possible for margin to center the box*/
    height: 350px; 
    background: #4e4e4e; /*background is the shorthand version*/
    margin: 10px auto; /*10px to keep your margin, auto to center it.*/
}

This should get rid of your problem, and makes your page load faster since theres no JS plus, the layout can never be "disabled" due to JS being disabled.

Hope this helped, if it did don't forget to upvote / accept answer

‐ Sid

Upvotes: 0

rougebot
rougebot

Reputation: 104

What I can perceive is that you are trying to make container look in the center of your page, js is not required to do it and prefer not use js to position static elements in your page ever.

Here is the css you should use to make it come in center and fluidic

 #container {
    width: 100%;
    text-align:center;
 }

 #container .block {
    width: 350px;
    height: 350px;    
    background-color: #4e4e4e;
    display:inline-block;
    margin: 10px;
 }

Also you can see this fiddle : http://jsfiddle.net/ghFRv/

Upvotes: 1

Related Questions