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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    position elements on browser minimize

    Hello All,
    I am a newbie to the world of html , css and web development. I am trying to develop a simple web page with just 3 input boxes. When the browser is minimized , the 3 input boxes should be placed vertically 1 below the other and when it is maximized, it should be placed horizontally 1 after the other.

    Can someone please put me on the right direction and give some tips.

  • #2
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    Minimized? Do you mean restored (minimized is the - and restore is the two boxes)? You can use the css float property and the content should drop below each other (not float) if there's not enough room to float (when the page is restored).

    HTML
    Code:
    <input type="text" class="input" />
    <input type="text" class="input" />
    <input type="text" class="input" />
    CSS
    Code:
    .input {float: right;}
    "Yeah science!"
    Online Science Tools

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello djh101,
    Thanks for the prompt reply.much appreciated. Just couple of questions.
    - How are we actually capturing the restore event.
    - With your implementation , the thing what is happening is irrespective of the restore all the text is positioned on to the left and all the input boxes are positioned to the right as below.
    text1 text2 text2 InputBox1 InputBox2 InputBox3
    Can you please let me know whats happening ?

  • #4
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    Oh, I forgot about text. Right now each input box is in the class "input" which floats to the right. Float basically means that the object will go as far in that direction as it can, so if three objects are floating to the right, the first one will go all the way to the right, the second all the way to the edge of the first, and the third, assuming it doesn't fit, will go all the way to the right below those two elements.

    I've never actually heard of anyone doing what you're trying to do, but you could instead place each input form and it's respective text into another element (a <div> or a <span> or a <fieldset> if you are using a form), giving the container element a class and floating that rather than the individual input boxes.
    "Yeah science!"
    Online Science Tools

  • #5
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
    <form class="floatleft">
    <label for="box1" class="label">Box Number 1</label>
    <input type="text" width="200px" id="box1">
    <label for="box2" class="label">Box Number 2</label>
    <input type="text" width="200px" id="box2">
    <label for="box3" class="label">Box Number 3</label>
    <input type="text" width="200px" id="box3">
    </form>
    </body>
    </html>
    Code:
    .floatleft {float: left;}
    #box1 {float: inherit;}
    #box2 {float: inherit;}
    #box3 {float: inherit;}
    .label  {float: inherit;}
    ^ probably the best method. Here you are floating your form to the left. Your labels and boxes inside will now automatically float to the left. If you want the labels on top, place each label and it's corresponding input inside a div with a class that floats either left or right (whichever you want) or inherit.
    "Yeah science!"
    Online Science Tools

  • #6
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I am getting closer but still far away .
    Let me tell you how the page is getting rendered currently.
    When I am using the above suggested css with div in html and resizing(minimize or maximize) the browser, the elements are rendered as
    TxtBx1:inpt1
    TxtBx2:inpt2
    TxtBx3:inpt3
    What I am actually looking forward to implement is when I resize(minimize) the browser, it should be rendered as above but when I resize(maximize), the elements should be rendered as
    TxtBx1:inpt1 TxtBx2:inpt2 TxtBx3:inpt3.
    I hope I have put across the requirement clearly.Can you Please advise ?

  • #7
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    It worked fine when I did it, exactly how you wanted. Make sure you don't have anything in your css causing your forms, labels, or inputs to clear or anything. Also, what browser are you using?
    "Yeah science!"
    Online Science Tools

  • #8
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have used exactly the same css and html code what you posted. For browser version ,I have tried it on IE 6 and chrome 5.0. but still the same effect.
    I am going nuts with this simple issue .

  • #9
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    Inherit might just not be working properly, you could try changing it to float: left; instead of float: inherit; Also, make sure the stylesheet and the html file are saved in the same folder and you are linking to the right stylesheet with the right name.
    "Yeah science!"
    Online Science Tools

  • #10
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Tried that as well but with no success. I am wondering shouldnt we actually capture the browser resize event "onresize" and put the logic of changing the css for html elements dynamically ?
    Can you please advise ?

  • #11
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    It's not changing on resize, what it's doing is floating the content. Basically, if there is room they will float next to each other, otherwise they will go directly to the next row. Even without any CSS the items should remain next to each other since there are no line breaks or anything else causing them to drop to the next row. Do you think you could maybe upload it somewhere so I can see for myself?
    "Yeah science!"
    Online Science Tools

  • #12
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    djh101,
    Guess what, It's working fine . I had added a common div for all the elements which was the cause of the problem . Everything else was fine as per your CSS.
    Thanks a ton for your help mate and answering all my basic questions. You Rock !!!

  • #13
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    616
    Thanks
    48
    Thanked 65 Times in 65 Posts
    Anytime. I still want to know why it wasn't working before, that, though. I've copied the code over 3 times from here, opened it, and uploaded it and opened off my site rather than my computer and every time it worked fine. But I guess as long as it's working now, it doesn't matter. Good luck with your site.
    "Yeah science!"
    Online Science Tools


  •  

    Posting Permissions

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