1 reply [Last post]
donald7777
donald7777's picture
Offline
newbie
Last seen: 7 years 1 day ago
Timezone: GMT-7
Joined: 2010-11-24
Posts: 1
Points: 2

Hello, I have checked all over google and have not found an answer to my question that works. I have 3 boxes with text boxes underneath that need to be aligned to the center while remaining in a line. Note the boxes under the picture boxes are separate due to peoples suggestions.

Pleas help.

html 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" />
<meta name="Description" content="
"/>
<meta name="Keywords" content=""/>
<meta name="robots" content="index,follow"/>
<meta name="author" content=""/>
<meta name="copyright" content="Site contents © 1995-2010. All rights reserved."/>
<title>Welcome</title>
<!--[if lt IE 7]>
<script type="text/javascript" src="../scripts/unitpngfix.js"></script>
<![endif]-->
<link href="css/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/menu.css" rel="stylesheet" type="text/css" media="screen" />
<link href="css/homepage.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body class="twoColElsLtHdr">
<div id="container">
  <div id="header"> <img src="images/header.png" alt="Header" width="720" height="328" class="unitPng" /> 
    <!-- end #header --> 
  </div>
  <div id="headline-wrap">
    <div id="headline">
      <h1 class="home">Welcome</h1>
      <div id="homeboxes">
        <div class="box_one"><a href="#" id="box_one" title="- learn more"><span>Services</span></a></div>
        <div class="box_two"><a href="#" id="box_two" title="manufacturer solutions"></a></div>
        <div class="box_three"><a href="#" id="box_three" title="learn more"></a></div>
      </div>
      <div class="clearleft"></div>
      <div id="description-wrap">
        <div id="description">
          <div id="one">
            <h3>Apple</h3>
            <p>Expect</p>
          </div>
          <div id="two">
            <h3>Apple 2</h3>
            <p>Time is money</p>
          </div>
          <div id="three">
            <h3>Custom Solutions</h3>
            <p>custom solutions</p>
          </div>
        </div>
        <!-- /description --> 
      </div>
      <!-- /description-wrap --> 
    </div>
  </div>
  <div class="clearleft"></div>
  <div id="footer">
    <div id="footer-links">
      <p><strong>| <a href="about-us/index.php">About Us </a> | <a href="residential/contact/index.php">Contact Us</a></strong> <strong>|</strong> <strong><a href="residential/sitemap/index.php">Site Map</a></strong> <strong>| </strong><strong><a href="residential/privacy/index.php">Privacy Policy</a></strong> <strong>|</strong></p>
    </div>
    <div id="footer-comments">
      <p> All rights reserved. &copy; 2010</p>
      <img src="images/small.png" alt="Partner" width="100" height="43" class="unitPng" /><img src="images/reseller-small.png" alt="reseller" width="144" height="40" class="unitPng" /><img src="images/blaze-small.png" alt="blaze" width="115" height="43" class="unitPng" /><img src="images/ell-small.png" alt="ell" width="100" height="43" class="unitPng" /><img src="images/p-small.gif" width="69" height="43" alt="p" /><img src="images/pages-small.gif" width="36" height="43" alt="pages logo" /></div>
  </div>
</div>
 
<!-- end #container -->
</body>
</html>

layout.css

@charset "utf-8";
/* CSS Document */
body {
	font: 100% Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: #87AEC5;
	height:100%;
	background-image: url(../images/background.gif);
	background-repeat: repeat-x;
}
p { 
	font-family:Arial, Helvetica, sans-serif;
	line-height:20px; 
	}
 
