Please help me design CSS layout for this


Attached is a jpg for the design that I want to make HTML and CSS for. I am a newbie to CSS world completely though I’m starting to read from Can anyone help me with designing this?

Any help appreciated.


Welcome to the SitePoint forums.

You will need to learn how to frame the page using HTML and then style the page using CSS. There are MANY resources on the web that teach these basics. W3Schools offers a helpful, cursory description of all HTML tags and CSS properties. SitePoint references offer a bit more detail about these devices. Actually reading a book or taking a course is a faster road to learning that trial-and-error, though. I recommend you invest a bit of your time in taking a course.

Most folks here are glad to help you resolve specific problems that you encounter while you develop your skills.


Welcome to Sitepoint forums.

As Ronpat said above we would like you to make a start yourself and then we can see what level you are at and then provide the necessary pointers. We don’t usually code a layout from scratch as that is not the way that you will learn.:slight_smile:

Looking at your image it is basically 2 columns so you will first need to create a div to hold both columns and set it to the appropriate width. Then inside that div you will floats two more divs (float:left) using the correct width for each. That will then allow you to stack content into each column as required. You will then need to read up on clearing and containing floats (see css faq) to make sure that the floats stay within their parent container.

Looking at column 1 you have a sequence of icons and you would most likely use a list structure to hold them because they are a list of items. Just float each list item left to make it go horizontal.

The rest of the column is just static text and elements that can be positioned with margins as required.

That’s a start anyway :slight_smile: