Cebtering multiple divs inline

HTML & CSS
1

I have a small script that generates, based on the day, the days left to an specific event, this is an example


<!-if looking for tommorrow then I have to create a div->
<div>1</div><!-the number 1 represents 1 day left to the event->
<!-if looking for tten days from now then I have to create 2 divs->
<div>1</div><div>0</div><!-the number 1 and 0 represent 10 days left to the event->

and so on, if 100 days left then 3 divs will be created, well they could be a div a p an h3 or any other text containing tag, the reson I am separating them by each character is because I am styling them to have a border around each number so it could well be 1, 2, 10, 100, 1000 days left or any other amount of days so my question is how can I align this elements to have around 5px in between and at the same time center them inside the container, the container is 180px wide, I can do it if I knew how many divs will be created, but in my situation it could be any amount of divs from 1 to no more than 4 or 5 but they are created dinamically

2

  1. use an inline-level container like span or set display:inline;

  2. set text-align:center;

  3. add padding.

though I think I’d have to see a larger data set and an actual render of what you are trying to accomplish. Honestly just dumping out numbers blindly like that without any sort of semantics sounds REALLY bad – but not knowing what the data is actually for I’m just guessing wildly while blindfolded.

3

This is the code I got


<script
type='text/javascript'
src='https://ajax.googleapis.com/ajax/libs/mootools/1.3.2/mootools.js'>
</script>
<style type="text/css">
div#tlak_count_down_ {
	height:auto;
	min-height:126px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 195px;
	background:green;
	overflow:visible;
}
div#tlak_count_down_ a:link, a:visited {
	text-decoration: none;
	}	
div#tlak_count_down_ a:hover, a:active {
	text-decoration: none;
	}
div#tlak_count_down_ div#tlak_top_message {
	height:auto;
	max-height:84px;    
	margin-left: auto;
    margin-right: auto;
	text-align:center;
	color: blue;
    font-size: 25px;
	background:gray;
	font-family:"Times New Roman", Times, serif;
}
div#tlak_count_down_ div#tlak_count_display_ {  
    border: solid 1px #aaa;  
    text-align: center;  
    letter-spacing: 35px;  
    white-space: nowrap;    
    overflow: hidden;  
}
div#tlak_count_down_ div#tlak_count_display_ div#tlak_margin {
	width:20px;
	margin:0 3px 0 3px;
	padding-left:2px;
	height:35px;
	text-align:center;
	color: blue;
    font-size: 30px;
	border: solid 2px;
	background:black;
	float:left;
	display: inline-block; 
	vertical-align: middle;
}
div#tlak_count_down_ div#tlak_count_display_ div#tlak_margin_ {
	width:20px;
	margin:0 3px 0 3px;
	padding-left:2px;
	height:35px;
	text-align:center;
	float:left;
	display: inline-block; 
	vertical-align: middle;
}
div#tlak_count_down_ div#tlak_bottom_message {
clear:both;
	height:auto;
	max-height:84px;    
	margin-left: auto;
    margin-right: auto;
	text-align:center;
	color: blue;
    font-size: 20px;
}
</style>
<script
type='text/javascript'
src='http://localhost/joomla16/libraries/joomla/form/fields/js/moo.js'>
</script>
<script type="text/javascript">
window.addEvent("domready", function(){
//important ---> to php
var minimum_digits = 3;//the amount of digits to display, default 3 if the number of days left to the event = 1 then the counter display will display 001 if set to 4 then 0001 the maximum is 6 digits including the number of days left.
var where_to = "http://www.republica-tecnologica.com/";
var a_start = "<a href='" + where_to + "'>";
var a_end = "</a>";
if (where_to == ""){
a_start = "";
a_end = "";
}
var end_date = "10/16/2011";
var looking_for_ = "day";
var inicial_message_ = "World Food Day";
var end_message_ = "Days left";
var if_day_message_top_ = "Today is the day";
var if_day_message_middle_ = "Today is the day";
var if_day_message_bottom_ = "Today is the day";
//important ---> to php
var build_counter_ = a_start + "<div id='tlak_top_message'>" + inicial_message_ + "</div><div id='tlak_count_display_' ></div>" + "<div id='tlak_bottom_message'>" + end_message_ + "</div>" + a_end;
$("tlak_count_down_").set("html", build_counter_);
var today_ = new Date();
var the_day = Date.parse(end_date);
var count_down = today_.diff(the_day, looking_for_);
count_down = count_down + "";
var counter_reset = count_down.length;
var counter_reset_ = 0;
var construct_count_down_display;
var current_html;
while (counter_reset >= 1){
construct_count_down_display = "<div id='tlak_margin'>" + count_down.charAt(counter_reset_) +"</div>";
current_html = $("tlak_count_display_").get('html');
$("tlak_count_display_").set("html", current_html + construct_count_down_display);
counter_reset --;
counter_reset_ ++;
}
if (count_down == 0){
$("tlak_top_message").set("html", if_day_message_top_);
$("tlak_count_display_").set("html", if_day_message_middle_);
$("tlak_bottom_message").set("html", if_day_message_bottom_);
}
});
</script>
<div id="tlak_count_down_" >
</div>
4

Hi,

I’d use an inline element as Jason suggested but I’d set it to inline-block so that you can style it nicely.

Something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>
<style type="text/css">
.test {
    min-height:126px;
    margin:0 auto 10px;
    text-align: center;
    width: 195px;
    background:green;
    line-height:1.2;
}
.test b {
    display:inline-block;
    padding:2px 5px;
    border:1px solid #000;
    background:#fcf;
    color:#f00;
    margin:2px;
}
</style>
</head>
<body>
<p class="test"><b>0</b></p>
<p class="test"><b>1</b><b>0</b><b>0</b><b>0</b></p>
<p class="test"><b>2</b><b>5</b></p>
</body>
</html>

I used a p element as the container because I guessed that you were saying something like “100 days left…”. The p could be changed for a div or other more suitable tag if the context is not as I guessed.