Home/ Questions/Q 8305639
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T18:09:26+00:00

I’m really stuck with trying to keep div blocks centered with the exception of

  • 0

I’m really stuck with trying to keep div blocks centered with the exception of the last row.

Someone else already created this fiddle that kind of demonstrates my question. You can see how the blocks in the result panel stay centered even when the window is resized. I would like to have similar behavior BUT if the last row contains less blocks than the rows above, then that last row should not get centered but left aligned.

Here is the fiddle:
http://jsfiddle.net/zbbHc/1/

Someone might ask why I don’t just use float:left. The problem with that is that I couldn’t find a way of centering my blocks using that method without also specifying a fixed width for my wrapper. I’m trying to keep everything as liquid as possible.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this fiddle http://jsfiddle.net/zbbHc/45/

    Not sure, but I think this is the maximum we can do using CSS alone.

    Update: (THis will not work in all cases, check the code below which work in all cases [I guess])

    HTML

    <div class="wrapper">
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB hide"></div>
    <div class="iB hide"></div>
</div>

    CSS​

    .wrapper {
    width: 100%;
    background: red;
    text-align: center;
    text-align-last: left;
}

.iB {
    display:inline-block;
    width: 200px;
    height: 100px;
    background: green;
}
.iB.hide {
   visibility:hidden; 
}

    ​

    Here is the quick and dirty method using jQuery. This will add invisible elements automatically

    Fiddle here http://jsfiddle.net/fD6fn/

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="lib/jquery-1.6.2.min.js"></script>
<style>
.wrapper {
    width: 100%;
    background: red;
    text-align: center;
    text-align-last: left;
}

.iB {
    display:inline-block;
    width: 200px;
    height: 100px;
    background: green;
}
.iB.hide {
   visibility:hidden; 
}
​
</style>
</head>

<body>
<div class="wrapper" id="wrapper">
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
    <div class="iB"></div>
</div>
<script language="javascript">
function findHiddenElementCount() {
var $wrapper = $("#wrapper"),
    itemWidth = "200",
    count = "",
    itemCount = 7; 

    count = $wrapper.width()/itemWidth;

// Some wild logic below, can be optimized.
return parseInt(count) - (itemCount - (parseInt(itemCount/parseInt(count)) * parseInt(count))) ;
}



function addInvisibleElements() 
{
    // Delete invisible items
    $("#wrapper .iB.hide").remove();


    var c = findHiddenElementCount();

    for(var i = 0; i < c;i++)
    {
        $("#wrapper").append('<div class="iB hide"></div>');
    }

}

$(window).bind("resize",addInvisibleElements); // resize handler

$(document).ready(addInvisibleElements); // take care during page load

</script>
</body>
</html>
    • 0