I want to make a layout like this : I already made like this : I want to arrange my middle content like this : My Html Coding : <html> <head> <title>Informapedia.com.bd</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="main"> <div class="header"> <img src="images/logo.jpg"> </div> <div class="menu"> <ul> <li><a href="#"><b>Home</b></a></li> <li><a href="#"><b>About Us</b></a></li> <li><a href="#"><b><b>Contuct us</b></a></li> <li><a href="#"><b>Feedback</b></a></li> </ul> </div> <div> <div class="content"> <div class="leftcontent"> <ul> <li><a href="#">Religion</a></li> <li><a href="#">Science</a></li> <li><a href="#">Computer</a></li> </ul> </div> <div class="centercontent"> <h2>This is content</h2> <a href="#"><img src="images/content1.jpg"></a> <p>The Siege of Damascus took place between 24 July and 29 July 1148, during the Second Crusade. It ended in a decisive crusader defeat and led to the disintegration of the crusade. The two main Christian forces that marched to the Holy Land in response to Pope Eugene III and Bernard of Clairvaux‘s call for</p> </div> <div class="rightcontent"> <h2>Business Economy</h2> <ul> <li><a href="#">Religion</a></li> <li><a href="#">Science</a></li> <li><a href="#">Computer</a></li> <li><a href="#">Religion</a></li> <li><a href="#">Science</a></li> </ul> <h2>Culture society</h2> <h2>Finance invest</h2> </div> </div> <!-- End Content --> </div> <div class="footer"> <p>© Copyright 2013</p> </div> </div> <!-- END Main Div --> </body> </html> My Css coding : * { margin: 0; padding: 0; } body { font-family: arial; font-size: 14px; color: #111111; line-height: 20px; } .main { width: 960px; margin: 20px auto; overflow: hidden; } .header { border-bottom: 1px solid #1E1E1E; } .menu { overflow: hidden; border-bottom: 1px solid #ddd; margin-top: 25px; margin-bottom: 35px; } .menu ul { margin: 0; padding: 0; list-style: none; } .menu ul li{ float: left; margin-bottom: 25px; } .menu ul li a{ margin: 20px; padding: 10px; text-decoration: none; color: #111111; } .menu ul li a:hover{ color: red; } .content { overflow: hidden; border-bottom: 1px solid #111111; } .leftcontent { width: 180px; margin-right: 20px; float: left; } .leftcontent ul{ list-style: none; } .leftcontent ul li { padding: 25px; border-bottom: 1px solid #ddd; } .leftcontent ul li a { text-decoration: none; color: #1E1E1E; font-size: 15px; } .centercontent { width: 400px; float: left; margin-left: 20px; } .rightcontent { width: 320px; float: right; margin-left: 20px; } .footer { overflow: hidden; } Please help me with details. Thanks
You'll need to float that image left, then use a margin on the image to push it away from the text. Something like... .centercontent img { float:left; margin: 1em; } Would work.