I am trying to create a color column in my email template. The problem I am facing is a content wrapper containing all email content according to the code below. Similarly, CSS floating columns are included.
#content {
background-color: white;
margin: auto;
width: 600px;
color: #888;
font-size: 12px;
border-radius: .6em .6em 0em 0em;
box-shadow: 0px 0px 15px 0px #555;
}
.blueLeft {
background-color: #33ccff;
float: left;
display: block;
width: 300px;
padding: 20px;
font-size: 16px;
}
.blueRight {
background-color: #33ccff;
float: right;
display: block;
width: 300px;
padding: 20px;
font-size: 16px;
}
<div id="content">
<div class="blueLeft">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="blueRight">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div><div class="clearFloat"></div>
</div>
As you can see, the content wrapper has width: 600px;, and the columns have 300 pixels. Then you expected the columns to fill 100% of the width of the wrapper with no gap between them. Setting the width to 50% is the same problem. So somehow, it #contentdisplays less than necessary.
How to edit it so that each column really occupies 50% of the content width?
The result is the following:
