PDA

View Full Version : need help with border for div I want to create


nanny
07-29-2008, 09:42 AM
HI I am having trouble with this layout and for the life of me can't get a border around the two divs #centercolumn & #rightcolumn that I want I don't know why.
This is the css:

* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
}
#wrapper {
width: 770px;
margin: 0 auto;
}
#navbar {
border: 1px solid #ccc;
margin: 5px 5px 5px 5px;
padding: 4px;
background-color: #A3A38F;
}
#header {
border: 1px solid #ccc;
margin: 5px 5px 0px 5px;
height: 70px;
padding: 10px;
background-color: #C9C9BE;
}
#centercolumn { /* Parent Wrapper for inside boxes */
border: 1px solid #ccc;
margin: 0px 5px 0px 5px;
display: inline; /* IE Hack */
padding: 4px;
width: 71.3%;
float: left;
min-height: 300px;
}
* html #centercolumn {height:300px} /* IE Min-Height Hack */
#rightcolumn {
margin: 0 5px 0px 0px;
padding: 4px;
display: inline; /* IE Hack */
width: 24%;
float: left;
border: 1px solid #ccc;
background-color: #DAC8BF;
min-height: 300px;
}
* html #rightcolumn {height:300px} /* IE Min-Height Hack */
#footer {
background-color: #A3A38F;
margin: 5px 5px 5px 5px;
display: inline; /* IE Hack */
padding: 4px;
float: left;
width: 97.7%;
}

And this is the html:

<body>
<div id="wrapper">
<div id="header">
This is my Header
</div>

<div id="navbar">
This is my Navigation Bar
</div>

<div id="centercolumn">
<p>This Column is My Main Content Area</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
</div>

<div id="rightcolumn">
<p>This is my Right Column </p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p align="center">&nbsp;</p>
<p>&nbsp;</p>
</div>
<div id="footer">Footer</div>

</div>

</body>

nanny
07-29-2008, 09:43 AM
Just a quick reply to myself to include I want a border as a new div tag i.e. have a border around the two together not separate.

domedia
07-29-2008, 12:54 PM
Nanny can you put this online, it will make debugging a breeze :)
I'm also going to ask you to remove all the empty paragraph tags and achieve whatever they did with CSS instead .

nanny
07-30-2008, 01:42 AM
Thanks for your help:
This is the address: http://salonspa.insalonspa.com/test/

I also notice the footer is hard to get to be the correct width. It looks slightly longer.
Cheers

edbr
07-30-2008, 04:23 AM
played about withy and took out ie hacks but you can put back
try this

<!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>Untitled Document</title>


<style type="text/css">
<!--
* {
padding: 0;
margin: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
color: #666666;
font-size: 12px;
}
#wrapper {
width: 770px;
margin: 0 auto;
}
#navbar {
border: 1px solid #ccc;
margin: 5px 5px 5px 5px;
padding: 4px;
background-color: #A3A38F;
}
#header {
border: 1px solid #ccc;
margin: 5px 5px 0px 5px;
height: 70px;
padding: 10px;
background-color: #C9C9BE;
}
#centercolumn { /* Parent Wrapper for inside boxes */
border: 1px solid #ccc; /* IE Hack */
padding: 4px;
width: 70%;
float: left;
position: relative;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
}

#rightcolumn {
margin: 0 5px 0px 0px;
padding: 4px;
display: inline; /* IE Hack */
width: 24%;
float: left;
border: 1px solid #ccc;
background-color: #DAC8BF;
min-height: 300px;
position: relative;
}

#footer {
background-color: #A3A38F;
margin: 5px 5px 5px 5px;
display: inline; /* IE Hack */
padding: 4px;
float: left;
width: 97.7%;
}
#border{
width:100%;
border:thick solid #333333;
position: relative;
height: 100%;
float: left;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
This is my Header
</div>

<div id="navbar">
This is my Navigation Bar
</div>

<div id="border"><br />
<br />
<div id="centercolumn">Content for id "centercolumn" Goes Here</div>
<div id="rightcolumn">Content for id "rightcolumn" Goes Here</div>
</div>
<div id="footer">Footer</div>

</div>

</body>
</html>

nanny
07-30-2008, 11:20 PM
Thankx edbr
The border div has position relative is that why it will work and why I couln't get it to go around the two divs.

The border does show up much bigger than what the header, nav and footer does - is there any reason why?
Thanks for your help. I am trying to understand why this happens so that when I do the next template I can go straight ahead.