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.

It's seems that the popup's width is less than 500px. If so, you need to enlarge the popup (if you can) or reduce the columns. — Mosh Feu, Sep 09 '15 at 12:31

score 3 · Accepted Answer · answered Sep 09 '15 at 12:31

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>

Place to divs side by side fails

1 Answers1