not able to align div properly

[alicia]

Hi,

Can some guru help me to check what have I done incorrectly in this simple css layout? After I adjusted the div on top before the content div, the content and footer div is all aligned to far right which I never adjusted. I tried to move it back inside the container and align the content to left but failed. I am wondering how come the div from content to footer will move to such position.

Besides, can you give me an idea what I have done on the top positioning is correct or not. I can get the positioning of the div i want on top before the content but i am wondering why negative value is required to make it fit into the container.

Please advise and thanks.

mailing list box


contact


Main Nav


Content




Footer

[SgtLegend]

Whenever you float elements you need to clear any children that follow otherwise the element stack starts to mess up like in your example, see the below code which will fix your issue.

#content {

background: green;

clear: both;

position: relative;

width: 960px;

}

[alicia]

don’t see any difference =(

[Paulie_D]

Deleted…copy

[Paulie_D]

You’re probably better off wrapping some of those elements in a container of some kind…’header ‘ seems appropriate.

Remove all that unnecessary positioning and go from there. Here ==> http://jsfiddle.net/Paulie_D/bMhhn/

[alicia]

thanks.. but after removing the positioning, how can i move the mainnav box higher?
it looks like i need to change to position relative and the adjust the top position to get this done which was not recommended ?
please advise..thanks

[alicia]

i was told that header tag wont work with IE except IE9 ? so the header tag is not recommended right?

[saeid5979]

how about IE8?

asrepooya

[Paulie_D]

@alicia If you use the HTML5 shim (sometimes called the shiv) (google it) you can use the header tag in IE9 & IE8. Otherwise a div would do.

As for the main nav, you’re still thinking about positioning and in most cases it’s not necessary. You just have to think about the order of your elements and how they are floated.

Here: http://jsfiddle.net/Paulie_D/bMhhn/2/

[alicia]

thanks pauline, so all I have to do is add the float to left and if i want to adjust the position maybe a little to left or bottom, i should use margin instead ?

besides, may i know how can I make the footer div becomes 100% of the screen width? I tried to put the div out of the page container id div but still thre is some gap on left and right.. it only removes the gap if I put the footer width like 2000px or bigger than my screen size… any better solution for this? thanks.

[Paulie_D]

@alicia …That’s Paulie…but no problem.

At the moment the nav ‘box’ just floats up until it hits something but sure, you can mess with the margins to get it exactly where you want.

As for the footer…taking it out of the page wrap div will automagically make it 100% width of the browser window. Obviously I can’t speak for what might be happening in your monitor or with your current code. http://jsfiddle.net/Paulie_D/bMhhn/4/

Just in case, you can always set the width to 100% if you feel the need..

[alicia]

thank you very much for you guidance again.. i tried to remove the gap between the header div and the content div output but i couldn’t figure out anything i can adjust except using positioning again. Can you please give me an idea how i should adjust the gap in the correct way.. thanks

[alicia]

another question, the footer still have gap on both sides even i put 100% width for the footer.. is it the only way i can fix this is adding an extra wide width into the footer class?

[alicia]

i am sorry, another question,, if i want to move the mailinglist box higher than the left image and contact div, is it i have to use position relative and adjust the top position?

[Paulie_D]

Re: Q1. The height of the header is determined by (in this case) the height of the ‘logo’ element which is set to 100px.

If you remove that…the header will ‘collapse’ to the height of the various elements inside. Occasionally, the browser may sneak a little extra padding in there so it’s often worth setting the max-height of your logo (in this case), to the height of your logo image.

http://jsfiddle.net/Paulie_D/bMhhn/8/

As a general rule of thumb (I beleive) you should avoid positioning unless there is a very special effect you are trying to achieve (perhaps an overlap or a box that moves with the scrolling of the browser). Using it to ‘fix’ problems with your layout or css is not a good idea and just means that you haven’t coded what you have properly.

You’ll get there…hang in. :)

I’ll get to the others in a while.

[Author]

Posts