www.webdeveloper.com
Results 1 to 5 of 5

Thread: [RESOLVED] Boxes!! - Table trouble

  1. #1
    Join Date
    Jan 2008
    Posts
    13

    resolved [RESOLVED] Boxes!! - Table trouble

    Okay so I'm trying a new layout sort of thing that I've never done before... the whole idea is that my content area is in a square of four conjoined boxes in the center of the page. Think of it as a four-square court.

    I've been attempting to get these squares aligned just right, but I can figure out how. The best I've gotten so far is putting it in a table:

    HTML Code:
    <div id="content">
    <table>
       <tr>
          <td><div id="1">1</div></td>
          <td><div id="2">2</div></td>
       </tr>
       <tr>
          <td><div id="3">3</div></td>
          <td><div id="4">4</div></td>
       </tr>
    </table>
    </div>
    The CSS relating to the divs and table:

    Code:
    table, tr, td {
    	padding: 0;
    	margin: 0;
    	}
    #content {
    	width: 400px;
    	height: 400px;
    	border: 1px solid #EEE;
    	}
    #1, #2, #3, #4 {
    	width: 200px;
    	height: 200px;
    	}
    #1 {
    	border-right: 1px solid #EEE;
    	border-bottom: 1px solid #EEE;
    	}
    #4 {
    	border-top: 1px solid #EEE;
    	border-left: 1px solid #EEE;
    	}
    Simple enough, right? My problem is the squares don't align quite right. It's like the table has a padding or margin or something that puts space between the boxes that I can't get rid of. I need these boxes to come together perfectly with no space in between, but I can't figure out how to do that.

    So yeah any suggestions on how to get my boxes to fit together would be awesome... if you'd like to have the whole source code so you can test it in your browser to see how it looks, send me a message with your email address, and I'll email you the file.

    Thanks,
    Jay

  2. #2
    Join Date
    Sep 2010
    Posts
    43
    It's probably the cellspacing / cellpadding on the table elements.

    I would however at this early stage, recommend that you try to use purely divs and css for the layout over tables, it's a much better habit to get into.

  3. #3
    Join Date
    Jan 2008
    Posts
    13
    I tried that at first, but I wasn't sure how to get to get the boxes next to each other rather than straight down in a line. How would I go about that?
    http://rachon.wordpress.com
    It's my blog... it has nothing to to with webdesign. Sorry.

  4. #4
    Join Date
    Sep 2010
    Posts
    43
    To reproduce the layout you've created with the table, I would remove the table but create two new divs around each 'row' of two divs. I'd then float the elements with CSS:

    Code:
    .row, .row div
    {
    float:left;
    }
    
    .row
    {
    clear:both;
    }
    which would make the children div elements sit next to each other. The clear will force the items with the 'row' class to sit beneith each other. If you were to force the width of the container, you wouldn't need to use the clear

  5. #5
    Join Date
    Jan 2008
    Posts
    13
    ohhh... that worked perfectly. Thank you so much!
    http://rachon.wordpress.com
    It's my blog... it has nothing to to with webdesign. Sorry.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles