Home/ Questions/Q 7743737
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T09:36:41+00:00

Could someone take a look at the following link of a work in progress

  • 0

Could someone take a look at the following link of a work in progress test page for my new website – http://goo.gl/YwGiB

I’m new to CSS, and I have come across some issues that I can’t figure out without some expert help. Could someone answer me three questions and possibly an explanation of how to amend it?

1) Why does my middle column by default split itself into sections, whereas my right hand column is pretty much the same but does not have the divisions? What could I do to cause that to default in the right hand column?

2) I am looking to have a box in the right hand column running parallel to the first box titled ‘news’ in the centre column, and then a second running parallel underneath this (with the box titled ‘blog’ but it will have an irregular length. What would be the best way to do this? Would this be a case for using the standard positioning commands to shift them into place or is there a better way?

3) I have stripped the padding and margins from my h1-h3 tags (specifically the h2 tag) yet there still appears to be space above the lettering. It is more pronounced when using the font MerceariaAntique which is going to be the final font, but unfortunately I am unable to amend my html file to show this right now. I am attempting to resolve it by adjusting the line-height but I am not getting anything consistent. Is there anything else I can do other than make line-height and margin adjustments?

Thanks in advance

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Firstly, in your markup, you have divided your sections using the <div> element, which is completely acceptable, however you have used the same ID to identify each of them. This is what classes are for. IDs should be unique and only used once on a page, classes can be used to apply the same styles to multiple elements.

    So this:

    <div id="newsitem">

    should be this:

    <div class="newsitem">

    Answers to your actual questions now!

    1. By default, paragraph and headings have paddings and margins set. The reason your sections have spaces is down the margin on the paragraph tag. Removing this removes the space, but also brings the text together with the next heading. You can over come this by giving the <p> tags 0 margin and giving them padding, or giving padding to the section container instead.

    2. If you want the boxes in the right hand column to line up with the ones in the middle column, you’ll have to change how your layout works so that you have rows rather than columns I think. That would make it easier to line them up.

      From your description, you should then have the following layout:

      middle column | right column
      middle column | right column
      middle column

      To maintain the background colour of the centre column, you could apply the background-color property to the class .centre or to be more specific .column.centre (this type of CSS selector might not work in IE6 though).

    3. The issue with the H2 is down to line-height, each font may have a different line-height so you will have to play with the value until you get it right. If you find you’re getting the top position right, but text underneath is getting closer or overlapping, give the H2 a padding-bottom value.

    • 0