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.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2010
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Question position right with left margin?

    Hi there to everyone!

    What exactly I need is, for example, a div element to have right position, lets say about, 300px and maintain that position until it's left position reach 200px and stops there while resizing browser window!

    I tried with margins, padding, everything but no luck!

    Although I can achieve this with javascript, I would like to avoid javasript for positioning elements because of cross browser compatibility!

    Any help would be appreciated, thanks in advance!

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    You might be able to do it using CSS media queries that check the browser width.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New Coder
    Join Date
    Oct 2010
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts
    OK, I'm sorry if I not make my words clear enough!

    Maybe I can make myself more clearly with following example:

    Code:
    <html>
    <head>
    <style type="text/css">
    
    #second{
    background-color:yellow;
    width:150px;
    position:absolute;
    right:200px;
    }
    
    #first{
    margin-left:300px;
    }
    </style>
    </head>
    
    <body>
    <div id="first">
    <div id="second">This div needs to stop at 300px from left </div>
    </div>
    
    </body>
    
    </html>
    I need "second" div to stop on 300px from left while decrease browser window width.

    As you can see in example I was tried with margin-left but that is just not working!

    Thanks again for trying to help me!
    Last edited by bloody86; 06-02-2012 at 12:25 PM.

  • #4
    New Coder
    Join Date
    Nov 2010
    Location
    Virginia,USA
    Posts
    36
    Thanks
    1
    Thanked 7 Times in 7 Posts
    If you want your divs to decrease or increase with different screen widths you should use %'s instead of exact pixel width. This will help ensure that your div's wont be pushed down in a smaller screen

    Also you should try floating your div if your having issues with them sitting properly. ie: float:left;
    Last edited by badwolf; 06-02-2012 at 01:44 PM.

  • #5
    New Coder
    Join Date
    Oct 2010
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Why is so hard to understand what i want to accomplish!?

    I guess I will have to do it with javascript!

    Float property is just not helping here!
    Last edited by bloody86; 06-03-2012 at 03:58 PM.


  •  

    Posting Permissions

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