This is driving me bonkers.

 

I have a div containing a menu and I want to add some padding. However, when I do, the padding (or margin, i've tried both) is added to the slim box at the top of the div. What is that and how can I get rid of it??

 

see here: http://freerangefs.co.uk/images/screenshot.gif

This is driving me bonkers.

 

I have a div containing a menu and I want to add some padding. However, when I do, the padding (or margin, i've tried both) is added to the slim box at the top of the div. What is that and how can I get rid of it??

 

see here: http://freerangefs.co.uk/images/screenshot.gif

 

Use the padding like this see if it works

 

padding-left:10px;
padding-right:10px;
padding-bottom:10px;

 

By using it like that insted of like this padding:10px 10px 10px 10px; it wont add any padding to the top just the left,right and bottom. I think thats what u ment

can you show the code

can you show the code

 

<div class="wrapper">

<ul id="int_benefits">

<div class="int_benefits_left">

<li>Full support & no joining fee</li>

<li>Training available</li>

<li>18 months claims experience</li>

<li>Excellent Communication</li>

<li>Customer-focused service</li>

</div>

<div class="int_benefits_right">

<li>No back-end fees for unenforceability claims</li>

<li>Fair pricing structure & full refund policy </li>

<li>Simple process</li>

<li>Generous Commissions</li>

<li>We treat people properly</li>

</div>

</ul><br />

</div>

 

 

.wrapper {margin:0 auto;position:relative;}

ul#int_benefits {list-style:disc;}

.int_benefits_left {width: 260px; float: left;}

.int_benefits_right {width: 320px;float:left;}

You shouldn't use a <div> in a <ul> element. Try this:

<div class="wrapper">
<ul class="int_benefits_left">
<li>Full support & no joining fee</li>
<li>Training available</li>
<li>18 months claims experience</li>
<li>Excellent Communication</li>
<li>Customer-focused service</li>
</ul>
<ul class="int_benefits_right">
<li>No back-end fees for unenforceability claims</li>
<li>Fair pricing structure & full refund policy </li>
<li>Simple process</li>
<li>Generous Commissions</li>
<li>We treat people properly</li>
</ul>
</div>

Use a div to isolate the lists if need be, but adding divs after the <ul> is not going to produce the results you want.

The reason your div seemed to only occupy a small area at the top is because the content inside it was floated. Floating an element takes it out of the flow of the document. There are a number of fixes for this - I'm sure there are plenty of posts on the forum about it.

Hope that helps

You shouldn't use a <div> in a <ul> element. Try this:

<div class="wrapper">
<ul class="int_benefits_left">
<li>Full support & no joining fee</li>
<li>Training available</li>
<li>18 months claims experience</li>
<li>Excellent Communication</li>
<li>Customer-focused service</li>
</ul>
<ul class="int_benefits_right">
<li>No back-end fees for unenforceability claims</li>
<li>Fair pricing structure & full refund policy </li>
<li>Simple process</li>
<li>Generous Commissions</li>
<li>We treat people properly</li>
</ul>
</div>

Use a div to isolate the lists if need be, but adding divs after the <ul> is not going to produce the results you want.

The reason your div seemed to only occupy a small area at the top is because the content inside it was floated. Floating an element takes it out of the flow of the document. There are a number of fixes for this - I'm sure there are plenty of posts on the forum about it.

Hope that helps

 

Yes it does help thanks. Is there a proper way then to get a list in 2 columns? that's why I set up the two divs to split the wrapper up and have a list in each one. Hang on....should I hust have 2 seperate lists, in which case I can have 2 divs within 1 div with an independent list in each one..... Surely there's an easier way??

Try this:

<div class="menu_wrapper">
<ul class="int_benefits">
<li>Full support & no joining fee</li>
<li>Training available</li>
<li>18 months claims experience</li>
<li>Excellent Communication</li>
<li>No back-end fees for unenforceability claims</li>
<li>Fair pricing structure & full refund policy </li>
<li>Customer-focused service</li>
<li>Simple process</li>
<li>Generous Commissions</li>
<li>We treat people properly</li>
</ul>
</div>


.menu_wrapper {margin:0 auto;position:relative;}
ul.int_benefits {list-style:disc;width:540px;}
.int_benefits li {width: 260px; float: left;padding:0 5px;}

Is that what you're looking for? The list is split into two columns by the css, but the list items read from left to right, not top to bottom, so you may need to play around with the order.

Did what you suggested and it worked. Totally didn't think of ul classes - dur!

 

Still have issue with the div though - this is what happens when I add a 10px bottom margin:

 

http://freerangefs.co.uk/images/screenshot2.gif

 

p.s. how do you post images on this forum?

Just add

overflow:auto;

to the containing div - that should work.

Try this:

<div class="menu_wrapper">
<ul class="int_benefits">
<li>Full support & no joining fee</li><li>Generous Commissions</li>
<li>We treat people properly</li>
</ul>
<li>Training available</li>
<li>18 months claims experience</li>
<li>Excellent Communication</li>
<li>No back-end fees for unenforceability claims</li>
<li>Fair pricing structure & full refund policy </li>
<li>Customer-focused service</li>
<li>Simple process</li>

</div>


.menu_wrapper {margin:0 auto;position:relative;}
ul.int_benefits {list-style:disc;width:540px;}
.int_benefits li {width: 260px; float: left;padding:0 5px;}

Is that what you're looking for? The list is split into two columns by the css, but the list items read from left to right, not top to bottom, so you may need to play around with the order.

 

Tried that and it looked fine in Dreamweaver but hasn't worked in 'real life' (no idea what the correct terminology is)

 

I'll keep tinkering. It's just a menu though and seeing as I need this site done for Monday I'm gonna have to move on soon!

 

EDIT: Scratch that. I had left a "}" out so the menu_wrapper {} wasn't being picked up. It's now in 2 columns.

Tried that and it looked fine in Dreamweaver but hasn't worked in 'real life' (no idea what the correct terminology is)

 

I'll keep tinkering. It's just a menu though and seeing as I need this site done for Monday I'm gonna have to move on soon!

What browser are you using?

 

[edit]

Just seen your edit

That slim box is now at the base of the div...What IS it?

What browser are you using?

 

[edit]

Just seen your edit

 

it works, but as there aren't 2 columns anymore, meaning that I can't designate different widths for each and have to divide the wrapper width of 540px equally it isn't working. Am going to go back to the 2 seperate ul classes....

 

Such a bloody farce for a list!

 

Cheers for the help

Sorted the margin issue out - I split the div into 2 seperate divs and put a seperate <ul> into each one. I then had to use a spacer class to clear the floats and the bottom-margin now works. Like you said [notbanksy], the floats had thrown everything, so when cleared it was fine.

Code wise, its better to put two <ul> tags in one div, and then float the ul's such as this:

 

<div>

<ul>
<li>.....</li>
<ul>

<ul>
<li>.....</li>
<ul>

</div>

Code wise, its better to put two <ul> tags in one div, and then float the ul's such as this:

 

<div>

<ul>
<li>.....</li>
<ul>

<ul>
<li>.....</li>
<ul>

</div>

 

Cheers - I'll re-visit it and take another look.