HTML full page overflow doesn't work

I am trying to make a full-screen html page. There are a few problems.

  1. how to make the height of menu bar compact based on the font of the text ?

  2. This is a 4 columns layout, P5 is supposed to be 50% of screen width, using 2 columns space, if the content is over this size, just put scrollbar horizontally. but now it is not what I want.

  3. P5 could have scrollbar vertically if the height is over a defined height. how to do it ?

  4. the gap between P1 and P2 is out of control.



    <html>
    	<body style="width: 100%;padding:0px;margin:0px;">
    		<div style="width: 100%;height:40px; padding:0px;margin:0px; background-color:blue;">Menu bar</div>	
    		<table style="width: 100%;padding:0px;margin:0px;">
    			<tr >
    				<td style="width: 25%;vertical-align:text-top;">
    						<form>
    		<fieldset><legend>P1:</legend>
    			<div><label style="width:100%;">Name Long Long</label> <input type="text" value="" style="width: 100%;"/></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Age</label> <input type="text" value="" style="width: 100%;" /></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Married</label> <input type="checkbox" value=""  /></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Long Content</label> <textarea style="width: 100%; height: 75px;"></textarea></div>
    		</fieldset>
    		</form>
    		
    		<!-- ////////// second //----------- -->
    			
    			<form style="margin-top:3px;">
    		<fieldset><legend>P2:</legend>
    			<div><label style="width:100%;">Name Long Long</label> <input type="text" value="" style="width: 100%;"/></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Age</label> <input type="text" value="" style="width: 100%;" /></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Married</label> <input type="checkbox" value=""  /></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Long Content 1</label> <textarea style="width: 100%; height: 75px;"></textarea></div>
    			
    		</fieldset>
    		</form>
    		<!-- ////////// third //----------- -->
    				<form style="margin-top:3px;">
    		<fieldset><legend>P3:</legend>
    			<div><label style="width:100%;">Name Long Long</label> <input type="text" value="" style="width: 100%;"/></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Age</label> <input type="text" value="" style="width: 100%;" /></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Married</label> <input type="checkbox" value=""  /></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Long Content</label> <textarea style="width: 100%; height: 75px;"></textarea></div>
    		</fieldset>
    		</form>
    				</td>
    				
    				<td style="width: 25%;vertical-align:text-top;">
    					<form>
    		<fieldset><legend>P4:</legend>
    			<div><label style="width:100%;">Name Long Long</label> <input type="text" value="" style="width: 100%;"/></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Age</label> <input type="text" value="" style="width: 100%;" /></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Married</label> <input type="checkbox" value=""  /></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Long Content 1</label> <textarea style="width: 100%; height: 75px;"></textarea></div>
    			<div style="margin-top:3px;"><label style="width:100%;">Long Content 2</label> <textarea style="width: 100%; height: 75px;"></textarea></div>
    		</fieldset>
    		</form>
    				</td>
    				
    				
    				<td style="width: 50%;vertical-align:text-top;">
    				<form style="overflow:scroll;">
    		<fieldset><legend>P5:</legend>
    			<table style="width: 100%;vertical-align:text-top;overflow:scroll;">
    				<tr>
    					<th>afdsadsa</th>
    					<th>afdsadsa</th>
    					<th>afdsadsa</th>
    					<th>afdsadsa</th>
    					<th>afdsadsa</th>
    					<th>afdsadsa</th>
    					<th>afdsadsa</th>
    					<th>afdsadsa</th>
    					<th>afdsadsa</th>
    					<th>afdsadsa</th>
    					<th>afdsadsa</th>
    					<th>afdsadsa</th>
    					
    				</tr>
    			</table>
    		</fieldset>
    		</form>
    				</td>
    			</tr>
    		</table>
    		
    	</body>
    </html>

thanks

You set the height to 40px so if you don’t want a height then don’t give it one.:slight_smile:

  1. This is a 4 columns layout, P5 is supposed to be 50% of screen width, using 2 columns space, if the content is over this size, just put scrollbar horizontally. but now it is not what I want.

If you are giving widths to the cells you need the table-layout:fixed algorithm to make them work.

If you set width:100% then it is unlikely to cause a scrollbar because 100% is as wide as it gets. Tables are awkward to get scrollbars working anyway.

