Home/ Questions/Q 7775819
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T17:43:18+00:00

Can anyone please help me understand how to position the following layout? It seems

  • 0

Can anyone please help me understand how to position the following layout? It seems to be pretty simple.
enter image description here

I have this code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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">

#container
{
    width:730px;
    margin:0 auto;
    }
#big_img
{
    width:270px;
    height:270px;
    float:left; 
}
ul
{
    list-style-type:none;
    float:left;
    padding:0;
}
 ul li
{
    display:inline;
    float:left;
    margin-right:9px;
    margin-top:0;
    margin-bottom:9px;
}
 li a img
{   
    width:130px;
    height:130px;
    border:1px solid #dcd9d9;
}

</style>


</head>

<body>

<div id="container">
  <div id="big_img"><img src="images/new-cat.jpg"/></div>
  <ul>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>
    <li><img src="images/ballpools.jpg"/></li>           
  </ul>
</div> 
</body>
</html>

As a result the list items are displayed under the IMG. But I need to have them as it is shown in the picture.

Thanks in advance,

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to take the float style out of your ul class:

    ul {
    list-style-type:none;
    padding:0;
}

    The float in the ul is causing the whole list as one big element to be floated, which is forcing it down below the img.

    • 0