Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS not able to align div properly

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #38733
    alicia
    Participant

    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.






    Untitled Document





    mailing list box

    contact


    Content








    #105200
    SgtLegend
    Member

    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;
    }
    #105201
    alicia
    Participant

    don’t see any difference =(

    #105202
    Paulie_D
    Member

    Deleted…copy

    #105204
    Paulie_D
    Member

    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/

    #105205
    alicia
    Participant

    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

    #105208
    alicia
    Participant

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

    #105209
    saeid5979
    Member

    how about IE8?

    asrepooya

    #105210
    Paulie_D
    Member

    @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/

    #105216
    alicia
    Participant

    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.

    #105217
    Paulie_D
    Member

    @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..

    #105222
    alicia
    Participant

    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

    #105223
    alicia
    Participant

    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?

    #105224
    alicia
    Participant

    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?

    #105227
    Paulie_D
    Member

    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.

Viewing 15 posts - 1 through 15 (of 19 total)
  • The forum ‘CSS’ is closed to new topics and replies.