Padding problem.

[Mentor]

ok, ive been coding up my latest thybag version (xhtml 1.1/CSS/WCAG), but ive come accross a problem with padding.

http://www.thybag.co.uk/Thy6/layout.html

In the side modules, the title element requires some form of padding so its not touching the sides of the content box. How to do this though is somthing ive become stuck on.
Since:
> The title text needs to be in the root div so the drag and drop repositioning system will work, meaning i cant put it in its own div or span.
> padding the module class would also pad the module_text part which would cause problems.

Can anyone suggest any solutions or ideas on how to get past this?
Thanks for any help provided :)

[Tomm]

You could add a spacer div?

Or add some padding on the content:

padding-left: 3px;
padding-right: 3px;

For example.

[Splinter]

So why not just place a div above the sub-title with a height of say 10px so the text can still me in the root div??

[Luckyrare]

I dont understand why you cant put it in a span that class has like 3px padding?

If you use script.aculo.us then you can have anything you want in the dragable div, if your making your own JS then surely you could do the same?

[Mentor]

hmm, well idealy (i may have to compramise) i wanted the whole top part of the div to be dragable, so dont really want any exstra divs in it if i can help it.

Also, span would stop the title being in the root div and also still not work as spans dont effect the margin/padding top of bottom. youd have to ask w3 why "/

Padding the content also wouldnt work as its the title text which requres positioning, and the main text part would be effected by any padding in the root div, which would stop it from fitting correctly "/

Secondly, yes i can have anything i want in the dragable div, but only selection of the root div actualy allows the drag action to take place. This is because its a substantually more advanced action than simplistic drag and drop as i need to be able to reorder the side bar modules via it as wel as allow them to slot in to places and move to make room for each other etc etc "/

[Sygon..]

Add a <dl><dt>Title</dt></dl> That should do it in the title box

[Splinter]

Then why not just add a padding image which shouldnt effect the drag and drop stuff.

[Invent]

Even though I don't use IE.
That site is messed up in it so far :P

[Mentor]

Even though I don't use IE.
That site is messed up in it so far :P

Yea, although i think i may no how to fix it as i belive the problems with the way IE6 handles forms (ignoreing the w3 standards as it does) hopefully if i define pad and margins for em i should get the layout to fit together properly in it :p

Sygon: im not sure if a list will help but its an interesting idea, ill give it ago, although ive just got to hope it doesnt effect the root divs grab abiltys :p Thanks.

splinter: a image used for padding would create a non dragable aria where the image is, so wouldnt really help. Thanks for the idea tho

[craigg.]

For some reason, I had the same problem. I reduced the size, when I added padding, and it fixed it. Give it a try. (I'm not too sure what you've tried)

[Sygon..]

I dont know if it validates but usually the <dt></dt> Tag has the padding so it should be fine i.e like <blockquote> for content