Why my CSS is not overridden?

<style type="text/css">
.x-container img {
    float: left;
    margin-right: 15px;
}
.content img{
    clear:both;
}
</style>

<div class="x-container span-18">
    <div class="content">
        <img src="image.jpg" id="disneland-img">
    </div>
    <h2>Hello</h2>
</div>

I have html like above. I was expecting clear:both in .content img will override float:left of .x-container img, but it is not.

How can I achieve this please?

Answers


float and clear are two distinct css declarations. They don't override each other. (Although they are relating to/influencing each other of course.) If you want to override your float:left of your first class you can simply write:

.content img{
    float:none;
}

Clearing the float is another thing, you need to use the clear on a sibling element, or put an overflow:auto|hidden on the parent element or apply the so called "clear-fix" method.

.clearfix:after {
     content:"";
     display:table;
     clear:both;
}

user clearfix class direct on image , that will do all the job put clearfix class on div with content class.

<div class="x-container span-18">
    <div class="content clearfix ">
    <img src="image.jpg" id="disneland-img">
    </div>
<h2>Hello</h2>
</div>

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    zoom: 1;
}

http://jsfiddle.net/wikijames/TVm6K/


THis should fix it.

.x-container img {
    float: left;
    margin-right: 15px;
}
.x-container h2 {
    display: block;
    clear: both;
}

I think that you should specify float:inherit in .content class

.content img{
    float:inherit;
    clear:both;
}

Because float attribute by default is set to none. http://www.w3schools.com/cssref/pr_class_float.asp


Need Your Help

Mechanize: submitting form but not loading new page to see results

python screen-scraping mechanize mechanize-python

Okay, so I'm starting to get a little frustrated. I've spent most of a day trying to figure out why my script is not working - both on github and here. It should be fairly simple. Mechanize load a ...

How can I add an ICS meeting automatically to the Organizer's calendar?

outlook outlook-2007 icalendar meeting-request ical4j

Our java application generates ICalendar files using ical4j, and sends them out to users as part of an HTML e-mail notification. A couple of users (the Organizers of the meeting) report that the the