4 Replies Latest reply: Apr 26, 2012 3:41 AM by osgood_ RSS

    Div Problem

    manojb05 Community Member

      Dear All,

      I am try to place a some content over the picture bottom strip of image (blue area) how can i do. I am try to do but gap is came in please help thisout?

      WEB LINK

        • 1. Re: Div Problem
          mahendra rajeshirke Community Member

          Try to change your css as follow:

           

           

          #div1 {

           

               height: 124px;

              position: relative;

              width: 960px;


          }

           

          #div1a, #div1b, #div1c {

              position: absolute;

              top: 46px;

          }

          #div1a {

              height: 15px;

              left: 115px;

              width: 120px;

          }

          #div1b {

              height: 15px;

              left: 449px;

              width: 120px;

          }

          #div1c {

              height: 15px;

              left: 743px;

              width: 200px;

          }

          Now #div1 has position:relative, that means other three div relate to this parent div so the content doesnt go outside of the container div

          • 2. Re: Div Problem
            osgood_ MVP

            Not the best way of achieving this manoj (see code below)

             

            Personally I would insert each image in it's own floated <div> and use the blue bottom curve image as a background to each <div>. That way if the text spread to two lines the blue curve would move down with it.

             

             

            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

            <html xmlns="http://www.w3.org/1999/xhtml">

            <head>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

            <title>Untitled Document</title>

            <link href="untitled.css" rel="stylesheet" type="text/css" />

            <style>

            #div1 {

                height: 124px;

                width: 960px;

                position: relative;

            }

            #div1a {

                height: 15px;

                width: 120px;

                float: left;

                margin-left: 100px;

            }

            #div1b {

                height: 15px;

                width: 120px;

                float: left;

                margin-left: 200px;

            }

            #div1c {

                height: 15px;

                width: 200px;

                float: left;

                margin-left: 200px;

            }

            #wrapper {

                position: absolute;

                top: 105px;

            }

            </style>

            </head>

             

            <body>

            <table width="960" border="0" align="center" cellpadding="0" cellspacing="0">

              <tr>

                <td><div id="div1"><img src="corporate-copy.jpg" alt="" width="960" height="124" border="0" />

                <div id="wrapper">

                <div id="div1a">Content One </div>

            <div id="div1b">Content Two</div>

            <div id="div1c">Content Three</div>

                     </div>

                </div></td>

              </tr>

            </table>

            </body>

            </html>

            • 3. Re: Div Problem
              manojb05 Community Member

              thnaks MR & OS.

              OS its working fine, can i taken any precuation for IE, Firefox, Safari (alignment things) because after completion of web i am apply language TRANSLATION different language taken different type of spacing.

              • 4. Re: Div Problem
                osgood_ MVP

                manojb05 wrote:

                 

                thnaks MR & OS.

                OS its working fine, can i taken any precuation for IE, Firefox, Safari (alignment things) because after completion of web i am apply language TRANSLATION different language taken different type of spacing.

                 

                Only the alternative method which I described above will ensure that the text remains within the blue area below the image.

                 

                The way youre approaching it now is a bit hit and miss and reliant on luck