I hate working with inline css because it soooo hard to make changes and you really should use an external stylesheet (or when testing just put css in the head).

It looks like you wanted something like this:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body style="padding:0px;margin:0px;">
<div style=" padding:0px;margin:0px; background-color:blue;">Menu bar</div>
<table style="width: 100%;padding:0px;margin:0px;table-layout:fixed">
		<tr >
				<td style="width: 25%;vertical-align:text-top;"><form>
								<fieldset>
										<legend>P1:</legend>
										<div>
												<label style="width:100%;">Name Long Long</label>
												<input type="text" value="" style="width: 100%;"/>
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Age</label>
												<input type="text" value="" style="width: 100%;" />
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Married</label>
												<input type="checkbox" value=""  />
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Long Content</label>
												<textarea style="width: 100%; height: 75px;"></textarea>
										</div>
								</fieldset>
						</form>
						
						<!-- ////////// second //----------- -->
						
						<form style="margin-top:3px;">
								<fieldset>
										<legend>P2:</legend>
										<div>
												<label style="width:100%;">Name Long Long</label>
												<input type="text" value="" style="width: 100%;"/>
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Age</label>
												<input type="text" value="" style="width: 100%;" />
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Married</label>
												<input type="checkbox" value=""  />
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Long Content 1</label>
												<textarea style="width: 100%; height: 75px;"></textarea>
										</div>
								</fieldset>
						</form>
						
						<!-- ////////// third //----------- -->
						
						<form style="margin-top:3px;">
								<fieldset>
										<legend>P3:</legend>
										<div>
												<label style="width:100%;">Name Long Long</label>
												<input type="text" value="" style="width: 100%;"/>
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Age</label>
												<input type="text" value="" style="width: 100%;" />
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Married</label>
												<input type="checkbox" value=""  />
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Long Content</label>
												<textarea style="width: 100%; height: 75px;"></textarea>
										</div>
								</fieldset>
						</form></td>
				<td style="width: 25%;vertical-align:text-top;"><form>
								<fieldset>
										<legend>P4:</legend>
										<div>
												<label style="width:100%;">Name Long Long</label>
												<input type="text" value="" style="width: 100%;"/>
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Age</label>
												<input type="text" value="" style="width: 100%;" />
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Married</label>
												<input type="checkbox" value=""  />
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Long Content 1</label>
												<textarea style="width: 100%; height: 75px;"></textarea>
										</div>
										<div style="margin-top:3px;">
												<label style="width:100%;">Long Content 2</label>
												<textarea style="width: 100%; height: 75px;"></textarea>
										</div>
								</fieldset>
						</form></td>
				<td style="width: 50%;vertical-align:text-top;"><form style="overflow:scroll;">
								<fieldset>
										<legend>P5:</legend>
										<table>
												<tr>
														<th>afdsadsa</th>
														<th>afdsadsa</th>
														<th>afdsadsa</th>
														<th>afdsadsa</th>
														<th>afdsadsa</th>
														<th>afdsadsa</th>
														<th>afdsadsa</th>
														<th>afdsadsa</th>
														<th>afdsadsa</th>
														<th>afdsadsa</th>
														<th>afdsadsa</th>
														<th>afdsadsa</th>
												</tr>
										</table>
								</fieldset>
						</form></td>
		</tr>
</table>
</body>
</html>


Don’t forget the doctype as that is very important.

You can’t give width to inline elements like labels unless you set them to display:block.

Associate your labels with the inputs they refer to for best accessibility (label for=“input_id”>).

Scrollbars on inner elements are not very user friendly and best avoided unless there is no other way to design it.

Tables should only be used for tabular data and that page isn’t really tabular data.

Paul, thank you very much. Looks like the main change is doctype type. I like the Extjs style, but its license is keeping me away. what I am looking for is a simple use, light weight, a table column layout. Do you have any recommendation ? I am tasting the EasyUI, but unfortunately it doens’t have this layout.

I will move the inline css to external file. this forum always is very friendly and professional. Many thanks.

Unfortunately, I don’t have experience with third party code as I just write my own from scratch so can’t really recommend anything specific. :slight_smile:

Forms aren’t that hard to code as long as you keep them simple and logical - which is usually best for the users also so don’t try to over-complicate things.