css body width

Question

lewashby 56 Junior Poster

10 Years Ago

In the following css and html document can anyone tell me why my page width css code isn't working?

mystyle.css

#page
{
    width: 25%;
}

Here's the html page.

<html>
<head>
<title>Bail Bonding</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

<form action="bail.php" method="POST">

<div id="page">
<table width="25%">

<tr> <td>First Name:</td> 
     <td align="right"> <input type="text" name="fname"></td></tr>

<tr> <td>Last Name:</td>
     <td align="right"> <input type="text" name="lname"></td></tr>

<tr> <td>Address:</td>
     <td align="right"> <input type="text" name="address"</td></tr>

<tr> <td>City:</td>
     <td align="right"> <input type="text" name="city"</td></tr>

<tr> <td>Zip code:</td>
     <td align="right"> <input name="zip"></td></tr>

<tr> <td>Sate: <select name="sate">

    <option value="NONE"> Select</option>
    <option value="AL"> AL - Alabama</option>
    <option value="AK"> AK - Alaska</option>
    <option value="AZ"> AZ - Arizona</option>
    <option value="AR"> AR - Arkansas</option>
    <option value="CA"> CA - Califonria</option>
    <option value="CO"> CO - Colorado</option>
    <option value="CT"> CT - Connecticut</option>
    <option value="DE"> DE - Delaware</option>
    <option value="FL"> FL - Florida</option>
    <option value="GA"> GA - Georgia</option>
    <option value="HI"> HI - Hawaii</option>
    <option value="ID"> ID - Idaho</option>
    <option value="IL"> IL - Illinois</option>
    <option value="IN"> IN - Indiana</option>
    <option value="IA"> IA - Iowa</option>
    <option value="KS"> KS - Kansas</option>
    <option value="KY"> KY - Kentucky</option>
    <option value="LA"> LA - Louisiana</option>
    <option value="ME"> ME - Maine</option>
    <option value="MD"> MD - Maryland</option>
    <option value="MA"> MA - Massachusetts</option>
    <option value="MI"> MI - Michigan</option>
    <option value="MN"> MN - Minnesota</option>
    <option value="MS"> MS - Mississippi</option>
    <option value="MO"> MO - Missouri</option>
    <option value="MT"> MT - Montana</option>
    <option value="NE"> NE - Nebraska</option>
    <option value="NV"> NV - Nevada</option>
    <option value="NH"> NH - New Hampshire</option>
    <option value="NJ"> NJ - New Jersey</option>
    <option value="NM"> NM - New Mexico</option>
    <option value="NY"> NY - New York</option>
    <option value="NC"> NC - North Carolina</option>
    <option value="ND"> ND - North Dakota</option>
    <option value="OH"> OH - Ohio</option>
    <option value="OK"> OK - Oklahoma</option>
    <option value="OR"> OR - Oregon</option>
    <option value="PA"> PA - Pennsylvania</option>
    <option value="RI"> RI - Rhode Island</option>
    <option value="SC"> SC - South Carolina</option>
    <option value="SD"> SD - South Dakota</option>
    <option value="TN"> TN - Tennessee</option>
    <option value="TX"> TX - Texas</option>
    <option value="UT"> UT - Utah</option>
    <option value="VT"> VT - Vermont</option>
    <option value="VA"> VA - Virginia</option>
    <option value="WA"> WA - Washington</option>
    <option value="WV"> WV - West Virginia</option>
    <option value="WI"> WI - Wisconsin</option>
    <option value="WY"> WY - Wyoming</option>
    </select></td><td><input type="submit"></td></tr>
</form>
</table>
</div>
</body>
</html>

web-design

4 Contributors
4 Replies
171 Views
1 Week Discussion Span
Latest Post 10 Years Ago Latest Post by crescendo

All 4 Replies

JorgeM 958 Problem Solver

10 Years Ago

So it looks like your link element is in the wrong place, should be in the head section.. but since I've never tried to have it in the body section, I tried your code as is and it appears that it works fine.

I guess, I assume that the reason for it normally being in the head section is so that the style sheet is downloaded before the page renders...makes sense.

Anyway, your code looks good. When I run it locally here, the div that surrounds your content is taking up 25% of my screen. If I change the value to 50%, the div width adjusts accordingly.

Why do you beleive its not correct?

Edited 10 Years Ago by JorgeM

Reply to this topic

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.

