estCase201 estCase201 - 1 month ago 18
CSS Question

Lining up two separate Divs in CSS

I'm trying to line up two lists one which contains .jpg files, in a div, and the other are text files in another list.

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


I want to line them up in the middle of the browser window, like such:

test.jpg test.txt
test2.jpg test2.txt
here.jpg here.txt


Instead the output I'm getting is this:

test.jpg
test2.jpg
here.jpg
test.txt
test2.txt
here.txt


Even though I'm using float left. I tried using float:right for the text files but that just puts the div on the right, with again the wrong height.

I tried adding
margin:auto;
,
display inline-block;


But none of those seem to help.

A markup of sorts...

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


I need to use php because I need to scan the files in a certain directory, this is how it should look like (where the file lists are in the middle of the screen).

Answer

You can also consider using flex for this

check the following snippet

.container {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid black;
  justify-content: center;
}
.container div {
  width: 40%;
  text-align: center;
}
<div class="container">
  <div>
    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" height="20px" width="20px"></img>
  </div>

  <div>
    text1
  </div>

  <div>
    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" height="20px" width="20px"></img>
  </div>
  <div>
    text2
  </div>

  <div>
    <img src="http://www.freedigitalphotos.net/images/img/homepage/87357.jpg" height="20px" width="20px"></img>
  </div>
  <div>
    text3
  </div>
</div>

Hope this helps