Reputation: 9

Display CSS boxes side by side

css code

 #folder {  
width: 105px;
background: #BABABA;
position: relative;
 -moz-border-radius:    10px;
-webkit-border-radius: 10px;
border-radius: 0px 10px 10px 10px;
}

This is CSS code to create boxes

php code

<link rel="stylesheet" type="text/css" href="fold.css" /></style>
<?php 
function listFolderFiles($dir,$exclude){ 
 $ffs = scandir($dir); 
echo '<ul class="ulli">'; 
foreach($ffs as $ff){ 
    if(is_array($exclude) and !in_array($ff,$exclude)){ 
        if($ff != '.' && $ff != '..'){ 
        if(!is_dir($dir.'/'.$ff)){ 

        } else { 
        echo '<div class=wrap><div id=folder><li>'.$ff.'</div></div>';    
        } 
        if(is_dir($dir.'/'.$ff)) listFolderFiles($dir.'/'.$ff,$exclude); 
        echo '</li>'; 
        } 
    } 
} 
echo '</ul>'; 
} 

listFolderFiles('.',array('index.php','edit_page.php')); 
?>

It Displays the boxes one below the other How to display the boxes side by side

Upvotes: 1

Answers (5)

mika

Reputation: 1451

I'd say instead of doing:

echo '<div class=wrap><div id=folder><li>'.$ff.'</div></div>';

try:

echo '<li><div class=wrap><div id=folder>'.$ff.'</div></div></li>';

Making sure your < li > tag is closing correctly and wrapping your divs (or contrary, not sure what you're trying)

But your code doesn't seem really clean anyways, for example use class .folder instead of id #folder since ids should be unique by definition.

But i guess you gotta start somewhere, good luck :)

Upvotes: 0

Luis Salazar

Reputation: 1

divs are block elements by default.

these elements consume all available width.

Even if you set a width to them, the margin will get the rest.

You can change this behavior by any of these methods:

setting the display property from display: block to display:inline or display:inline-block
floating the element with float:left or float:right
position the div manually with position: absolute

Upvotes: 0