Question

I am a newbie at HTML coding, and I have the following HTML element:

<div id="map_canvas" style="width: 500px; height: 370px; border: 1px solid #ccc; float: left"></div>

I want to apply for it a “left” CSS style. I’ve been doing that for other items using:

<div id="left" >
    <input type=button ....
</div>

However, as you can see, map_canvas is already the id for my element, so how can I apply the CSS element with id left for it?

Answer 1

#map_canvas {
    width: 500px;
    height: 370px;
    border: 1px solid #ccc;
}

.left {
    float: left;
    border: 1px solid blue;
}

<div class="left">Not #map_canvas</div>
<div id="map_canvas" class="left">This is #map_canvas .left</div>

http://jsfiddle.net/94dwn/3/

Note that the width of an element govern’s it’s float to the next “line” if the “next” element isn’t “cleared”, so if an element is narrower on display than the previously floated element, it could go to the right/left of that element. In that case, you should use clear.

<div class="left">Not #map_canvas</div>
<div id="map_canvas" class="left">This is #map_canvas .left</div>
<div class="cleared">Clear</div>

#map_canvas {
    width: 500px;
    height: 370px;
    border: 1px solid #ccc;
}
.left {
    float: left;
    border: 1px solid blue;
}
.cleared {
    clear: both;
    background: green;
    border: 1px solid blue;
    color: white;
}

http://jsfiddle.net/94dwn/4/