Place to divs side by side fails

Question

I am trying to put two divs next to each other but what I get is shown in the picture.

This is my code:

             <div id="leftColumnSvg ">
                <p> sdsadasd</p>
                <p> sdsadasd</p>
                <p> sdsadasd</p>
                <p> sdsadasd</p>
             </div> 

             <div id="rightColumnSvg">
                <svg width="160" height="160">
                  <circle cx="80" cy= "80" r="60" style="fill:#00cc00"/> 
                  ................

                </svg>
             </div>

And my CSS is:

#leftColumnSvg 
{
 background-color:red;
 width:200px;
 float:left;
}



#rightColumnSvg{   
 width:300px;
 float:right;
}

I thought it should work like this as also shown here.

Answer 1

Note how the background colour to the text is not red either.

You have a trailing space in your ID attribute value, so the selector doesn't match at all.

 #leftColumnSvg { background-color: red; width: 200px; float: left; } #rightColumnSvg { width: 300px; float: right; } 

 <div id="leftColumnSvg "> <p>sdsadasd</p> <p>sdsadasd</p> <p>sdsadasd</p> <p>sdsadasd</p> </div> <div id="rightColumnSvg"> <svg width="160" height="160"> <circle cx="80" cy="80" r="60" style="fill:#00cc00" />................ </svg> </div> 

When I remove it, it works.

 #leftColumnSvg { background-color: red; width: 200px; float: left; } #rightColumnSvg { width: 300px; float: right; } 

 <div id="leftColumnSvg"> <p>sdsadasd</p> <p>sdsadasd</p> <p>sdsadasd</p> <p>sdsadasd</p> </div> <div id="rightColumnSvg"> <svg width="160" height="160"> <circle cx="80" cy="80" r="60" style="fill:#00cc00" />................ </svg> </div>