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
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Centering 2 divs inside a div

    I have a div that is 604px wide and I want to put 2 smaller divs in there side by side. I got everythign to work, but I'm having 2 problems. 1) It won't center them in the middle of the big div and 2) they're not exactly side by side, there's a small gap in between them. I'm new to CSS and I was wondering if anyone could let me know why this happening?

    My CSS File is:
    PHP Code:
    body {
     
    margin:0px;
     
    background-color:white;
     
    color:black;
     
    text-align:center;
     
    padding:0;
     }

    a:link {color:blackbackground-color:white;}
    a:visited {color:blackbackground-color:white;}
    a:hover {text-decoration:nonebackground-color:whitecolor:black;}
    a:active {color:blackbackground-color:white;}

    #outer {
     
    text-align:left;
     
    border:1px solid black;
     
    width:760px;
     
    margin:auto;
     }

    #hdr {
     
    height:100px;
     
    background-color:#000099;
     
    color:black;
     }

    #bar {
     
    border-left:0px solid blackborder-right:0px solid blackborder-top:1px solid blackborder-bottom:1px solid blackheight:21px;
     
    background-color:white;
     
    color:black;
     }
     
    #dropmenudiv{
     
    border-left:1px solid blackborder-right:1px solid blackborder-top:1px solid blackborder-bottom:0px solid blackposition:absolute;
     
    background-color:white;
     
    color:black;
     
    line-height:18px;
     
    z-index:100font-style:normalfont-variant:normalfont-weight:normalfont-size:12pxfont-family:verdana;
     }

    #dropmenudiv a{
     
    width100%;
     
    displayblock;
     
    text-indent3px;
     
    border-bottom1px solid black;
     
    padding1px 0;
     
    background-color:white;
     
    color:black;
     
    text-decorationnone;
     
    font-weightbold;
     }

    #dropmenudiv a:hover{ 
     
    background-color:#000099;
     
    color:black;
     }

    #bodyblock {
     
    position:relative;
     
    background-color:white;
     
    color:black;
     
    width:760px;
     
    padding:0;
     }

    #l-col {
     
    float:left;
     
    background-color:white;
     
    color:black;
     
    width:152px;
     }

    #cont {
     
    border-left:1px solid blackborder-right:0px solid blackborder-top:0px solid blackborder-bottom:0px solid blackwidth:604px;
     
    background-color:white;
     
    color:black;
     
    text-align:left;
     }
     
    #dblck {
     
    position:relative;
     
    background-color:white;
     
    color:black;
     
    width:595px;
     
    height:132px;
     
    padding:0;
     }
     
    #ldv {
     
    float:left;
     
    border-left:1px solid blackborder-right:1px solid blackborder-top:1px solid blackborder-bottom:1px solid blackwidth:211pxheight:130px;
     
    background-color:white;
     
    color:black;
     
    text-align:center;
     }
     
    #rdv {
     
    border-left:1px solid blackborder-right:1px solid blackborder-top:1px solid blackborder-bottom:1px solid blackwidth:377pxheight:130px;
     
    background-color:white;
     
    color:black;
     
    text-align:left
    and my html code is:
    PHP 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" xml:lang="en" lang="en">
    <
    head>
    <
    title>Save The Pit Bulls</title>
    <
    meta name="description" content="This site is full of information about pit bulls. Everything from pictures, information, myths and facts are here. Visit this website to learn the truth about pit bulls." />
    <
    meta name="Keywords" content="pit bull, pit, bull, information, american, staffordshire, terrier, american staffordshire terrier, am staff, american, pit, bull, terrier, american pit bull terrier, apbt, english staffordshire terrier, enlish, england, england staffordshire terrier, staffordshire, terrier, staffy bull, staffie bull, staffy, staffie, bull, pictures, activities, myths, facts, staffordshire bull terrier, staffordshire, bull, terrier, sbt, links, bsl, rescue, gifts, famous, games, faq, forum, chat, questions, poll, answers, adoption, save, help" />
    <
    meta name="robots" content="INDEX,FOLLOW" />
    <
    meta name="author" content="Dave Wright" />
    <
    meta name="rating" content="General" />
    <
    meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
    <
    link rel="stylesheet" type="text/css" href="layout.css" media="screen, projection" />
    <
    link rel="stylesheet" type="text/css" href="text.css" media="screen, projection" />
    <
    script type="text/javascript" src="../scripts/mark.js"></script>
    </head>
    <body alink="#000000" link="#000000" text="#000000" vlink="#000000" bgcolor="#FFFFFF">
    <div id="outer">
    <div id="hdr" align="center">
      <img border="0" src="../menu/mlogo.gif" width="757" height="100" alt="Save The Pit Bulls" /></div>
    <div id="bar">
    <script type="text/javascript" src="../scripts/popup.js"></script>
    <script type="text/javascript" src="../scripts/nav.js"></script>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <a href="" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu1, '150px')" onmouseout="delayhidemenu()"><img border="0" src="../menu/info.gif" width="100" height="21" alt="Information" /></a>&nbsp;&nbsp; 
        <a href="" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu2, '180px')" onmouseout="delayhidemenu()"><img border="0" src="../menu/sc.gif" width="155" height="21" alt="Stories and Comments" /></a>&nbsp;&nbsp; 
        <a href="" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu3, '130px')" onmouseout="delayhidemenu()"><img border="0" src="../menu/cnct.gif" width="90" height="21" alt="Connections" /></a>&nbsp;&nbsp; 
        <a href="" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu4, '225px')" onmouseout="delayhidemenu()"><img border="0" src="../menu/misc.gif" width="45" height="21" alt="Misc." /></a>&nbsp;&nbsp; 
        <a href="javascript: contact();"><img border="0" src="../menu/contact.gif" width="90" height="21" alt="Contact Us" /></a>&nbsp;&nbsp; 
        <a href="javascript: bookmark();"><img border="0" src="../menu/bmu.gif" width="110" height="21" alt="Bookmark Us" /></a>&nbsp;&nbsp; 
        <a href="/index.html"><img border="0" src="../menu/home.gif" width="45" height="21" alt="Home" /></a></div>
    <div id="bodyblock" align="right">
    <div id="l-col" align="center">
    <br />
    <br />
    <script type="text/javascript" src="../scripts/copy.js"></script>
    <br />
    <br />
    <a href="http://validator.w3.org/" target="new"><img border="0" src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
    <a href="http://jigsaw.w3.org/css-validator/" target="new"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a>
    </div>
    <div id="cont">
    <br />
    <center><img border="0" src="../welcome.gif" width="400" height="40" alt="Welcome to Save The Pit Bulls!" /></center>
    <br />
    <br />
    <center><a href="/load.html"><img border="1" src="../sitepics/collage.gif" width="588" height="150" alt="Click here to visit our Pictures Page!" /></a></center>
    <br />
    <div id="dblck" align="right">
    <div id="ldv" align="center"></div>
    <div id="rdv"></div>
    </div>
    <br />
    </div>
    </div>
    </div>
    </body>
    </html> 
    The to that are giving me problems are the 'rdv' and 'ldv'. I tried putting them in a slightly larger div to align them inside the bigger div, but that didn't work either. I would really appreciate it if someone could explain the problem to me, cause i'm lost. Thanks.
    I'm only telling you how I would do it, not how its supposed to be done. ;)

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,253
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Float, margin

    If you know beforehand that your all your three divs will have a fixed width, you could float both inner divs left and set off the left one by a certain left margin to get to to line up center.
    I really can't think of a reliable, flexible way at the moment, though; probably through some hefty absolute positioning/negative margins?

    By the way: I couldn't see a reason for the gap you mentioned, but make sure the appropriate margins (right on the left div, left on the right div) are set to zero; set them explicitly if you want to be sure.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #3
    Regular Coder
    Join Date
    Jul 2002
    Posts
    301
    Thanks
    7
    Thanked 2 Times in 2 Posts
    White space after the closing div tags might cause gaps to appear. There is a bug that relates to that somewhere. Ronald is right with his margin statement too.

    Perhaps this code might help you. Play around with it. It is using the inline property to do as you describe.

    I haven't compiled your code or looked at it in too much detail. Online links often make it far easier to grasp what you mean/problems you are having and so on.
    Anyhoo here you go:
    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>
    <title>Centering two divs inside another div using inline display property</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    #container {
    	text-align: center;
    	border: 1px solid #FF0000;
    	width: 604px;/*optional*/
    }
    #left {
    	border: 1px solid #990099;
    	text-align: left;
    }
    #right {
    	border: 1px solid #0000FF;
    	text-align: right;
    }
    #left, #right {
    	display: inline;
    	margin: 0px;
    }
    -->
    </style>
    </head><body>
    <!-- Whitespace after the closing divs tags can introduce bugs -->
    <div id="container"><div id="left">left</div><div id="right">right</div></div>
    </body></html>
    http://www.realworldweb.co.uk/exampl...e_another_div/

  • #4
    Regular Coder
    Join Date
    Sep 2005
    Location
    Chicago, IL
    Posts
    160
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanx for helping out me out guys. I floated both the inner divs to the left and then the gap between them disappeared and I put in a left-margin and it lines up perfectly in IE, NS, and FF,s o it's good enoguh for me. Thanks alot both of you!
    I'm only telling you how I would do it, not how its supposed to be done. ;)


  •  

    Posting Permissions

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