Possitioning a list

HTML & CSS
1

I want to position the list here http://muslimahwebdesign.co.uk so that it is to the left like in the pick below. How is it properly done?

2

Good morning,

You need to put the div with a class of service-icon INSIDE the div with a class of service-content (the div containing the list and heading etc).

That will make your list align underneath the image like in the image above.

Please note, you may have to assign some values to the h2 and service-icon div to align them correctly at the top. You could float the service-icon div left and set a width on the h2 and float it right. OR you can keep the width on the h2 and position the service-icon div absolutely (which then means you would have to position your list relatively, manipulating the bottom and left properties).

Hope this helps,

Kind regards

3

Hi,

Without changing the html you could do the following.



.service-content {
overflow:visible;
margin-left:80px;
}
ul.list_arrow{margin-left:-80px}

You were using overflow:hidden to create a rectangular block to the side of that floated icon but that means you can’t drag anything back out of that block (because the overflow is hidden). If you remove the overflow:hidden and then a apply a margin-left to the content then it creates the same effect you had before except that you are then free to drag the list back into position with a negative margin.

However as mentioned above you could change the html to get the same effect by moving the list outside of the overflow container…

4

that’s this was a learner for me. The css was my best option I think but having tried it I think it looks better as it is. That being said I have learnt from these two answers

Thanks for your help