Hi,
I am trying to get two divs to appear next to each other within another div and I cant seem to get it to work anyway I try it !! They still appear on top of each other instead. Ive set borders on each to clarify it. I set the width of one to 60% and the other to 40%, set the margins left and right to 0 and I remembered something the guy said in class about displaying them inline so i tried that too but it screwed up the whole page
I was wondering if anybody here can give me a hand. Here is the CSS and then the html I am using. I wish I had hosting somewhere I would have pasted links instead but I dont. Thanks in advance.
CSS:
body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
text-align: center;
background-image: url(images/bg.jpg);
}
#leftFloat
{
width:15%;
height: 100%;
float: left;
position: absolute;
top:0px;
left:0px;
background-image:url(images/sh_lf.png);
background-repeat: repeat-y;
background-position: right;
display: inline;
}
#main
{
position:absolute;
top: 0px;
left: 15%;
width: 70%;
height: auto;
display: inline;
background-color: #FFFFFF;
}
#rightFloat
{
width:15%;
height: 100%;
float: right;
display: inline;
position: absolute;
top:0px;
right:0px;
background-image:url(images/sh_rt.png);
background-repeat: repeat-y;
background-position: left;
}
#header {
background-image: url(images/5.png);
background-repeat: no-repeat;
height: 270px;
}
#menu
{
background-color: #BED6E3;
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
word-spacing: 5px;
text-align: right;
padding: 10px;
color:#FFFFFF;
font-weight:bolder;
}
a:link {color: #FFFFFF; text-decoration: none}
a:hover {color: #0A3245; text-decoration: none}
#contentLeft
{
border: thin red solid;
margin: 0px;
width: 60%;
padding: 30px;
}
#contentRight
{
border: thin red solid;
margin: 0px;
width: 40%;
padding: 30px;
}
/* border-right: 2px dotted #999999; */
h1
{
font-size: 20px;
font-family:Georgia, "Times New Roman", Times, serif;
color:#EEC00D;
text-align: left;
margin: 0 0 30px;
line-height: 1em;
}
h2
{
font-size: 14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#707070;
text-align: left;
margin-top: 0px;
font-variant: small-caps;
line-height: 1em;
}
p
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #177482;
text-align: justify;
line-height: 1.5em;
word-spacing: 0px;
}
ul, li
{
list-style-image: url(images/bt.png);
list-style-position: inside;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #177482;
text-align: left;
line-height: 1.5em;
padding-left: 0px;
}
#footer
{
background-color: #BED6E3;
font-family:Arial, Helvetica, sans-serif;
font-size: 10px;
word-spacing: 5px;
text-align: center;
padding: 10px;
color:#FFFFFF;
font-weight:bolder;
}
HTML:
<body>
<div id="leftFloat"></div>
<div id="main">
<div id="menu"><a href="home.htm">Home</a> | <a href="technology.htm">Technology</a> | <a href="solutions.htm">Solutions</a> | <a href="clients.htm">Our Clients</a> | <a href="about.htm">About Us</a> | <a href="contact.htm">Contact Us</a></div>
<div id="header"></div>
<div id="contentLeft">
</div>
<div id="contentRight"></div>
<div id="footer"><a href="contact.htm">Privacy Policy</a> | <a href="contact.htm">Site Map</a> | <a href="contact.htm">RSS Feed</a> | <a href="contact.htm">Contact Me</a> | <a href="contact.htm">Get a quote</a></div>
</div>
<div id="rightFloat"></div>
</body>
</html>