IIM 163 Master Poster · Answer 1 · 2013-05-11T02:08:34+00:00

yes jorgem is correct. I just modified background color to make it clear.The page class div takes 25% of body.To represent this,i have used three different colors:-
1 body background color
2 div background color(changed width to 50%)
3 table background color

<html>
<head>
<title>Bail Bonding</title>
<style type="text/css">
#page
{
    width: 50%;
    background:blue;
}
</style>
</head>

<body style="background:red">
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

<form action="bail.php" method="POST">

<div id="page">
<table width="25%" style="background:green">

<tr> <td>First Name:</td> 
     <td align="right"> <input type="text" name="fname"></td></tr>

<tr> <td>Last Name:</td>
     <td align="right"> <input type="text" name="lname"></td></tr>

<tr> <td>Address:</td>
     <td align="right"> <input type="text" name="address"</td></tr>

<tr> <td>City:</td>
     <td align="right"> <input type="text" name="city"</td></tr>

<tr> <td>Zip code:</td>
     <td align="right"> <input name="zip"></td></tr>

<tr> <td>Sate: <select name="sate">

    <option value="NONE"> Select</option>
    <option value="AL"> AL - Alabama</option>
    <option value="AK"> AK - Alaska</option>
    <option value="AZ"> AZ - Arizona</option>
    <option value="AR"> AR - Arkansas</option>
    <option value="CA"> CA - Califonria</option>
    <option value="CO"> CO - Colorado</option>
    <option value="CT"> CT - Connecticut</option>
    <option value="DE"> DE - Delaware</option>
    <option value="FL"> FL - Florida</option>
    <option value="GA"> GA - Georgia</option>
    <option value="HI"> HI - Hawaii</option>
    <option value="ID"> ID - Idaho</option>
    <option value="IL"> IL - Illinois</option>
    <option value="IN"> IN - Indiana</option>
    <option value="IA"> IA - Iowa</option>
    <option value="KS"> KS - Kansas</option>
    <option value="KY"> KY - Kentucky</option>
    <option value="LA"> LA - Louisiana</option>
    <option value="ME"> ME - Maine</option>
    <option value="MD"> MD - Maryland</option>
    <option value="MA"> MA - Massachusetts</option>
    <option value="MI"> MI - Michigan</option>
    <option value="MN"> MN - Minnesota</option>
    <option value="MS"> MS - Mississippi</option>
    <option value="MO"> MO - Missouri</option>
    <option value="MT"> MT - Montana</option>
    <option value="NE"> NE - Nebraska</option>
    <option value="NV"> NV - Nevada</option>
    <option value="NH"> NH - New Hampshire</option>
    <option value="NJ"> NJ - New Jersey</option>
    <option value="NM"> NM - New Mexico</option>
    <option value="NY"> NY - New York</option>
    <option value="NC"> NC - North Carolina</option>
    <option value="ND"> ND - North Dakota</option>
    <option value="OH"> OH - Ohio</option>
    <option value="OK"> OK - Oklahoma</option>
    <option value="OR"> OR - Oregon</option>
    <option value="PA"> PA - Pennsylvania</option>
    <option value="RI"> RI - Rhode Island</option>
    <option value="SC"> SC - South Carolina</option>
    <option value="SD"> SD - South Dakota</option>
    <option value="TN"> TN - Tennessee</option>
    <option value="TX"> TX - Texas</option>
    <option value="UT"> UT - Utah</option>
    <option value="VT"> VT - Vermont</option>
    <option value="VA"> VA - Virginia</option>
    <option value="WA"> WA - Washington</option>
    <option value="WV"> WV - West Virginia</option>
    <option value="WI"> WI - Wisconsin</option>
    <option value="WY"> WY - Wyoming</option>
    </select></td><td><input type="submit"></td></tr>
</form>
</table>
</div>
</body>
</html>

lewashby 56 Junior Poster · Answer 2 · 2013-05-12T01:27:59+00:00

I want the content on the page to resize as the browser is resized by the user but it isn't working for me. Am I going about it the wrong way? Thanks guys.

crescendo 12 Junior Poster in Training · Answer 3 · 2013-05-20T07:18:53+00:00

Firsly move your

<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen" />

to the head section of your screen.

If you want to make your website responsive, you must use frameworks or twitter bootstraps and stuff like SASS.

css body width

Recommended Answers Collapse Answers

All 4 Replies

Recommended Answers