http55 http55 - 1 month ago 7
CSS Question

Alligning <Div> tags within a page

I have the following code:

<!DOCTYPE html>
<html>
<body>

<?php

$i =0;
for($i=0; $i< 5; $i++) {
echo'<div class="bloc" style="text-align:center; margin-left:-120px;"><br> '.$i.'</div>';
}

for($i=4; $i>= 0; $i--) {
echo'<div class="bloc" style="text-align:center; margin-right:-120px;"><br> '.$i.'</div>';
}

?>
</body>
</html>


See it working:



<html>
<head></head>
<body>
<div class="bloc" style="text-align:center; margin-left:-120px;">
<br>0
</div>
<div class="bloc" style="text-align:center; margin-left:-120px;">
<br>1
</div>
<div class="bloc" style="text-align:center; margin-left:-120px;">
<br>2
</div>
<div class="bloc" style="text-align:center; margin-left:-120px;">
<br>3
</div>
<div class="bloc" style="text-align:center; margin-left:-120px;">
<br>4
</div>
<div class="bloc" style="text-align:center; margin-right:-120px;">
<br>4
</div>
<div class="bloc" style="text-align:center; margin-right:-120px;">
<br>3
</div>
<div class="bloc" style="text-align:center; margin-right:-120px;">
<br>2
</div>
<div class="bloc" style="text-align:center; margin-right:-120px;">
<br>1
</div>
<div class="bloc" style="text-align:center; margin-right:-120px;">
<br>0
</div>
</body>
</html>





Where I'm trying to print the numbers 0-4 and 4-0 in the middle of the page, where one is a bit right of the middle, and the other a bit left (margins).
I want the output to look like this:

0 4
1 3
2 2
3 1
4 0


Where the increasing numbers would be in the center minus 120 pixels to the left, and decreasing would be in the center minus 120 pixels to the right

I've tried adding the CSS:

.bloc{
display:inline;
float:left;
}


But that seems to place all the numbers in one spot, not the way I'd like them to be pictured. I also tried using the
<span>
tag which yielded the same result.

Any ideas?

Answer

You could group them, and set the width to 50% to make sure they're centred correctly

<!DOCTYPE html>
<html>
<head>
    <style>
        .bloc{
            width: 50%;
            float: left;
        }
        .bloc > div{
            padding: 0 10px;
        }
        .text-right{
            text-align: right;
        }
    </style>
</head>
<body>
    <div class='bloc'>
    <?php for($i=0; $i< 5; $i++) : ?>
        <?php echo '<div class="text-right">'.$i.'</div>'; ?>
    <?php endfor; ?>
    </div>
    <div class='bloc'>
    <?php for($i=4; $i>= 0; $i--) : ?>
        <?php echo '<div>'.$i.'</div>'; ?>
    <?php endfor; ?>
    </div>
</body>
</html>
Comments