.twoColElsLtHdr #container {
	width: 97%;
	height:100%;
	background: #FFFFFF;
	border: 1px solid #000000;
	text-align: left;
	max-width:1260px;
	min-width:720px;
	min-height:600px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.twoColElsLtHdr #sidebar1 {
	text-align:center;
	float: left;
	width: 13em;
	background-image:url(../images/nav-bar.gif);
	padding:15px;
	background-repeat: repeat-x;
}
.twoColElsLtHdr #sidebar1 h3, .twoColElsLtHdr #sidebar1 p {
	margin-left: 10px;
	margin-right: 10px;
}
#sidebar1 ul {
	margin : 0;
	padding : 0;
	list-style-type : none;
}
#sidebar1 li {
	padding-left : 5px;
	vertical-align : middle;
	padding-top : 5px;
	padding-bottom : 5px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #333;
}
#sidebar1 a, #sidebar1 a:hover {
	text-decoration : none;
	text-align : center;
	vertical-align : middle;
	border-top-style : none;
	border-right-style : none;
	border-bottom-style : none;
	border-left-style : none;
	padding-top : 1px;
	padding-bottom : 1px;
}
.twoColElsLtHdr #mainContent {
	background-attachment: scroll;
	background-image: url(../images/watermark.GIF);
	background-repeat: no-repeat;
	background-position:center;
	margin-top: 0;
	margin-right: 1.5em;
	margin-bottom: 0;
	margin-left:15em;
	min-height:15em;
}
.twoColElsLtHdr #container #mainContent p {
	text-align: justify;
}
.fltrt {
	float: right;
	margin-left: 8px;
}
.fltlft {
	float: left;
	margin-right: 8px;
}
.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.unitPng {
	text-align:left;
}
.unitPng-padding {
	padding-right:10px;
}
#menu-bar {
	height:40px;
	background-image:url(../images/menu/button1a.gif);
	text-align:center;
}
#header {
	background-image:url(../images/header-background.jpg);
	text-align:center;
	display:block;
	height:328px;
}
#signature-img {
	text-align:right;
	height:20px;
	margin-right:10px;
	vertical-align:text-bottom;
}
#line {
	text-align:right;
}
#signature {
	text-align:right;
	height:50px;
	padding-right:40px;
}
#footer {
	text-align:center;
	background-color:#CCC;
	height:auto;
	clear:bothl;
}
#footer-links {
	text-align:center;
	width:auto;
	display:block;
	padding-right: 25%;
	padding-left: 25%;
}
#footer-comments {
	display:block;
}
#partners {
	float:right;
	text-align:right;
}
.center {
	margin-left:auto;
	margin-right:auto;
}

homepage.css

@charset "utf-8";
/* CSS Document */
 
#headline-wrap {
	MARGIN: 0px auto;
	HEIGHT: 470px
}
#headline {
	PADDING-BOTTOM: 0px;
	MARGIN: 0px auto;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	HEIGHT: 470px;
	CLEAR: both;
	PADDING-TOP: 8px
}
#homeboxes A#box_one {
	BACKGROUND-IMAGE: url(../images/homepage-box-1.png);
	BORDER-BOTTOM: #cccccc 1px solid;
	BORDER-LEFT: #cccccc 1px solid;
	MARGIN: 0px 9px 0px 19px;
	WIDTH: 220px;
	HEIGHT: 190px;
	BORDER-TOP: #cccccc 1px solid;
	BORDER-RIGHT: #cccccc 1px solid
}
#homeboxes {
	PADDING-BOTTOM: 0px;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	HEIGHT: 190px;
	PADDING-TOP: 0px
}
#homeboxes .box_one {
	BACKGROUND-IMAGE: url(../images/homepage-box-1.png)
}
#homeboxes A#box_one:hover {
	Z-INDEX: 50;
	BORDER-BOTTOM: #ffffff 1px solid;
	BORDER-LEFT: #ffffff 1px solid;
	MARGIN-TOP: 0px;
	BACKGROUND-POSITION: 100% -190px;
	BORDER-TOP: #ffffff 1px solid;
	BORDER-RIGHT: #ffffff 1px solid
}
#homeboxes A#box_two {
	BACKGROUND-IMAGE: url(../images/homepage-box-2.png);
	BORDER-BOTTOM: #cccccc 1px solid;
	BORDER-LEFT: #cccccc 1px solid;
	MARGIN: 0px 9px;
	WIDTH: 220px;
	HEIGHT: 190px;
	BORDER-TOP: #cccccc 1px solid;
	BORDER-RIGHT: #cccccc 1px solid
}
#homeboxes .box_two {
	BACKGROUND-IMAGE: url(../images/homepage-box-2.png)
}
#homeboxes A#box_two:hover {
	Z-INDEX: 50;
	BORDER-BOTTOM: #ffffff 1px solid;
	BORDER-LEFT: #ffffff 1px solid;
	MARGIN-TOP: 0px;
	BACKGROUND-POSITION: 100% -190px;
	BORDER-TOP: #ffffff 1px solid;
	BORDER-RIGHT: #ffffff 1px solid
}
#homeboxes A#box_three {
	BACKGROUND-IMAGE: url(../images/homepage-box-3.png);
	BORDER-BOTTOM: #cccccc 1px solid;
	BORDER-LEFT: #cccccc 1px solid;
	MARGIN: 0px 9px;
	WIDTH: 220px;
	HEIGHT: 190px;
	BORDER-TOP: #cccccc 1px solid;
	BORDER-RIGHT: #cccccc 1px solid
}
#homeboxes .box_three {
	BACKGROUND-IMAGE: url(../images/homepage-box-3.png)
}
#homeboxes A#box_three:hover {
	Z-INDEX: 50;
	BORDER-BOTTOM: #ffffff 1px solid;
	BORDER-LEFT: #ffffff 1px solid;
	MARGIN-TOP: 0px;
	BACKGROUND-POSITION: 100% -190px;
	BORDER-TOP: #ffffff 1px solid;
	BORDER-RIGHT: #ffffff 1px solid
}
#box_one {
	DISPLAY: block;
	FLOAT: left
}
#box_two {
	DISPLAY: block;
	FLOAT: left
}
#box_three {
	DISPLAY: block;
	FLOAT: left
}
#box_one:hover {
	BACKGROUND-POSITION: 100% -190px
}
#box_two:hover {
	BACKGROUND-POSITION: 100% -190px
}
#box_three:hover {
	BACKGROUND-POSITION: 100% -190px
}
#box_one SPAN {
	DISPLAY: none
}
#box_two SPAN {
	DISPLAY: none
}
#box_three SPAN {
	DISPLAY: none
}
.clearleft {
	LINE-HEIGHT: 0px;
	HEIGHT: 0px;
	CLEAR: left
}
#description-wrap {
}
#description {
	PADDING-BOTTOM: 0px;
	MARGIN: 0px 0px 15px;
	PADDING-LEFT: 0px;
	PADDING-RIGHT: 0px;
	HEIGHT: 190px;
	PADDING-TOP: 0px
}
#description #one {
	BORDER-BOTTOM: #cccccc 1px solid;
	BORDER-LEFT: #cccccc 1px solid;
	PADDING-BOTTOM: 0px;
	BACKGROUND-COLOR: #ffffff;
	MARGIN: 0px 9px 0px 19px;
	PADDING-LEFT: 10px;
	WIDTH: 200px;
	PADDING-RIGHT: 10px;
	HEIGHT: 190px;
	BORDER-TOP: medium none;
	BORDER-RIGHT: #cccccc 1px solid;
	PADDING-TOP: 12px;
	text-align: center;
}
#description #two {
	BORDER-BOTTOM: #cccccc 1px solid;
	BORDER-LEFT: #cccccc 1px solid;
	PADDING-BOTTOM: 0px;
	BACKGROUND-COLOR: #ffffff;
	MARGIN: 0px 9px;
	PADDING-LEFT: 10px;
	WIDTH: 200px;
	PADDING-RIGHT: 10px;
	HEIGHT: 190px;
	BORDER-TOP: medium none;
	BORDER-RIGHT: #cccccc 1px solid;
	PADDING-TOP: 12px;
	text-align: center;
}
#description #three {
	BORDER-BOTTOM: #cccccc 1px solid;
	BORDER-LEFT: #cccccc 1px solid;
	PADDING-BOTTOM: 0px;
	BACKGROUND-COLOR: #ffffff;
	MARGIN: 0px 9px;
	PADDING-LEFT: 10px;
	WIDTH: 200px;
	PADDING-RIGHT: 10px;
	HEIGHT: 190px;
	BORDER-TOP: medium none;
	BORDER-RIGHT: #cccccc 1px solid;
	PADDING-TOP: 12px;
	text-align: center;
}
#one {
	DISPLAY: block;
	FLOAT: left
}
#one:hover {
	BORDER-BOTTOM: #000000 1px solid;
	BORDER-LEFT: #000000 1px solid;
	BACKGROUND-COLOR: #eff2ff;
	BORDER-TOP: #cccccc 1px solid;
	BORDER-RIGHT: #000000 1px solid
}
#two:hover {
	BORDER-BOTTOM: #000000 1px solid;
	BORDER-LEFT: #000000 1px solid;
	BACKGROUND-COLOR: #eff2ff;
	BORDER-TOP: #cccccc 1px solid;
	BORDER-RIGHT: #000000 1px solid
}
#three:hover {
	BORDER-BOTTOM: #000000 1px solid;
	BORDER-LEFT: #000000 1px solid;
	BACKGROUND-COLOR: #eff2ff;
	BORDER-TOP: #cccccc 1px solid;
	BORDER-RIGHT: #000000 1px solid
}
#one:hover P {
	COLOR: #000000
}
#two {
	DISPLAY: block;
	FLOAT: left
}
#two:hover P {
	COLOR: #000000;
	text-align: center;
}
#three {
	DISPLAY: block;
	FLOAT: left
}
#three:hover P {
	COLOR: #000000
}
/* Misc text fix settings */
.twoColElsLtHdr #container #headline-wrap #headline .home {
	text-align: center;
}

radiant_luv
radiant_luv's picture
Offline
newbie
Last seen: 6 years 51 weeks ago
Timezone: GMT+5.5
Joined: 2010-01-30
Posts: 9
Points: 11

You have a live URL to see

You have a live URL to see this?