center DIV's inside Centered DIV

29 Posts

smette Reply #1, 13 years, 6 months ago

Hi all,

does somebody know how to Center DIV's inside one Centered DIV?
I've been searchig for this issue over the internet for a time now, and I can't find any solution to fix this. The DIV needs to be responsive aswell. Float: left doesn't work, display: inline doesn't either (even if I put the DIV's inside a list item).

I've made an example to make my problem easyier to understand.

Help would be really apreciated.

Kind regards
Simon

This question has been answered by multiple community members. See the first response.

discuss.answer

66 Posts

Glen Reply #2, 13 years, 6 months ago

What is your markup like? I'm going to assume it is like this.

<div class=wrapper>
    <div class=element>Post 1</div>
    <div class=element>Post 2</div>
    <div class=element>Post 3</div>
    <div class=element>Post 4</div>
    <div class=element>Post 5</div>
</div>

In this case you could do something like this.

* {
	box-sizing : border-box;
}

.wrapper {
	width : 80%;
	margin : 1em auto;
	border : 1px solid #000;
	padding : 1em;
	text-align : center;
}

.element {
	display : inline-block;
	border : 1px solid #000;
	width : 30%;
	margin : .5em ;
	padding : 2em;
}

A working example is here http://dabblet.com/gist/5141553

The sun always shines for tough guys.

66 Posts

Glen Reply #3, 13 years, 6 months ago

If you want to get the .element divs to same height, you will have to do it with javascript. Something like jQuery equalHeights plugin will do it. Also if you are going to use this with IE 7 or older you'll have to put

.element {
    display : inline-block;
    *display : block;
    zoom : 1;
    
   ...rest of the block
}

to trigger IE hasLayout so that those elements work correctly. Also prefix the box-sizing.

The sun always shines for tough guys.

29 Posts

smette Reply #4, 13 years, 6 months ago

You are most welcome Glen! I was searching the internet for this issue and couldn't find an answer. Thanks a lot!
Tryin' to get the .element to same height atm. I'll keep you posted!
I'm new with Javascript or jQuery.

Simon

66 Posts

Glen Reply #5, 13 years, 6 months ago

i you wan't them same height and the content is variable length or you can't set the .element height static you should check out this plugin. The usage is quite simple (make sure jQuery is added to the page).

// This one goes to the script.js file or similar
$(function(){
    $('.wrapper').equalHeights();
});

More information can be found at Filament Group Lab page. And here is a demo of the plugin in action.

The sun always shines for tough guys.

29 Posts

smette Reply #6, 13 years, 6 months ago

so I've added the lines

<script language="javascript" type="text/javascript" src="manager/templates/js/jquery.js"></script>
        <script language="javascript" type="text/javascript" src="manager/templates/js/jquery.equalheights.js"></script>

in my Template code.

In the jquery.js file i've copy pasted

$(function(){
    $('.wrapper').equalHeights();
});

and I uploaded those to my server in the manager/templates/js/ map.
I understand this should work but it doesn't. Any ideas?

I want the DIV's the same height, but the content is indeed Variable.
You can check the demo (http://www.mostlyofficial.com/index.php?id=3

Thanks for your help Glen!
Really apreciate this!

discuss.answer

66 Posts

Glen Reply #7, 13 years, 6 months ago

Ah, so you need to add the jQuery library to your site.

So the correct order of the scripts is:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="manager/templates/js/jquery.equalheights.js"></script>
<script src="manager/templates/js/jquery.js"></script> // Advice, name this scripts.js or app.js

The order is important: library, plugin, your usage

And put your scripts before the end body tag (</body>)

The sun always shines for tough guys.

29 Posts

smette Reply #8, 13 years, 6 months ago

So Glen, to make it easyer to find the reason why the scripts don't work:
Inside my template I'm using this code:

<div class="test">
    [[*content]]
</div>

and this code:

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="manager/templates/js/jquery.equalheights.js"></script>
<script src="manager/templates/js/scripts.js"></script>

Inside my CSS I'm using this code you gave me:

.test {
    width : 50%;
    margin : 1em auto;
    border : 1px solid #000;
    padding : 1em;
    text-align : center;
}
 
.element {
    display : inline-block;
    border : 1px solid #000;
    width : 200px;
    margin : .5em ;
    padding : 2em;
	display : inline-block;
    *display : block;
    zoom : 1;
}

Inside my [[*content]] is a blogpost chunk. This blogpost chunk contains following code:

<div class="element">
    <h1><a href="[[~[[+id]]]]">[[+pagetitle]]</a></h1>
    <p>[[+introtext]]</p>
<a href="[[~[[+id]]]]">Lees meer</a>
</div>

Thanks in advance

29 Posts

smette Reply #9, 13 years, 6 months ago

Okey nevermind - laugh

forgot to give values in the scripts.js file... wink

Thanks Glen!
Hero!

Answered center DIV's inside Centered DIV