Question

I am trying to make it so my website can be viewed at any resolution and I wanted to do so using the 100% attribute, if that’s what its called in CSS. The website I’m working on is http://twitterdistrict.comuf.com/index.php so you can see what predicament I’m in.

My HTML code:

<div id="pagewrapper">

<div id="header">
<img src="http://i48.tinypic.com/34gu1pl.png" alt="header" height="153" width="655" id="header_img" /> 

</div><!--end header-->

<div id="addverttop">

<img src="http://i50.tinypic.com/uq9et.png" alt="header" height="110" width="670" id="advert_top" /> 

<a href="https://twitter.com/danielanavarr0" target="_blank"><img src="http://i49.tinypic.com/259gzv5.jpg" border="0" alt="Image and video hosting by TinyPic" height="70px" width="70px" id="daniela"></a>


</div><!----end advertisement top--->

<div id="content">

<img src="http://i49.tinypic.com/bj8tfn.png" alt="header" height="1000" width="766" id="contents" /> 


</div>

<div id="forms">

<form action = "index.php" method = "Post">

<div id="name_input"> <label>Name:  </label><br /><input type="text" name="name" maxlength="35"  value="<?php echo "$name" ?>" /><br /><br /></div>
<div id="comment_input"><label>Comment:  </label><br /><textarea name="comment" maxlength="35" cols="25" rows="3"></textarea><br /><br /><br /></div>

<?php
require_once("solvemedialib.php");          //include the Solve Media library 
echo solvemedia_get_html("E5xjj6lyTJh605jWenbaprE1.in1rkN8");   //outputs the widget
?>

<input type="submit" name="submit" value="promote yourself" /><br />





</form>

And the CSS is:

 body { margin:0; padding:0}

  #pagewrapper{
  width:100%;
  height:1700px;
  background-color:#77cde6;
  margin-left: auto;
margin-right: auto;


  }

  #header_img{
  margin-left: auto;
margin-right: auto;
  position:relative;
  left:340px
  }

  #addverttop{

  margin-left: auto;
margin-right: auto;
position: relative;
left:240px;
  }

  #contents{

 position:relative;
 left:230px;
 top:30px;

  }

  #forms{
  position:relative;
  left:-300px;
  position:absolute;
left:320px;
top:900px;
z-index:1;
  }

  #username_word{
  position:relative;
  top: -870px;
  left: 5px;

  }

  #name{
    position:relative;
  top: -870px;
  left: 20px;

  }

  #comment{
      position:relative;
  top: -890px;
  left: 340px;

  }

  .dash{
  position:relative;
  top: -870px;
  left: 20px;

  }

  #line{
  position:relative;
  top:-970px;
  }
#followbtn{
position:Relative;
top:-915px;
left: -20px;
}

#name_input{
position:relative;
top:90px;
}

#comment_input{
position:relative;
left:190px;
top:20px;
}

#daniela{
position:relative;
left:-650px;
top:-7px;

}

Answer 1

Simple CSS property ‘overflow-x’ will do it

overflow-x: visible;

Add that to your page’s body and #pagewrapper