I am sorry I am back with more questions! Please help me with this problem. I would like to place a small gallery on my sticky footer this page… http://www.rajeevthomas.com/news.php… but it adds so much space below it. I tried removing the top padding of the footer but it is not helping… is this happening because I used ul and il ? How can I pull my search form and footnote back up and avoid that gap? Any help is appreciated… I hope I am not being too annoying with all the questions I have… Thank you for any help…
Paul… that was it!! That was what I was looking for … BUT there is a major shift to the right on IE6… I thought it is the width of .newpics messing with the width of my footer… but I don’t think that’s what’s causing it.
In the future if I need to move around this gallery in this footer, should I just use
ul.newpics{margin:0 0 20px}
or relative positioning and use top, left, etc,.?
In the future if I need to move around this gallery in this footer, should I just use or relative positioning and use top, left, etc,.?
Relative positioning doesn’t move anything physically and is only used in special occasions where you want to maintain the flow of the page exactly as it is but make an element appear somewhere else. It however still takes part in the flow as if it were in its original position which can appear to cause holes on the page where the element should have been. Most times you would use margins instead.
Transparent is the default and doesn’t need to be specified and basically means no background color for that element. i.e. it will be transparent and what ever else is beneath the div will shine through. This is the default and only needs to be specified if over-ruling something that went before.
Paul…your solutions fixes everything… Thank you Thank you!! text-align: left did the magic…
About margins…to understand it better …let me ask you … since it is confusing to me… when we use margins I noticed that it changes the height of the page ( margin-bottom to bring up the small gallery closer to the “Latest Images” headline… and I made changes in
ul.newpics{margin:0px 0px 0px 0px }
) and it looks like margin-bottom pushes my footnote down. Do we make changes to compensate for the changes margin does to a page? Or is it inevitable to have height, width of the page changes when you move around elements in them?
At a simple level margins push elements away from each other and effectively form part of the whole box that the element occupies. This is what we call controlling the flow and should one element be removed the other elements will fill the void.
In a logical structure the margins hold each element away from each other and each element can follow naturally.
It’s only when you have set heights to work in that you have to take care as the margins may push out of the box or make the element bigger than the space available. That’s the reason that in most cases you don’t want to set height on containers when you don’t have to. In some cases where the height is explicit (such as in a sticky footer) the you have to work within this height and just be careful
You can use margins to push elements away from each other but you can also use padding to make room inside the element itself. Most layouts are a mixture of each depending on situation.
( margin-bottom to bring up the small gallery closer to the “Latest Images” headline…
No margin bottom pushes the element underneath away from the element with the margin. You would need to use negative margins to drag an element upwards.
Note that there are special rules about margins and some elements (lie floats) and collapsing margins (see the entry in the Sitepoint reference on collapsing margins for more info).
Thank you Paul for explaining in detail… that’s probably the best explanations of positioning in simple terms ever where I could I understand everything Your patience is incredible…