CODEWITHSUNDEEP
htmlcssparent
Iain Simpson
Iain Simpson

Reputation: 8121

Stop a child div from creating padding, but only on one div id in css

I am using Joomla to create a website at the moment and I am having problems with a certain module getting padding applied to it. The problem is with Joomla you have classes for the modules that I cant seem to override. The layout is as follows : 

    <div id="rt-page-surround">
    <div class="rt-container">
    <div class="rt-container-bg">
    <div id="rt-drawer">
    <div id="rt-header">
    <div class="rt-grid-6 rt-alpha">
    <div class="rt-grid-6 rt-omega">
    <div class="thumbnail_scroller">
    <div class="rt-block">
    <div class="module-content">
    <div id="jdv_iscroll122_wrap" class="jdv_iscroll_wrap " style="width: 620px; height: 110px; ">
    <div id="jdv_iscroll122_inner" class="jdv_iscroll_inner horizontally" style="width: 32766px; height: 110px; left: 0px; ">
    </div>

The module I am trying to modify is thumbnail_scroller, the problem is it is getting 15px of padding from rt-block. If I set rt-block to padding:0px this gives the desired affect to thumbnail_scroller but it also applies the zero padding to everything else on the page as the rt-block class is shared with numerous other elements on the page (this is the way the template is coded by the author). What I want to do is apply zero padding to rt-block but only for the thumbnail_scroller module.

I have tried 

.thumbnail_scroller {padding:0px !important}

but this seems to do nothing, anyone any ideas on this one ? :-)

Upvotes: 1

Views: 189

Answers (2)

Jamie Dexter
Jamie Dexter

Reputation: 193

You can be hyper-specific by trying something within your CSS like:

div.thumbnail_scroller div.rt-block {

    padding: 0px;
}

That directive will then apply only to a div of class thumbnail_scroller IF it sits within a div container of class rt-block.

(Edited for div order - re-read your question.) {:¬)

Upvotes: 2

shanethehat
shanethehat

Reputation: 15560

div.thumbnail_scroller div.rt-block {
    padding:0;
}

This specifically targets divs with the rt-block class that are inside a div with the thumbnail_scroller class.

Upvotes: 3

Related Questions