Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts

    How to place 4 small divs inside a wrapper div

    Easy one I'll bet.

    I have a wrapper div with 4 smaller "inner" divs inside.
    I would like to have them side by side horizontally (and they will fit).
    What the heck am I doing wrong? I tried "floating" the first div to the right, but that didn't fix it.

    I would apreciate someone helping me out. Sincerely, Buffmin
    You can see it at http://test.cnjwebsolutions.com/ (my code is below)

    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 charset='UTF-8'>
    <style type="text/css">
    <!--
    #main_wrap{width:1000px;height:170px; background-color:#66FFCC;}
    .inner{width:230px; height:160px; background-color:#66FF33;}
    -->
    </style>
    </head>	
    <body>
     
      <div id="main_wrap">
        <div class="inner" >
        <h2>Fully Automatic</h2>
        <img src="hdsv2.png" />
        </div>
    
        <div class="inner" >
        <h2>Fully Automatic</h2>
        <img src="hdsv2.png" />
        </div>
    
        <div class="inner" >
        <h2>Fully Automatic</h2>
        <img src="hdsv2.png" />
        </div>
    
        <div class="inner" >
        <h2>Fully Automatic</h2>
        <img src="hdsv2.png" />
        </div>
      </div><!-- end of main_wrap -->
    
    </body>
    </html>

  • #2
    Regular Coder dan-dan's Avatar
    Join Date
    Aug 2009
    Location
    England
    Posts
    483
    Thanks
    22
    Thanked 79 Times in 78 Posts
    Adding float:left; to .inner works fine.

  • Users who have thanked dan-dan for this post:

    Buffmin (03-05-2012)

  • #3
    Regular Coder
    Join Date
    Aug 2011
    Posts
    192
    Thanks
    112
    Thanked 0 Times in 0 Posts
    Perfect! Thanks so much. Buffmin


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •