PDA

View Full Version : horizontal aligned boxes...


CaliWilli
11-12-2008, 09:06 PM
I'm having trouble getting .nav and .content sit directly next to each other with no space between them, .nav to the left and .content to the right. Also, .content doesn't line up with the upper boxes to the right.


body {background-color: #66CC66;
margin-left: 32px;
margin-right: 32px;
margin-top: 5px;
}
.container {
background-color: #66CC66;
margin: 0px;
padding: 0px;
width: 940px;
position: relative;
height: auto;
}
.bannergraphic {
margin: 0px;
padding: 0px;
width: 100%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
left: auto;
top: auto;
right: auto;
bottom: auto;
}

.blackbox {
font-family: "Times New Roman", Times, serif;
font-size: large;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FF0000;
text-decoration: none;
background-color: #000000;
background-position: left top;
text-align: center;
vertical-align: top;
white-space: normal;
margin: 0px;
padding: 3px;
clear: none;
width: 100%;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
position: relative;
height: auto;
float: none;
}
.nav {
vertical-align: top;
margin: 0px;
padding: 0px;
float: left;
width: 22%;
position: relative;
background-color: #CCFFCC;
}
.content {
font-family: "Times New Roman", Times, serif;
font-size: medium;
color: #000000;
background-color: #CCFFCC;
text-align: left;
vertical-align: top;
padding: 15px;
float: right;
width: 78%;
position: relative;
margin: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
.blackbox a:link {
color:#FF0000;}
.blackbox a:visited {
color:#FF0000;}
.blackbox a:hover {
color:#FF0000}
.blackbox img {
line-height:54px}

coloeagle
11-12-2008, 11:31 PM
Right now you have your .nav floating left and the .content floating right - opposite directions.
Without seeing the rest of the page setup, if your .content div follows the .nav div try floating the .content left. This will slide it next to the .nav

CaliWilli
11-13-2008, 04:17 AM
thanks. I've tried that but there's something wrong with the width's. I have .nav and .content at 22% and 78% respectively, but content won't fit, it sits beneath .nav. Here is the html





<!DOCTYPEhtmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<htmlxmlns="http://www.w3.org/1999/xhtml">


<head>


<metahttp-equiv="Content-Type" content="text/html; charset=utf-8" />


<title>Welcome to Shea Electric - For all of your Residential and Commercial Electrical Needs</title>


<linkhref="style.css" rel="stylesheet" type="text/css" media="all" />


<scripttype="text/javascript">


<!--


function MM_preloadImages() { //v3.0


var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();


var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)


if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}


}


function MM_swapImgRestore() { //v3.0


var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;


}


function MM_findObj(n, d) { //v4.01


var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {


d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}


if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];


for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);


if(!x && d.getElementById) x=d.getElementById(n); return x;


}





function MM_swapImage() { //v3.0


var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)


if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}


}


//-->


</script>


</head>





<bodyonload="MM_preloadImages('images/bbblogo.gif','images/bluebooklogo.gif','images/paypal.gif','images/b_h_d.jpg','images/b_c_d.jpg','images/b_p_d.jpg')">





<divclass="container">





<divclass="bannergraphic"><imgsrc="images/banner_lights.jpg" alt="Welcome to Shea Electric" width="940" height="141" /></div>





<divclass="blackbox"> &nbsp;&nbsp;&nbsp;<ahref="bbb.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('BBB','','images/bbblogo.gif',1)"><imgsrc="images/bbblogo1.gif" alt="BBB" name="BBB" width="47" height="50" border="0" id="BBB" /></a> <ahref="bluebook.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bluebook','','images/bluebooklogo.gif',1)"><imgsrc="images/bluebooklogo1.gif" alt="Bluebook" name="Bluebook" width="256" height="50" border="0" id="Bluebook" /></a> <ahref="paypal.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Paypal','','images/paypal.gif',1)"><imgsrc="images/paypal1.gif" alt="Paypal" name="Paypal" width="50" height="50" border="0" id="Paypal" /></a></div>





<divclass="blackbox">&nbsp;&nbsp;&nbsp;(760) 587-7077&nbsp;&nbsp;&nbsp; <imgsrc="images/rule.jpg" width="2" height="12" />&nbsp;&nbsp;&nbsp; <ahref="mailto:sheaelectric07@yahoo.com">sheaelectric07@yahoo.com</a> &nbsp;&nbsp;&nbsp;<imgsrc="images/rule.jpg" width="2" height="12" />&nbsp;&nbsp;&nbsp;&nbsp;License #907877</div>





<divclass="nav">


<imgsrc="images/b_i_p.jpg" alt="Welcome to Shea Electric - For all of your Residential and Commercial Electrical Needs" width="201" height="63" /><br />


<ahref="history.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/b_h_d.jpg',1)"><imgsrc="images/b_h_u.jpg" alt="An overview of the Shea Electric's experience in Souther California" name="Image8" width="201" height="63" border="0" id="Image8" /><br />


</a><ahref="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/b_c_d.jpg',1)"><ahref="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/b_c_d.jpg',1)"><ahref="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/b_c_d.jpg',1)"></a><ahref="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/b_c_d.jpg',1)"><imgsrc="images/b_c_u.jpg" alt="Just a call or click away" name="Image9" width="201" height="63" border="0" id="Image9" /><br />


</a><ahref="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/b_p_d.jpg',1)"><ahref="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/b_p_d.jpg',1)"><ahref="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/b_p_d.jpg',1)"></a><ahref="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','images/b_p_d.jpg',1)"><imgsrc="images/b_p_u.jpg" alt="See examples of our excellent craftsmanship" name="Image10" width="201" height="136" border="0" usemap="#Image10Map" id="Image10" />


<mapname="Image10Map" id="Image10Map"><areashape="rect" coords="19,12,99,115" href="residential.html" alt="Residential Photo Album" />


<areashape="rect" coords="103,11,182,114" href="commercial.html" alt="Commercial Photo Album" />


</map></a></a></a><ahref="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','images/b_c_d.jpg',1)"><br />


</a></div>


<divclass="content">Content for class "content" Goes Here</div>


</div>





</body>


</html>

edbr
11-13-2008, 04:44 AM
you have your container at a set pixel width and the nav content as %'s
try setting these as px widths as they wont vary inside this. not sure it is the right answer to be honest but i would try anyway

CaliWilli
11-13-2008, 03:58 PM
I've already tried that, the graphics in the .nav are 201px so I subtracted that from the width of the container, and it still didn't work. Maybe this means I have to graduate on to absolute positioning for the .content. Any better ideas? I'm all eyes.

coloeagle
11-13-2008, 04:10 PM
Try removing the float from the .content.

Also just a little fyi, when using percentages leave yourself 1% breathing room. This will help with IE not being very good at math.