position elements on browser minimize

heman · 08-05-2010, 09:28 AM

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.

djh101 · 08-05-2010, 09:39 AM

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;}

heman · 08-05-2010, 09:59 AM

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 ?

djh101 · 08-05-2010, 10:07 AM

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.

djh101 · 08-05-2010, 10:23 AM

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.

heman · 08-05-2010, 11:55 AM

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 ?

djh101 · 08-05-2010, 08:19 PM

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?

heman · 08-06-2010, 01:51 AM

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

.

djh101 · 08-06-2010, 04:24 AM

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.

heman · 08-06-2010, 05:09 AM

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 ?

djh101 · 08-06-2010, 05:31 AM

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?

heman · 08-06-2010, 07:14 AM

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 !!!

djh101 · 08-06-2010, 07:41 AM

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.