center div blocks but not in the last row

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.

Answers:

Answer

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>
Answer

Why don't you use percentage? http://jsfiddle.net/zbbHc/38/ that's how most of fluid layouts usually work

Answer

When you say 'if' the last row has fewer blocks do you mean that it's dynamic content? If you know it will have one then you can just position it relatively to the value of half its own width(and any margins etc)

.iB:last-child{
   position:relative;
   left:-100px;
   background:blue;
}

http://jsfiddle.net/zbbHc/54/

Answer

It may be possible to do this with a table (though I tend to try to avoid tables). Table-cells' dimensions are determined by their contents (of course, you can add your own, or max/min dimensions). You could have a table with one column and (although it's not best practice) embed divs into the table (each div being a block).

The width of the table would be fluid because it would be based on the width of the widest cell (thus, the blocks will line up nicely and will look very neat), and you could hard-code or script (of course, I suggest scripting) a style/method to check if the last row contains less blocks, and if it does to set the text-align to left for that cell, only.

This solution could probably use some improvement, but it may be a good start, depending on what your going to use this for.

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.