Results 1 to 3 of 3

Thread: Need help getting divs to move according to another div (mobile issue)

  1. #1
    Join Date
    Oct 2010
    Posts
    75
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default Need help getting divs to move according to another div (mobile issue)

    this is a mobile issue, its fine on desktop
    so im trying to use formerly written code ( a template ) and get divs to move up and down depending on where the other divs before and after it are
    my issue is that, even if i align it right (for example, using top:100px, etc), if content is added to a div, it will overlap the div below it
    rather than push the div below it, down further.

    ive tried a lot so far, but am not good with coding so am failing horribly. (zindex, adding a uh ":after" to the css class codes, etc)

    i used a random code (and other codes/methods) to make my site mobile friendly
    alot of it lines up pretty well, one after another, after another
    but some of it overlaps and i have no idea why
    how do i force it to stop overlapping?
    why do some of my divs overlap in mobile and some are perfectly fine?

    thanks so much

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    3,033
    Thanks
    25
    Thanked 599 Times in 575 Posts
    Blog Entries
    40

    Default

    We can't troubleshoot something we can't see. Please provide a link that demonstrates the problem.

    Thinking out loud, be aware that "top" and "margin-top" behave differently. "Top" will visually move the block-level element that it is applied to, but not *actually* move it, so will have no effect on surrounding elements (probably the cause of your overlap on the div below). "Margin-top" will move block-level elements within the document flow - it will push other elements out of the way - although vertical margins that are in contact with each other will collapse, only taking the effect of the greater of the 2 margins. More info here https://css-tricks.com/what-you-shou...psing-margins/

    If you need more help, please provide a link.
    Focus on Function Web Design
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps

  3. #3
    Join Date
    Oct 2010
    Posts
    75
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    sorry about that
    top-margin started to help (instead of just top) but i can NOT get the utube and better business borough images to stop overlapping the main content
    thank you!!!
    http://aciddr0p.net/help/test/

    Quote Originally Posted by Beverleyh View Post
    We can't troubleshoot something we can't see. Please provide a link that demonstrates the problem.

    Thinking out loud, be aware that "top" and "margin-top" behave differently. "Top" will visually move the block-level element that it is applied to, but not *actually* move it, so will have no effect on surrounding elements (probably the cause of your overlap on the div below). "Margin-top" will move block-level elements within the document flow - it will push other elements out of the way - although vertical margins that are in contact with each other will collapse, only taking the effect of the greater of the 2 margins. More info here https://css-tricks.com/what-you-shou...psing-margins/

    If you need more help, please provide a link.

Similar Threads

  1. SmoothMenu With Fixed Divs on Mobile Devices
    By WycheGnome in forum Dynamic Drive scripts help
    Replies: 15
    Last Post: 09-25-2013, 06:30 AM
  2. Resolved Animated Collapsible DIVs on Mobile Phones
    By FranklinF in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 11-21-2012, 09:22 PM
  3. Onclick move divs?
    By pxlcreations in forum JavaScript
    Replies: 5
    Last Post: 04-19-2010, 04:53 PM
  4. DIVs like to move
    By chopper in forum JavaScript
    Replies: 0
    Last Post: 04-05-2008, 12:20 PM
  5. Replies: 1
    Last Post: 04-23-2006, 05:40 AM

Bookmarks

Posting Permissions

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