I wondered whether someone can please advise what I have done wrong in my CSS. I'm sure it's the floats that aren't used correctly or perhaps the display inline. Not sure.

Here is the development site and one of the pages I am talking about:
http://ewh.demo.workingwebsolutions.co.nz/services/worksite-assessment.html

and the CSS pertaining to the top right content section block is here: It is the right column I am having an issue with and I have bolded the CSS where I think perhaps the css error is. Thanks for your help in advance.

4 answers

Hey there fellow Kiwi - let's tackle the first issue which is the columns wrapping on a new line.

Remove the float: left from the .bottom-content-block class or set a width to accomodate all the floated elements inside it. Also be cautious when using static dimensions(px) for width combined with relative (em) dimensions for the margins. Users that increase their font size might affect your margins, thus having a column wrap on a new line. Also float: left is not meant to work on inline elements so you need display: block or display: inline-block

Hi Marko
Thanks for the assistance with that. It was definitely the display block that was affecting the bullet points from aligning correctly to the right.
Also, good to know about the width px and margin ems. I have set the widths now to %. Hope this is OK to do this.

Also, one question re Doctype (and probably one that I should read somewhere) - how does one display one's photo?