Positiong of div with inherited DIV for jqDock driving me insane - css

Question

I have this problem that is driving me mad... I've been struggling with it for hours but can't figure out how to over come it.
I am using jqDock and want to place a toolbar in a "box" in a column. There is quite a lot of code included but you can see a sample here: http://ag.wasen.net/index.php?option=com_content&view=section&id=2&Itemid=17
Look at "Simple File Lister v2.0 #2" in the right hand side column where the toolbar is perfectly place. Then look at the left hand side where the toolbar goes vertical and is completely off track.
These two modules (as they are called in Joomla) is using the exact same code!
The difference between these two modules, the left one and the right is that the left one inherits a lot of CSS from the "div" statements in the left column.
The problem seems to be with the inherited "width" from a previously loaded CSS file. If I look at it in FireBug and remove the declaration for #leftcolumn div {width: 191px;} in FireBug the toolbar on the left is working fine.
I have tried to insert my own "width" on all different DIV's and using "!important" but even if FireBug shows the "#leftcolumn div" as stiked-out it still affects my toolbar DIV.
Regardless of how I have tried to "nullify" the inherited "#leftcolumn div" width it still affects my DIV.
Any clues on how I would be rid of it?
Regards,
Anders

Answer 1

Try the below css - Paste this in you template.css file and try to set the width if required on different selectors.
#main_bg #leftcolumn div.module_menu div div div, #main_bg #leftcolumn div.module div div .jqDocked div {
width: 20px;
}
see below image for output: Open the image in new window so you can see clearly.

Answer 2

Problem 1. You are trying to fit a horizontal Dock that has a maximum expanded width of 263px (7 48x48 icons) into a column that is only 191px wide: the Dock is going to overflow!
Problem 2. The template you are using is setting a specific width of 191px on any div more than 1 level below the div.module child of div#leftcolumn. Additionally, your template is specifiying both width and padding on some elements, which is going to cause cross-browser inconsistency and also makes some of the elements extend beyond the bounds of the column.
Since jqDock does not provide many ids on elements, the rules needed in order to override your template are going to have to be at least as 'specific' as the template's, if not more so.
For example, replace your page's rules for...
.sflpage {...}
.sflmenu {...}
#main_bg #leftcolumn div.module_menu div div div,
#main_bg #leftcolumn div.module div div {...}
with...
/*position the Dock's container, ensuring it's visible, and killing
the padding imposed by the template...*/
#leftcolumn div.module div div div div.sflpage {
padding: 0pt;
position: relative;
top: -20px;
width: auto;
z-index: 9999;
}
/*put the Dock in the center of its container, and give it plenty
of width for a fully-expanded Dock...*/
#leftcolumn div.module div div div div.jqDocked {
left: 50%;
margin-left: -150px;
padding: 0px 0pt;
position: absolute;
top: 0pt;
width: 300px;
}
/*kill the width and padding imposed by the template...*/
#leftcolumn div.module div div div div.jqDocked div {
width: auto;
padding: 0;
}
/*center the dock...*/
#leftcolumn div.module div div div div.jqDocked .jqDockWrap {
margin: 0pt auto;
}
/*use this to set/tweak the label's styling...*/
#leftcolumn div.module div div div div.jqDocked .jqDockLabelText {
}
I would also suggest that you need more horizontal space for the Dock (ie. between the module header and the file list), that your labels need better styling so that are visible and readable.