Hey everyone I’m trying to put an image side by side in css but I’m having a little trouble.
I tried searching online but the methods they used didn’t work when I tried them
here’s how I want the images to look like side by side
Here’s how it looks with my coding
Now the left image which is leftbox in my dv id
is a background image with a text div
right box is obviously the right box and that one is an img src on
the xhtml, I read somewhere you have to do it this way but it didn’t work
Hopefully you could help me out
here’s my coding
XHTML
<!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>
<link rel="stylesheet" type="text/css" href="Style2.css"/>
</head>
<body>
<div id="container">
<div id="header">
<ul id="navbar">
<li><a href="home.html" id="home">Home</a></li>
<li><a href="manufacturing.html" id="manufacturing">Manufacturing</a></li>
<li><a href="services.html" id="services">Services</a></li>
<li><a href="aboutus.html" id="aboutus">AboutUs</a></li>
<li><a href="contactus.html" id="contactus">ContactUs</a></li>
<li><a href="requestforquote.html" id="requestforquote">RequestforQuote</a></li>
</ul>
</div>
</div>
<div id="maincenter">
<div id="maincenter_content">
<p align="left" style="text-indent: 2em;"><strong> “ With more than 35 years of experience, <br/>
CUSTOM PRODUCT DEVELOPMENT CORPORATION<br/> provides innovative/low cost engineered mechanical components and Turn-Key Assembly solutions. Our technical design expertise, coupled with creative manufacturing and supply chain control, ensures that our customers receive the best possible service available in today's competitive industry.”</strong></p>
</div>
</div>
<div id="leftbox">
<div id="leftbox_content">
<p align="left">
</p>
<p align="left"><strong>We pride ourselves on Outstanding Customer Service and Product Quality. Whether you are a current customer, or a potentially new customer, we take a genuine interest in your product requirements. Customer loyalty is a priority at Custom Product Development Corporation.</strong></p>
</div>
</div>
<div id="rightbox">
<div align="center"><a href="#"><img src="images/Rightbodyimg.jpg" alt="This is an image" width="280" height="261" border="0" /></a> </div>
</div>
</body>
</html>
CSS
*{
padding:0;
margin:0;
}
body {
font-family:Calibri;
padding:0;
margin:0;
background-color:#000000;
}
#container {
width:897px;
padding:0;
margin:auto;
}
#header{
background-repeat:no-repeat;
background-image:url(Banner.png);
height: 158px;
width: 897px;
margin-top: 20px;
clear: both;
}
#navbar {
margin: 0px;
padding: 0px;
margin-left: 5px;
list-style: none;
}
#navbar a {
text-decoration: none;
display:block;
float:left;
text-indent: -5000px;
}
#navbar li{
float: left;
}
#navbar #home{
background-image:url(Home.png);
background-repeat: no-repeat;
background-position: 0 0;
margin-top: 180px;
width: 120px;
height: 58px;
}
#navbar #home:hover{
background-position: 0 -58px;
}
#navbar #manufacturing{
background-image:url(Manufacturing.png);
background-repeat:no-repeat;
background-position: 0 0;
margin-top:180px;
margin-left:1px;
width: 154px;
height: 58px;
}
#navbar #manufacturing:hover{
background-position: 0 -58px;
}
#navbar #services{
background-image:url(Services.png);
background-repeat:no-repeat;
background-position: 0 0;
width: 121px;
height:58px;
margin-left: 0px;
margin-top: 180px;
}
#navbar #services:hover{
background-position: 0 -58px;
}
#navbar #aboutus{
background-image:url(About-Us.png);
background-repeat:no-repeat;
background-position: 0 0;
width: 129px;
height:58px;
margin-left: 0px;
margin-top: 180px;
}
#navbar #aboutus:hover{
background-position: 0 -58px;
}
#navbar #contactus{
background-image:url(ContactUs.png);
background-repeat:no-repeat;
background-position: 0 0;
width: 132px;
height:58px;
margin-left: 0px;
margin-top: 180px;
}
#navbar #contactus:hover{
background-position: 0 -58px;
}
#navbar #requestforquote{
background-image:url(RequestForQuote.png);
background-repeat:no-repeat;
background-position: 0 0;
width: 229px;
height:58px;
margin-left: 0px;
margin-top: 180px;
}
#navbar #requestforquote:hover{
background-position: 0 -58px;
}
#maincenter{
background-repeat:no-repeat;
background-image:url(Body1.jpg);
height: 367px;
width: 890px;
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
#maincenter_content {
clear: both;
float: right;
width: 435px;
margin-top: 130px;
}
#maincenter_content p {
font-family:Calibri;
font-size: 20px;
line-height: 20px;
color:#FFF;
}
#leftbox{
background-repeat:no-repeat;
background-image:url(images/Leftimg.jpg);
height: 261px;
width: 517px;
clear: both;
display: block;
margin-left: 382px;
margin-top: 5px;
}
#leftbox_content {
clear: both;
float: right;
width: 350px;
margin-top: 90px;
}
#leftbox_content p {
font-family:Calibri;
font-size: 20px;
line-height: 18px;
color:#FFF;
}
#rightbox{
}
I took off all the margins in right box because it wasn’t working
just if your curious why it’s blank
