...
PDA

Centering 2 divs inside a div

boxxer03
11-23-2005, 01:13 PM
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:
body {
margin:0px;
background-color:white;
color:black;
text-align:center;
padding:0;
}

a:link {color:black; background-color:white;}
a:visited {color:black; background-color:white;}
a:hover {text-decoration:none; background-color:white; color:black;}
a:active {color:black; background-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 black; border-right:0px solid black; border-top:1px solid black; border-bottom:1px solid black; height:21px;
background-color:white;
color:black;
}

#dropmenudiv{
border-left:1px solid black; border-right:1px solid black; border-top:1px solid black; border-bottom:0px solid black; position:absolute;
background-color:white;
color:black;
line-height:18px;
z-index:100; font-style:normal; font-variant:normal; font-weight:normal; font-size:12px; font-family:verdana;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 1px 0;
background-color:white;
color:black;
text-decoration: none;
font-weight: bold;
}

#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 black; border-right:0px solid black; border-top:0px solid black; border-bottom:0px solid black; width: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 black; border-right:1px solid black; border-top:1px solid black; border-bottom:1px solid black; width:211px; height:130px;
background-color:white;
color:black;
text-align:center;
}

#rdv {
border-left:1px solid black; border-right:1px solid black; border-top:1px solid black; border-bottom:1px solid black; width:377px; height:130px;
background-color:white;
color:black;
text-align:left;

and my html code is:
<!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.
ronaldb66
11-23-2005, 03:00 PM
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.
MattyUK
11-23-2005, 04:18 PM
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:
<!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/examplecode/centering_2_divs_inside_another_div/
boxxer03
11-23-2005, 08:16 PM
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! :thumbsup:

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum