gap between footer and contentwrapper that doesnt go away

Question

I am working on the following website http://bestofdesigns.be/studioregenbogen/index.html. Can somebody please look at the css and tell me why the footer is not attached to the content and why there is a gap between the menu and the contentwrapper? I have looked at this for 2 days and cannot seem to find what goes wrong.

Thanks,

Ben

I am not the worlds greatest webdeveloper so hints on structure and designs mistakes are also welcome. — benst, Sep 10 '12 at 07:45
Ok hint: Apply CSS reset rules before you start designing your site. A decent reset will give you a completely blank canvas with no elements exhibiting built in rules such as the ones described in the answers below. (http://meyerweb.com/eric/tools/css/reset/index.html) — David Barker, Sep 10 '12 at 07:51
A use full thing could be to reset the standard browser settings that can be done by making a star rule like *{your reset css here} — Simon Dragsbæk, Sep 10 '12 at 07:53

score 2 · Accepted Answer · answered Sep 10 '12 at 07:49

2

#footer p {
padding-top: 5px;
margin: 0;
}

answered Sep 10 '12 at 07:49

Simon Dragsbæk

2,367
3
30
53

Fabrizio Calderan · Answer 2 · 2012-09-10T08:01:27.677

1

why there is a gap between the menu and the contentwrapper?

The gap is due to the margin applied by default by each browser to the list <ul> element and the title <h1>.

Remove it or adjust it

Screenshot

enter image description here

edited Sep 10 '12 at 08:01

answered Sep 10 '12 at 07:47

Fabrizio Calderan

120,726
26
164
177

could you please tell me of which div exactly i need to remove the margin? – benst Sep 10 '12 at 07:47
see the screenshots attached. – Fabrizio Calderan Sep 10 '12 at 07:50

score 0 · Answer 3 · answered Sep 10 '12 at 07:49

0

hi now give to #footer overflow:hidden and give to your footer p tagmargin :0;`

as like this

        #footer{
        overflow:hidden;
}

    #footer p{
    margin:0;
    }

answered Sep 10 '12 at 07:49

Rohit Azad Malik

31,410
17
69
97

score 0 · Answer 4 · answered Sep 10 '12 at 08:20

I am suggesting one more thing did you ever opened your design using firebug and checked how your middle content looks. It's bad design. Use div tags extensively don't use padding much.In the body style put text-align:justify property.

Your error is in

#footer p {
 padding-top: 5px;
 margin: 0;
}

Divide the content wrapper class into two vertical div classes and then divide the below vertical classes into another two vertical classes. Divide the first vertical tag into two horizontal div classes. In that put your image in first horizontal tag and in second your paragraph. In the bottom vertical class your second paragraph.

gap between footer and contentwrapper that doesnt go away

4 Answers4