Member Avatar for lewashby

I'M trying to make the following web page fluid, or liquid. I want the page and form to resize as the browser is resized. Any idea on how I can accomplish this? Thanks.

<html>
<head>
<title>Test</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>
  • 3 Contributors
  • 2 Replies
  • 127 Views
  • 4 Hours Discussion Span
  • Latest Post Latest Post by Member #949455

Dani AI

Generated

The page needs layout moved into CSS and a few HTML fixes before it will behave as a true fluid (liquid) form. @M/ pointed to useful background reading and is correct that CSS is required. The sample in the first post also contains a few markup problems (several inputs missing closing brackets and a misplaced closing </form>). Broken HTML can prevent styles from applying predictably, so validate and fix those first.

Add a fluid container, make inputs stretch to their container, and use box-sizing: border-box. Example CSS to add to mystyles.css:

*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

#page {
  width: 90%;
  max-width: 900px;
  margin: 1rem auto;
  padding: 1rem;
}

form table {
  width: 100%;
  border-collapse: collapse;
}

form td.label {
  width: 30%;
  padding: 0.5rem 0.75rem 0.5rem 0;
  vertical-align: middle;
}

form td.control {
  padding: 0.25rem 0;
}

input[type="text"],
select {
  width: 100%;
  padding: 0.5rem;
  font-size: 1rem;
}

@media (max-width: 480px) {
  form table, form tr, form td {
    display: block;
    width: 100%;
  }
  form td.label { margin-bottom: 0.25rem; }
}

Extra notes and troubleshooting: ensure a proper <!DOCTYPE html> and include the mobile viewport meta (<meta name="viewport" content="width=device-width, initial-scale=1">). Replace the table layout with flexbox or CSS Grid for longer-term maintainability (use a .form-row { display:flex } pattern with a fixed label flex-basis and a flexible input). Always associate label elements with inputs via for/id for accessibility. If widths still look wrong, inspect the element in browser devtools to find any inline width attributes or conflicting rules, then remove or override them in the stylesheet.

Recommended Answers

All 2 Replies

Member Avatar for <M/>

Have you read this:
http://www.htmlbasictutor.ca/flexible-liquid-design.htm

http://css-tricks.com/the-perfect-fluid-width-layout/

http://www.maxdesign.com.au/articles/liquid/

You can google for more solutions.

I noticed that a lot of people like to adjust the widths (as an example) with percentages rather than just pixels. With the percentages, you can adjust the page (as an example) 80% of the window rather than pixels. I don't don't know if I make much sense but the links may help out a bit.

Member Avatar for Member #949455

I'M trying to make the following web page fluid, or liquid. I want the page and form to resize as the browser is resized. Any idea on how I can accomplish this? Thanks.

Are you familiar with CSS?

I don't see any CSS code I only see HTML code.

I hope you don't expect someone to write it for you?

You can take a look at the articles/tutorial that <M/> provided.

It has those CSS code that you need for your website.

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.