I am struggling with creating a gap between the main content and the floated right column in my website. Despite attempting to adjust it, I cannot seem to achieve the desired spacing between the right column and the main body.
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header"></div>
<div id="leftcolumn">
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
<ul> <a href=""></a></ul>
</div>
<div id="content"><p class id="pcenter"></div>
<div id="rightcol"> Right text goes here</div>
<div id="footer">
<div id="footerp">
<p> </p>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0px;
padding: 0px;
}
#header
{
background-image: url(images/Logo.jpg);
background-size: 100%;
clear:both;
height:420px;
width:100%;
background-image:url(images/Logo.jpg);
background-repeat:no-repeat;
}
#leftcolumn
{
background: #b048b5;
float: left;
width: 19%;
height: 500px;
border-style:solid;
border-width: 5px;
border-color:#000001;
}
#rightcol
{
background: #b048b5;
float: right;
border-style:solid;
border-width: 5px;
border-color:#000001
width: 20%;
height: 500px;
}
#content{
border-style:solid;
background:white;
border-width: 5px;
border-color:#000001;
float:left;
width: 60%;
height: 500px;
text-align: center;
font: 16px;
}
#footer{
background: #000000;
clear: both;
font:16pt;
font:#FFFFFF;
width: 100%;
border-style:solid;
border-width: 1px;
border-color:#000001
}
#footerp
{
color: white;
text-align: center;
}
#pcenter
{
text-align:center;
}