Question

I have this html code:

 <div id="maincontent">

        <div id="mainbackground"><img src="images/mainbackground.png" border="0" alt=""></div>
        <div id="illustration"><img src="images/illustration.png" border="0" alt="">

            <div id="text1" class="sloganfont">Mahmood</div>

        </div>

    </div>

css for these divs are:

 #maincontent
 {
background:#CFCFCF;
width:100%;
height:1200px;
position:relative;
text-align:center;
margin:0 auto;
 }
 #mainbackground{
position:relative;
top:-10px;
 }
 #illustration
 {
position:relative;
top:-768px;
text-align:center;
margin:0 auto;
 }
 #text1{
height: 25px;
width:300px;
background:none;
position:relative;
top:-503px;
left:-268px;
text-align:left;
margin:0 auto;
 }

when i increase my browser size. then illustration div and text1 div remain in center and working fine. But when i decrease my browser then after original page width, illustration div stop moving to left but text1 div keeps moving to left. I want text1 div to stop when explorer width becomes less than webPage width like illustration div. How can i do that? Thanks in advance.

Answer 1

You need to be specifying widths in appropriate places, all elements are responding in a similar way but because you have relatively positioned #text1 negative it’ll go off when the screen size is less that the amount.

here’s an example of it working: http://jsfiddle.net/davetayls/GgzUR/

Move the sliders to make the right area wider and smaller