div re sizing problem

[yaragallamurali]

Hi the following is my code:-

<div style="height:50px;background:#F75D59;">           <div style="position:relative;font:bold 20px arial;color:white;float:left;left:50px">GOOGLE </div>           <div style="position:relative;float:left;left:200px;">                    <input type="text";text size="50px">                    <input type="button" title="search">            </div>            <div style="position:relative;float:left;left:500px;color:white"> UUUUUUUU </div>            <div style="position:relative;float:left;left:500px;">                     <input type="button" color="#ff0000"value="1">                     <input type="button" button size="10px" value="+share">                      <img src="a.png"height="20px";width="20px">            </div></div>

The problem with the above code is when the browser gets re sized the parent div, I mean the top most div is getting re sized according to the browsers width. But the child div's are not getting re positioned accordingly. so when the browser is re sized the page looks awkward. So how to resolve this?

[dsonesuk]

You should never really use position, unless its is really, really necessary and only if you can't achieve to same result using margins, and padding. by using position: relative; with left: 500px, the width of element becomes equal to the total width of the parent element it occupies + 500px; To fix the resizing problem you should use a min-width: on the outer container, which would prevent the outer container width becoming too small that it would cause its child elements to stack.

[yaragallamurali]

Thank you for replying. Without using "position:relative" it is not possible to move the div from left or top. to reduce its width we can use "float". The final answer about solving re sizing is nice. Thanks for that.