0

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"> mythili mydhili </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?

4
Contributors
4
Replies
18
Views
4 Years
Discussion Span
Last Post by TonyG_cyprus
0

I have read some answer in the other thread. It looks like without fixed width of the parent div i think this cannot be solved. I mean width has to be specified for the parent div, if not there will be problem always. Is it?

0

Your code didn't resize at all for me.

<div style="height:50px;background:#F75D59;">
    <div style="float:left;">
        <span style="color:white;font:bold 20px arial;left:50px">GOOGLE </span>
        <input type="text";text size="50px">
        <input type="button" value="search">
    </div>
    <div style="float:right;">
        <span style="color:white"> mythili mydhili </span>
        <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 style="clear:both")></div>
</div>
1

To be honest with you @yaragalla_mural I don't like the way you have positioned the elements in your code, there is no need to position elements relatively if you can achieve pretty much the same effect with padding for the sake of argument.
Check this code out and adjust the padding to your liking (needless to say all those styles need to go in a proper external CSS, I assume you used inline styles just for demonstration purposes):

 <!DOCTYPE html>
    <html>
        <head>   </head>
        <body>
        <div style="height:50px;background:#F75D59;border:1px solid yellow">
            <div style="font:bold 20px arial;color:white;float:left;padding-left:50px">GOOGLE 
            </div>
                <div style="float:left;padding-left:40px">
                    <input type="text";text size="50px">
                    <input type="button" title="search">
                </div>
            <div style="float:left;color:white; padding-left:150px"> mythili mydhili
            </div>
            <div style="float:right">
                <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>



    </body>
</html>

Forgot to mention: If you're trying to achieve some sort of responsive website, you need to rethink your strategy completely and give a percentage based width to your divs

Edited by Violet_82: addendum

0

Like violet 82 says, if you have set a fixed width, padding, margin etc to your child divs, that will always remain the same when the browser size is changed. You must use percentages to be truly responsive.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.