In an attempt to align two lists within a div, I have one list containing .jpg files and another with text files.
<!DOCTYPE html>
<html>
<style>
.left{height:auto; float:left;}
.right{height:auto; float:right;}
</style>
<body>
<br>
<br>
<?php
$files = scandir('files');
sort($files); // this does the sorting
foreach($files as $file){
$extension = pathinfo($file,PATHINFO_EXTENSION);
if($extension == 'jpg')
echo'<br><div class="left">'.$file .'</div>';
}
$files2 = scandir('files');
sort($files2); // this does the sorting
foreach($files2 as $file2){
$extension2 = pathinfo($file2,PATHINFO_EXTENSION);
if($extension2 == 'txt')
echo'<br><div class="left">'.$file2 .'</div>';
}
?>
</body>
</html>
My goal is to horizontally align them in the center of the browser window like so:
test.jpg test.txt
test2.jpg test2.txt
here.jpg here.txt
However, currently I am seeing this output:
test.jpg
test2.jpg
here.jpg
test.txt
test2.txt
here.txt
Despite using float left. I have experimented with float:right for the text files, but the alignment remains off.
I have also tried adding margin:auto;,display inline-block;
But these adjustments do not seem to rectify the issue.
A modified markup...
<!DOCTYPE html>
<html>
<style>
.left{float:left; height:auto;}
.right{float:left; height:auto;}
</style>
<body>
<br>
<br>
test.jpg test.txt<br>
test2.jpg test2.txt<br>
here.jpg here.txt<br>
</body>
</html>
PHP functionality is necessary as I need to scan specific directories, aiming for a visually centered file listing.