Jump to content

div re sizing problem


yaragallamurali
 Share

Recommended Posts

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...