Blank Space Between Divs

My page is something like this: One container set at 80% width and 10% margins on the right and left. Then within that div there is a wrap div. Within this is my right and left div. The right is bigger, 60% of the container. The left is smaller, 20%. I then have a footer div that is below all of the that, not nested within any other divs. The footer is 80% of the page with similar margins to the container. In between the left and right there is a white space that I don't want. It is re-sizable and shows up in Chrome, Firefox, and IE. See what you can do.

HTML:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title></title>

<meta http-equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=23)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=3.0,Transition=23)">
<meta name="created" content="">
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="">
<meta name="copyright" content="">
<meta name="title" content="">

<link rel="icon" href="images/favicon.ico" type="image/ico" >
<link rel="shortcut icon" href="images/favicon.ico" type="image/ico" >
<link rel="stylesheet" type="text/css" href="stylesheet2.css">
<link rel="apple-touch-icon" href="images/customIcon.png"/>

</head>



<body>
<div class="container">
<div class="wrap"
<div class="content">
This is content
</div>
<div class="right">
Right Content
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</div>
</div>
</div>
<div class="footer">
Footer
<br />
</div>
</body>
</html>

CSS:


* {
padding:0;
margin:0;
border:0;
}

html {
}

body {
margin:0px;
background-color:green;
background-image: url('images/camo.png')
}

a.visited {
text-decoration:none;
color:grey;
}

a {
color:green;
text-decoration:underline;
}

.header {
width:80%;
height:auto;
background-repeat:repeat-x;
background-color:white;
text-align:center;
padding-bottom:10px;
}

.container {
width:80%;
margin-left:10%;
margin-right:10%;
overflow:auto;
background-color:white;
}

.content {
background-color:#E4E4E4;
border-bottom: 2px solid #E4E4E4;
border-right: 2px solid #E4E4E4;
width:60%;
color:#000;
min-width:20%;
}

.wrap {
width:100%;
clear:both;
}

.right {

height:100%;
width:20%;
background-color:grey;
color:#00000;
padding-top:25px;
}

.footer {
color:white;
background-image:url('footer.png');
margin:0 auto;
padding-top:10px;
padding-bottom:0px;
background-color:white;
font-size:90%;
text-align:center;
margin-left:auto;
margin-right:auto;
width:80%;
opacity:.75;
filter:alpha(opacity=75);
}







.note {
font-size:10pt;
}

/*Sets defaults for all browsers*/
h1 {
font-size:200%;margin-top:0px;font-weight:normal;
}

h2 {
font-size:160%;margin-top:10px;margin-bottom:10px;font-weight:normal;
}

h3 {
font-size:120%;font-weight:normal;
}

h4 {
font-size:100%;
}

h5 {
font-size:90%;
}

h6 {
font-size:80%;
}

h1,h2,h3,h4,h5,h6 {
background-color:transparent;
color:#000000;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, label, ul, ol, dl, fieldset, address {
margin:1em 5%;
}

li, dd {
margin-left:5%; }

fieldset {
padding:.5em;
}

.arialStyle {
font-family:verdana,arial,sans-serif;
font-size:12px;
color:#000000;
margin:0;
padding:0;
}

.romanStyle {
font-family:georgia,"times new roman",serif;
font-size: 12px;
color:#000000;
margin:0;
padding:0;
}

Blank Space Between Divs

I have a big right div and a small left div. There is a white space between

FrenchFrysable

londrum

FrenchFrysable

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week