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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post

    Div aligned to left, but want it in center.

    Well, basically, I have three divs next to eachother, and I can only do that by making them float:left; as far as I know. I am using CSS for most of the layout.

    But I want these three divs to be in the center of the page, but still next to each other, is there anyway I can do this? And I cannot use a table because there are always gaps in between the images where the edges of the cells are.

    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>Martyn Lee Ball</title>
        <style type="text/css">
        <!--
        body {
            background-color: #0a2b3e;
            background-image: url(images/background.jpg);
            background-repeat: no-repeat;
            background-position:center;
        }
        #banner {
        background-image:url(images/banner.png);
        height:65px;
        width:401px;
        margin:30px;
        margin-left:auto;
        margin-right:auto;
        }
        #navbar_left {
        background-image:url(images/top_bar_right.gif);
    	background-repeat:no-repeat;
        height:64px;
    	float:left;
    	width:19px;
        }
        #navbar_middle {
        background-image:url(images/top_bar_middle.gif);
    	background-repeat:repeat-x;
        height:64px;
    	float:left;
    	width:650px;
        }
        #navbar_right {
        background-image:url(images/top_bar_left.gif);
    	background-repeat:no-repeat;
        height:64px;
    	float:left;
    	width:19px;
        }
        #middle_section {
        text-align:center;
        background-image:url(images/middle_background.jpg);
        height:184px;
    	float:left;
        width:100%;
        left:0px;
        }
    	#navbar {
    		width:inherit;
    		height:auto;
    	}
    	.header {
    	font-family:"Eras Light ITC";
    	color:#616161;
    	font-size:26px;
    	}
    	.content_text {
    	font-family:"Eras Light ITC";
    	color:#616161;
    	font-size:10px;
    	}
        </style>
    	</head>
        <body>
        <div id="banner"></div>
        <div id="navbar" align="center">
          <div id="navbar_right"></div>
        <div id="navbar_middle">
        <a class="menu_links">Menu 1 | Menu 2 | Menu 3 | Menu 4</a>
        </div>
        <div id="navbar_left"></div>
        </div>
        <div id="middle_section">
          <table height="137" class="table">
          <tr>
          <td height="36">
          <a class="header">Welcome</a>
          </tr>
          </td>
          <tr>
          <td height="83">
          <a class="content_text">Main content goes here</a>  
          </tr>    
          </td>
          </table>
          </div>
        </body>
        </html>

  • #2
    New Coder
    Join Date
    Sep 2007
    Posts
    98
    Thanks
    25
    Thanked 4 Times in 4 Posts
    Not sure how to solve your problem but i just wanted to comment on the note you mentioned about not being able to use tables.

    You could do :P

    Just add;
    Code:
    cellpadding="0" cellspacing="0"
    To the table code and there should be spaces there between cells then You can then refine how it displays using the Width & Height values.

  • Users who have thanked weir-07 for this post:

    martynball (06-12-2009)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,866
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    #navbar {
    height:auto;
    margin:0 auto;
    width:688px; /*650+19+19 */
    }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    martynball (06-12-2009)

  • #4
    Regular Coder
    Join Date
    Nov 2007
    Posts
    682
    Thanks
    319
    Thanked 1 Time in 1 Post
    Quote Originally Posted by weir-07 View Post
    Not sure how to solve your problem but i just wanted to comment on the note you mentioned about not being able to use tables.

    You could do :P

    Just add;
    Code:
    cellpadding="0" cellspacing="0"
    To the table code and there should be spaces there between cells then You can then refine how it displays using the Width & Height values.
    Awesome, thanks. I can use a table instead now.


  •  

    Posting Permissions

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