Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 19
  1. #1
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts

    RESOLVED Div Is Out of Place

    Div appears out of place on all browsers.

    In FF 3.5.4, when I click on the "Free Shipping" button at the bottom of the .sidebar div, the .content moves out of place and drops down below the sidebar but above the .footer div...

    In IE8, the page loads with the .content div already out of place and appears below the .sidebar div and above the .footer div...

    How can I fix this? Is there something wrong with the widths of the .sidebar and .content divs? I calculated widths including borders and it looks like everything adds up...

    http://www.americanchic.net/help

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    In FF, it's the default outline on :active that seems to be causing the problem.
    Try adding:

    Code:
    a:active, a:focus{outline:none}
    to your css.

    I see your problem in IE8 although it's OK in IE7 (fantastic...). The float drop is caused by the scrollbar which appears in IE8, coming from overflow:auto on #contentwrapper. I'm not sure you need this - have a try with removing it.

    Div appears out of place on all browsers.
    Not sure what you mean by this...

  • Users who have thanked SB65 for this post:

    jihanemo (11-04-2009)

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello jihanemo,
    What happens if you don't float .content?
    Like this -
    Code:
    div.sidebar {
    
    width: 154px;  
    float: left;
    border-right-style: solid;
    border-right-width: 1px;
    border-right-color: #999999;
    padding: 0;
    margin: 0;
    
    }
    
     div.content {
    
    padding: 0;
    margin: 0 0 0 155px;
    
    }
    
    
    div.footer {
    
    overflow: auto;
    clear: both;
    .contentwrapper is containing floats that do not clear if you remove overflow:auto; If SB65's suggestion works for you, you could try clearing them with another method. See this page for a different approach to clearing floats.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    jihanemo (11-04-2009)

  • #4
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Excellent. It's working like a charm now. I used a mixture of both of your suggestions...

    I removed overflow:auto from div contentwrapper...

    ...and I removed the float from the div wrapper and added 155px to left margin.

    Thanks, guys!

    When I said Div appears out of place on all browsers. , I meant that it appeared out of place in all major browsers (FF, Chrome, IE, AOL... those are the only ones that I test. Not sure if I'm missing any. Oooo, wait, I should probably download Safari...).

  • #5
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Okay... I thought I was in the clear. Now the div.contentwrapper is doing something funny. It seems as if the div.contentwrapper is overlapping the div.sidebar and the div.content. In the middle of the sidebar, underneath the "Safe and Secure" image and directly underneath the "Our Privacy Policy" link, you'll see a grey line - that belongs to the bottom border of the div.contentwrapper... The contentwrapper should be stretch the entire height of the div.sidebar and div.content (of course, because sidebar and content are supposed to be contained within contentwrapper)... I don't know what went wrong...

  • #6
    Regular Coder
    Join Date
    Dec 2006
    Location
    In the wilderness
    Posts
    106
    Thanks
    9
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by jihanemo View Post
    Oooo, wait, I should probably download Safari...).
    Theres also Opera
    Last edited by karlosio; 11-05-2009 at 02:54 AM.
    "The advantage of computers is that they do exactly what you tell them to do. The disadvantage of computers, on the other hand, is that they do exactly what you tell them to do."

    Excellent resource for learning PHP here

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    The contentwrapper should be stretch the entire height of the div.sidebar and div.content (of course, because sidebar and content are supposed to be contained within contentwrapper)... I don't know what went wrong...
    Ok, you do need to clear the floats on .contentwrapper then. Just had a play around with IE8....

    If you reinstate overflow:auto on .contwrapper, and additionally add

    Code:
    .sidebar img{display:block}
    I think that fixes IE8.
    Last edited by SB65; 11-05-2009 at 08:31 AM.

  • #8
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thank you! That sort of fixes it. But scroll bars appear in FF when I click on the bottom sidebar "free shipping" button. I'm beginning to wonder if I set this up all wrong.

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    That's FF applying its default outline on :active links. Try adding:

    Code:
    a:active, a:focus{outline:none}

  • #10
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thank you!

    Somehow, after I added that code, the footer popped into the bottom table (cscontent) within the div.content:

    http://www.americanchic.net/help

    ??

  • #11
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,862
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Do you have any reason to use tables for your lay-outing? I'd recommend you to remove them and replace with suitable (semantic) elements, which would resolve a lot of issues.

    The total width given to div.content is just 694px, where as those 6 images in the footer of right column has a total width > 800px.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I think it's that second table you've added -.cscontent - that's causing your issue, not that css change. As abduraooft points out, it's too wide to fit in your layout.

  • #13
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by abduraooft View Post
    Do you have any reason to use tables for your lay-outing? I'd recommend you to remove them and replace with suitable (semantic) elements, which would resolve a lot of issues.

    The total width given to div.content is just 694px, where as those 6 images in the footer of right column has a total width > 800px.
    I'm using a table within the div.content because it's the best way to section off those top for customer service menus. I planned on using the tables anyway to section off area for the actual product category pages and individual product pages. What are semantic elements? I thought I was using these tables appropriately. I've used divs to section off my header, content area, sidebar, and footer. Is it a good idea to remove the table from the div.content entirely? I've removed the 2nd table because it really isn't necessary. But should I really remove it altogether?

    The footer with those 6 images (and everything below) actually shouldn't be inside that table (which is inside the div.content) at all. It should be laying under the div.contentwrapper entirely. I'm trying to figure out how it popped up into the content div...

    http://americanchic.net/help.html

  • #14
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    I'd guess you're missing a closing tag somewhere in your markup. If you have a look at your validation errors you might find the problem.

  • #15
    Regular Coder
    Join Date
    Oct 2008
    Posts
    185
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Of course. Thank you. I'll do that. Someone described the validator as a sort of spell-check... I keep forgetting.


    Okay - 36 errors... I'll look through them now. Thank you for the tip.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •