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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I'd like to arrange some divs like this using CSS...

    Code:
    __________________
    |_____|_____|_____|
    |_____|_____|_____|

    Each box above being one div containing a centered image, how can I do that? I can't seem to figure it out. I'm fairly new to CSS. Help please?
    Last edited by Raerae; 04-27-2011 at 06:18 AM. Reason: left out white space....

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    42
    Thanks
    5
    Thanked 4 Times in 4 Posts
    you gotta float the divs to the left:
    http://css-tricks.com/all-about-floats/

    Solution for centering:
    http://www.brunildo.org/test/img_center.html

  • #3
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks so much. Whoever wrote that thing on csstricks is very clear, never understood the concept of floats and collapses like that.

    Now what if I wanted to center the cluster of divs on the page?

  • #4
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Raerae View Post
    Thanks so much. Whoever wrote that thing on csstricks is very clear, never understood the concept of floats and collapses like that.

    Now what if I wanted to center the cluster of divs on the page?
    Try to put the div inside a table and align the table to center...or put all the divs inside a div and align tat div in center...

  • #5
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    Try to put the div inside a table and align the table to center...
    Check this out first.

    Frank
    Last edited by effpeetee; 04-27-2011 at 11:05 AM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #6
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,696
    Thanks
    0
    Thanked 232 Times in 227 Posts
    Hi there Raerae,

    you may find the following example mildly interesting or not.
    Code:
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    
    <base href="http://www.coothead.co.uk/images/">
    
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <meta name="language" content="english"> 
    <meta http-equiv="Content-Style-Type" content="text/css">
    <meta http-equiv="Content-Script-Type" content="text/javascript">
    
    <title>thumbnails 6x?</title>
    
    <style type="text/css">
    body {
        background-color:#fed;
     }
    #gallery {
        list-style-type:none;
        width:1020px;
        padding:40px 40px 32px 40px;
        border:3px double #c60;
        margin:20px auto 0;
        background-color:#fc9;
        overflow:hidden;
        box-shadow: #323 30px 30px 40px;
        -moz-box-shadow: #323 30px 30px 40px;
        -webkit-box-shadow:#323 30px 30px 40px;
        border-radius:25px;
        -moz-border-radius:25px;
        -webkit-border-radius:25px
     }
    #gallery li {
        width:160px;
        padding:15px 0;
        border:1px solid #c60;
        margin:0 4px 8px 4px;
        float:left;
        font-family:verdana,arial,helvetica,sans-serif;
        font-size:0.8em;
        text-align:center;
        background-color:#fed;
        border-radius:10px;
        -moz-border-radius:10px;
        -webkit-border-radius:10px
     }
    #gallery img {
        padding:4px;
        margin-top:8px;
        border:3px double #f96;
        background-color:#fff;
        border-radius:5px;
        -moz-border-radius:5px;
        -webkit-border-radius:5px
     }
    #gallery a {
        color:#630;
        text-decoration:none;
     }
    </style>
    
    <!--[if lt IE 8 ]>
    <style type="text/css">
    #gallery {
        padding:40px 40px 32px 32px;
     }
    </style>
    <![endif]-->
    
    </head>
    <body>
    
    <ul id="gallery">
     <li><a href="#"><img src="anim.gif"  alt=""><br>description</a></li>
     <li><a href="#"><img src="anim1.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim2.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim3.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim4.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim5.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim1.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim2.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim3.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim4.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim5.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim.gif"  alt=""><br>description</a></li>
     <li><a href="#"><img src="anim2.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim3.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim4.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim5.gif" alt=""><br>description</a></li>
     <li><a href="#"><img src="anim.gif"  alt=""><br>description</a></li>
     <li><a href="#"><img src="anim1.gif" alt=""><br>description</a></li>
    </ul>
    
    </body>
    </html>
    
    coothead

  • #7
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by effpeetee View Post
    Yeah I'm actually trying not to use tables at all.

  • #8
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    Something like this?

    This demo displays 2 rows of 3 containers each with red borders centered on the page. You can then put whatever you like in each <li>
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #myList {
                    list-style-type: none;
                    width: 70%;
                    margin: 0px auto 0px auto;
                }
                #myList li {
                    float: left;
                    width: 32%;
                    height: 20px;
                    border: 1px solid red;
                }
            </style>
            <script type="text/javascript"></script>
        </head>
        <body>
            <ul id="myList">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </body>
    </html>

  • #9
    New to the CF scene
    Join Date
    Apr 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks guys for answering, really appreciate it. Ended up not needing after all.


  •  

    Posting Permissions

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