Center align an inline-block div with inline-block siblings - html

Question

I have a container containing any number of inline-block div tags.
Is it possible to get just a single one of these inline-block tags (actually, the last one that appears) to center align itself in the remaning space without using a radically different setup? The width of the div I need centered is unknown, and needs to fit to its contents.
Here is an example: http://jsfiddle.net/Zewav/
I'd like to get #message centered between #sidebar and the remaining space of #container

Answer 1

Not as far as I'm aware unfortunately. I'm not sure you need anything "radically different"; you will need to change your markup very slightly, though it is entirely possible to do exactly what you're asking. It's difficult to offer a solution without knowing a little more about the context.
For instance, if you just wanted the content of the div to be center aligned then I'd suggest text-align:center;. If you want to have a background on the centered element then just nest another div/span etc inside. If you're really stuck then please explain a little more of what the purpose is, and I'll try to help you come up with a solution. Here's a solution based off that:
HTML
<div id="container" class="cf">
<div id="sidebar"></div>
<div id="message">
<span>hello world</span>
</div>
</div>
...Content after
CSS
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
#sidebar {
width:200px;
height:400px;
background-color:red;
float:left;
}
#message {
display:block;
text-align:center;
}
#message > span {
padding:10px;
background:blue;
display:inline-block;
color:white;
}
Here, I float only the #sidebar. The #message div then takes up a display:block and using text-align:center, center-aligns the nested span within. You'll notice that I'm also using the micro clearfix hack, .cf as you'll need to clear your floats afterwards.
Edit: I just changed the span to be inline-block, and added a padding to demonstrate that it's working.

Answer 2

http://jsfiddle.net/feitla/Zewav/8/
I am assuming you are asking how to align the next between the sidebar and "content" within the container. You'll need to play around with the padding, but note how the text is aligning in the middle between sidebar and content.
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div class="message">Lorizzle ass dolor sit fo, mofo we gonna chung dang.</div>
<div class="message">Nullam sapien velit, aliquet yippiyo, suscipizzle its fo rizzle, gravida vel, arcu.</div>
<div class="message">Pellentesque shizznit tortizzle.</div>
<div class="message">Sizzle eros. Fusce izzle ghetto dapibizzle you son of a bizzle tempizzle fo shizzle my nizzle.</div>
<div class="message">Maurizzle mah nizzle nibh yo turpis. Vestibulum izzle tortor.</div>
<div class="message">Pellentesque uhuh ... yih! rhoncizzle yo mamma.</div>
<div class="message">In hac habitasse platea dictumst. .</div>
<div class="message">Shizzle my nizzle crocodizzle dapibizzle.</div>
<div class="message">Curabitur tellizzle urna, pretizzle eu, mattizzle ac, daahng dawg vitae, nunc.</div>
<div class="message">Pizzle suscipizzle. Shizznit semper velit sizzle purus.</div>
</div>
<div class="clear"></div>
</div>
#container {
background:yellow;
width:100%;
position:relative;
}
#container > div {
display:block;
}
#sidebar {
width:200px;
height:400px;
background-color:red;
float:left;
}
#content {
margin:0 auto;
position:relative;
margin-left:200px;
padding:0 20px;
}
.message {
background-color:blue;
}
.clear {
clear:both;
}