I designed one webpage.

Question

0.00/5 (No votes)

See more:

I designed one webpage,but it scrolling horizontal.I don't want that one.I placed width and height is 100%.I dont't know what is the problem.

Here's the code:

CSS

body{
width:100%;
height:100%;
margin:0px;
padding:0px;
font-family:&quot;museo-sans-rounded&quot;, lucida grande, sans-serif;

}

#header{
float:left;
height:13%;
width:100%;
background-color:#e3e3e3;

}
#header img{
float:left;
margin-left:20px;
height:76px;
width:200px;



}

#header h1{
padding-top:20px;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:40px;

}
#header ul {
float:right;
margin-top:60px;
margin-right:10px;
}
#header ul li{
display:inline;
position:relative;
margin-left:20px;
height:20px;
width:100px;
background-color:#993366;
border-radius:5px;

}
#header li a{
font-family: verdana;
font-size: 11px;
text-decoration: none;
background-color:#A8D7FD;
color:black;
padding-top:5px;
padding-left:10px;
padding-right:10px;
padding-bottom:4px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
#header ul li a:hover{
border-radius:5px;
background-color:#00CCFF;
}
#footer{
float:left;
height:8%;
width:100%;
/*border-top:2px solid #000000;*/
background-color:#e3e3e3;
}
#footer h6{
padding-top:15px;
font-weight:bold;
float:left;
padding-left:400px;

font-size:12px;
}
#main{
float:left;
height:79%;
width:100%;

background:-moz-linear-gradient(top,#E8E8E8,#FFFFFF);
background:-webkit-linear-gradient(top,#E8E8E8,#FFFFFF);
background:linear-gradient(#f9d835, #fff);

}
#connect{
float:left;
height:200px;
width:150px;
margin-left:200px;
margin-top:30px;
}
p.connect{
float:left;
position:relative;
padding-top:9px;
line-height:20px;
width:100px;
height:30px;
color:#666;
text-align:center;
font-family: &quot;museo-sans-rounded&quot;, lucida grande, sans-serif;
font-style:italic;
font-size:17px;
background:-webkit-gradient(white);
background:-moz-linear-gradient(white);
background:-o-linear-gradient(#f04349, #c81e2b);
background:linear-gradient(#f04349, #c81e2b);
-webkit-border-radius:10px ;
border:4px solid #666;
-moz-border-radius:10px;
border-radius:10px solid ;
}
.connect:after {
content:&quot;&quot;;
position:absolute;
bottom:-20px; /* value = - border-top-width - border-bottom-width */
left:60px; /* value = (:before's left) + (:before's border-right/left-width)  - (:after's border-right/left-width) */
border: 0;
border-right-width:10px; /* vary this value to change the angle of the vertex */
border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
border-style:solid;
border-color:transparent #666;
/* reduce the damage in FF3.0 */
display:block;
width:0;
}
#solve{
float:left;
height:200px;
width:150px;
margin-left:100px;
margin-top:30px;
}
p.solve{
float:left;
position:relative;
padding-top:9px;
line-height:20px;
width:100px;
height:30px;
color:#666;
text-align:center;
font-family: &quot;museo-sans-rounded&quot;, lucida grande, sans-serif;
font-style:italic;
font-size:17px;
background:-webkit-gradient(white);
background:-moz-linear-gradient(white);
background:-o-linear-gradient(#f04349, #c81e2b);
background:linear-gradient(#f04349, #c81e2b);
-webkit-border-radius:10px ;
border:4px solid #666;
-moz-border-radius:10px;
border-radius:10px solid ;
}
.solve:after {
    content:&quot;&quot;;
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:60px; /* value = (:before's left) + (:before's border-right/left-width)  - (:after's border-right/left-width) */
    border:0;
    border-right-width:10px; /* vary this value to change the angle of the vertex */
    border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
    border-style:solid;
    border-color:transparent #666;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}
#grow{
float:left;
height:200px;
width:150px;
margin-left:100px;
margin-top:30px;
}
p.grow{
float:left;
position:relative;
padding-top:9px;
line-height:20px;
width:100px;
height:30px;
color:#666;
text-align:center;
font-family: &quot;museo-sans-rounded&quot;, lucida grande, sans-serif;
font-style:italic;
font-size:17px;
background:-webkit-gradient(white);
background:-moz-linear-gradient(white);
background:-o-linear-gradient(#f04349, #c81e2b);
background:linear-gradient(#f04349, #c81e2b);
-webkit-border-radius:10px ;
border:4px solid #666;
-moz-border-radius:10px;
border-radius:10px solid ;
}
.grow:after {
    content:&quot;&quot;;
    position:absolute;
    bottom:-20px; /* value = - border-top-width - border-bottom-width */
    left:60px; /* value = (:before's left) + (:before's border-right/left-width)  - (:after's border-right/left-width) */
    border:0;
    border-right-width:10px; /* vary this value to change the angle of the vertex */
    border-bottom-width:20px; /* vary this value to change the height of the triangle. must be equal to the corresponding value in :before */
    border-style:solid;
    border-color:transparent #666;
    /* reduce the damage in FF3.0 */
    display:block;
    width:0;
}
.h1{
height:10px;
float:left;
width:100%;
padding-left:210px;

font-family: &quot;museo-sans-rounded&quot;, lucida grande, sans-serif;
font-weight: 200;
font-size:55px;
font-style:normal;
margin-top:5px;
}
.content{
float:left;
text-align:justify;
color:#FF6600;
}

#social{
float:left;margin-left:370px;width:100%;color:black;

}
.and{
height:10px;
padding-top:8px;
padding-bottom:8px;
float:left;
padding-left:390px;
font-family: &quot;museo-sans-rounded&quot;, lucida grande, sans-serif;
font-weight: 300;
font-size:45px;
font-style:normal;
margin-top:5px;
}

Posted 1-Feb-12 1:25am

DeepthiTanguturi

Updated 1-Feb-12 1:46am

Manfred Rudolf Bihy

v2

Add a Solution

Comments

Amir Mahfoozi 1-Feb-12 7:28am

Width and Height of which item are 100% ? Please provide code.

Manfred Rudolf Bihy 1-Feb-12 7:47am

Moved code dump from non-solution to question!
@OP: Please don't post your code as a solution. Use "Improve question" link below your question the next time you need to modify your code.

Thanks for your cooperation!

DeepthiTanguturi 1-Feb-12 7:49am

By mistake i post the code in solution.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Rajeev Jayaram · Accepted Answer · 2012-02-01T01:54:00

Solution 2

Just setting the body tag with width:100% wouldn't help you on this. There are places where you mentioned px that would cause trouble, like this one below.

padding-left:400px;

Also try this to disable horizontal scrolling,

body{overflow-x:hidden}

Posted 1-Feb-12 1:54am

Rajeev Jayaram

Updated 1-Feb-12 1:59am

v2

Comments

DeepthiTanguturi 1-Feb-12 7:55am

what is the solution for that

Rajeev Jayaram 1-Feb-12 8:08am

padding-left:400px; is not the only thing to fix, you should carefully weedout all the potential margin/padding errors in similar way.

DeepthiTanguturi 1-Feb-12 7:57am

I think that is not the problem.i remove that one padding-left:400px,still it is scrolling

Rajeev Jayaram 1-Feb-12 8:01am

See my updated answer.

Note: Use the 'reply' link at the right corner of the comment for replying to comments.

DeepthiTanguturi 1-Feb-12 8:04am

Thanks rajeev,its working

Rajeev Jayaram 1-Feb-12 8:09am

Glad it helped, click on 'correct answer/accept solution' to accept the answer.