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

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.