How to prevent overriding of CSS

Question

What I am trying to do is be able to have two columns in a div. So I can insert a picture at any point, and place text long side it neatly.

Here is my html:

<div id="content">
<div id="gallery">
    <h1>Gallery</h1>
    <div id="container">
        <div id="imageleft">
            <img src="images/pic1.jpg" width="150px" alt="Image" />
        </div>
        <div id="imageright">
            test
        </div>
    </div>
    <img src="images/pic2.jpg" width="150px" alt="Image" />
    <img src="images/pic3.jpg" width="150px" alt="Image" />
    <img src="images/pic4.jpg" width="150px" alt="Image" />
</div>
</div>

Here is a perfect working JSFiddle

http://jsfiddle.net/RdyGM/1/

And here is an image of what I actually see. The purple bit should be 50% of left. (The text "test" is placed below).

upon inspection you can see that it is obtaining its width from else where :@

How to use just my desired css.

Answer 1

Well, there are two things you could do. The general approach is to try to make your CSS selector more specific. So you could do: #gallery #content #imageleft, instead of just #imageleft, and that should make your rule apply. The other approach is to change your CSS #imageleft to say:

#imageleft{
   ....
   width:50% !important;
   ....
}

Answer 2

You can use !important to tell the browser which CSS to prioritise - it might, or might not help...

#imageleft {
    float:left;
    width:50% !important;
    background:#c9c;
}

#imageright {
    float:right;
    width:50%  !important;
    background:#9c9;
}

Answer 3

domId.Attributes.Add("property of css", "Your css class name");