Member Avatar for yaragalla_mural

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
  • 163 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by TonyG_cyprus
Member Avatar for yaragalla_mural

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?

Member Avatar for paulkd

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>
Member Avatar for Violet_82

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 because: addendum
Member Avatar for TonyG_cyprus

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.