Question

I am useless at CSS and I am trying to create a two column equal width effect. The only issue is that I have some existing html that has to sit in the left hand box and will need to add elements to the right hand box.

This is the source that will be in the left hand side (I have included the CSS inline):

<div id="photoContainer" style="position:relative; width:400px; height: 400px;background:#845454;margin-left:20px;overflow: hidden;" >
   <img id="imgPhoto" style="z-index:1000; position:absolute; left:60px; top:23px; width:280px; height:354px" alt="photo" src="images/model.png" class="resize" />
   <img id="imgFrame" style="z-index:1005; position:absolute; left:0px; top:0px; width:400px; height:400px" alt="frame" src="images/wigs/Wig1.png" />
</div>

Try as I might, I can not get the CSS right to display the above in the left hand side and further controls in the right hand side.

Hopefully you can help me.

Thanks

Answer 1

not very clear what you have to do but in general:

<div id="container">
<div id="column1">...</div>
<div id="column2">...</div>
</div>

CSS:

#container {
  float: left;
  width: 100%;
}
#column1, #column2 {
  width: 50%;
  float: left; 
}