Here is my current code :
img{ width:100%;}
#g1{ width:100px;}
#g2{ width:500px;}
#g1{ width:20%;}
#g2{ width:80%;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div align="center">
<div style="width:75%;" align="left">
<div style="width:100%;"><b><font size="+2" style="word-break:break-all; line-height:40px;"> Title</font></b></div>
<div style="display:table-row;width:100%;">
<div style="width:60%; display:table-cell; background-color:#996;">
<table>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
<td id="g2" rowspan="5"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif" style="width:100%"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
</table>
</div>
<div style="width:40%; display:table-cell; background-color:#F96;">
<p>text Here</p>
<div style="width:100%;">
choose : <input name="" type="text" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
hv anyway to set the text of the the top of the div ? not on half or bottom .
have any suggestion code for this type of design ?
that so ..........................................................................................................................................................
To answer your question, you can change vertical alignement of text inside table with the vertical-align property. In your code, just add vertical-align: top; to the style of your div like so:
<div style="width:40%; display:table-cell; background-color:#F96; vertical-align: top;">
<p>text Here</p>
<div style="width:100%;">
choose : <input name="" type="text" />
</div>
</div>
With that being said, there is a proper way to achieve what you want to do (I'll assume you can build your code from scratch):
First, if you can, put all your styles in your stylesheet to separate your structure and your styles.
Then, if browser support allows you, the simplest way is to use flexbox.
Here is your code cleaned, I let you play with it to understand how everything work:
.wrapper {
width: 75%;
/* This will align your content to the center of the page */
margin-left: auto;
margin-right: auto;
}
.container {
background-color: #996;
display: flex;
align-items: center;
}
ul {
margin: 0;
padding: 0;
list-style: none;
width: 12%; /* in your code it was 20% of 60% */
flex: 1 1 auto;
}
li + li {
/* if you want spacing between image you can define it here */
margin-top: 10px;
}
img {
display: block;
width: 100%;
height: auto;
}
.featured {
padding-left: 10px;
padding-right: 10px;
width: 48%; /* in your code it was 80% of 60% */
flex: 1 1 auto;
}
.featured img {
margin-top: auto;
margin-bottom: auto;
}
.text {
background-color: #f96;
padding-left: 10px;
padding-right: 10px;
width: 40%;
width: 48%; /* in your code it was 80% of 60% */
flex: 1 1 auto;
align-self: stretch;
}
<div class="wrapper">
<h1> Title</h1>
<div class="container">
<ul>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
<li><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></li>
</ul>
<div class="featured">
<img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif">
</div>
<div class="text">
<p>Some text here...</p>
<p>
Choose : <input name="" type="text" />
</p>
</div>
</div>
</div>
I would use flex instead of table for display. Change these:
<div style="display:flex;width:100%;">
...
<div style="width:40%; background-color:#F96;">
img{ width:100%;}
#g1{ width:100px;}
#g2{ width:500px;}
#g1{ width:20%;}
#g2{ width:80%;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<div align="center">
<div style="width:75%;" align="left">
<div style="width:100%;"><b><font size="+2" style="word-break:break-all; line-height:40px;"> Title</font></b></div>
<div style="display:flex;width:100%;">
<div style="width:60%; background-color:#996;">
<table>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
<td id="g2" rowspan="5"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif" style="width:100%"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
<tr>
<td id="g1"><img src="https://i.pinimg.com/originals/9e/7a/fd/9e7afda70cde1b6bd73da5dab17a7406.gif"></td>
</tr>
</table>
</div>
<div style="width:40%; background-color:#F96;">
<p>text Here</p>
<div style="width:100%;">
choose : <input name="" type="text" />
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Do this
<p id="p1">text Here</p>
<div style="width:100%;">
#p1{margin-top:0em;}
Related
Using an html table I create a header for my document, I would like to know how I can put the page number when printing the web page, I know with #page selector of css i can configure the content of the margins and others, but I don't know how it does what I want.
enter image description here
this is the html code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="DocManual.aspx.cs" Inherits="Presentacion.GestionDocumental.DocManual" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="../css/print.css" rel="stylesheet" />
<link href="css/confAPA.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<title></title>
</head>
<body style="font-family: 'Times New Roman'">
<form id="form1" runat="server">
<div class="hoja" style="text-align:center">
<h1 style="margin-top: 150px;">Centro médico crecer.</h1>
<h1 style="margin-top: 120px;">Manual de xxxxxx</h1>
<h3 style="margin-top: 120px">Versión 1</h3>
<h1 style="margin-top: 120px">01-01-1990</h1>
</div>
<div class="hoja" id="tbContenido">
<h3 style="text-align: center">Tabla de contenido</h3>
<div>
<div><span>Introdución</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Objetivos</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Alcance</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Marco Legal</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Desarrollo</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Contenido</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Gosario de terminos</span></div>
<div></div>
<div><span>1</span></div>
</div>
<div>
<div><span>Anexos</span></div>
<div></div>
<div><span>1</span></div>
</div>
</div>
<table>
<thead>
<tr id="header">
<td>
<table>
<tr>
<td colspan="5" rowspan="4">
<img src="../Images/logocrecer.png" width="100" />
</td>
<td colspan="10" rowspan="3"><strong><span id="lbProceso" runat="server"></span></strong></td>
<td colspan="5"><strong>Código:</strong><span id="lbCodigo1" runat="server"></span></td>
</tr>
<tr>
<td colspan="5"><strong>Fecha:</strong><span id="lbFecha1" runat="server"></span></td>
</tr>
<tr>
<td colspan="5"><strong>Version:</strong><span id="lbVersion1" runat="server"></span></td>
</tr>
<tr>
<td colspan="10"><strong><span id="lbProcedimiento" runat="server"></span></strong></td>
<td colspan="5"><strong>Páginas:</strong><span id="lbPAginas1" runat="server"></span></td>
</tr>
</table>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<h3>Introducción</h3>
<div id="txtIntroducion" runat="server"></div>
<h3>Objetivos</h3>
<div id="txtOjetivos" runat="server"></div>
<h3>Alcance</h3>
<div id="txtAlcance" runat="server"></div>
<h3>Marco Legal</h3>
<div id="txtMarcoLegal" runat="server"></div>
<h3>Desarrollo</h3>
<div id="txtDesarrollo" runat="server"></div>
<h3>Contenido</h3>
<div id="txtContenido" runat="server"></div>
<h3>Gosario de terminos</h3>
<div></div>
<h3>Anexos</h3>
<div id="anexos" runat="server"></div>
<br />
<table id="control-cambios">
<thead>
<tr>
<td colspan="5" class="text-center" style="font-weight:900">CONTROL DE CAMBIOS</td>
</tr>
<tr>
<td><strong>Vesion:</strong></td>
<td><strong>Fecha:</strong></td>
<td><strong>Justificación</strong></td>
<td><strong>Descripción</strong></td>
<td><strong>Responsable</strong></td>
</tr>
</thead>
<tbody id="tbControlCambios" runat="server">
</tbody>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr id="footer">
<td>
<table>
<thead>
<tr>
<td>Eleborado por</td>
<td>Revisado por</td>
<td>Aprobado por</td>
</tr>
</thead>
<tbody runat="server" id="Participantes" style="text-align:Center">
</tbody>
</table>
</td>
</tr>
</tfoot>
</table>
</form>
<script>
print();
</script>
</body>
</html>
the print.css archive
#media print {
* {
color: #000 !important;
-webkit-text-shadow: none !important;
text-shadow: none !important;
font-family: "Times New Roman", Times, serif;
-webkit-box-shadow: none !important;
box-shadow: none !important;
}
header, nav, footer {
overflow: visible;
}
.body {
width: auto;
border: 0;
margin: 0 5%;
padding: 0;
float: none !important;
}
a, a:link, a:visited {
&[href]:after
{
content: " (" attr(href) ") ";
font-size: 90%;
}
&[href^="javascript:"],
&[href^="#"] {
&:after
{
content: attr();
}
}
}
abbr[title]:after {
content: " (" attr(title) ")";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img, table {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
#page {
margin: 2.54cm;
margin-top: 0;
margin-bottom:0;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
#content {
display: table;
}
#pageFooter {
display: table-footer-group;
}
#pageFooter:after {
counter-increment: page;
content: "Pagina " counter(page);
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20;
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
}
}
I've create this email by using html:
<html>
<head>
<style>
.button {
background-color: #8d312f;
}
div.title {
text-align: center;
}
div.title2 {
text-align: center;
}
div.buttonDiv {
text-align: center;
}
div.bottomBanner {
font-family: "Accuratist";
font-size: 14px;
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;
bottom: 30px;
}
img.logoImg {
width: 50px;
height: 58px;
content: url("finixLogo.png");
}
</style>
<div class="title">
<h1>Welcom to WOW!</h1>
</div>
</head>
<body style="font-family:Accuratist">
<div class="title2">
<h4>To confirm your account click on the following link.</h4>
</div>
<div class="buttonDiv">
Confirm account
</div>
<div class="bottomBanner">
If you have any questions, contact us: email#example.com <br><br>
</div>
</body>
</html>
But when I try to open a link of the button in gmail app on iphone, it doesn't work instead in apple mail, on ios, it works.
How can I solve the problem?
here's a screenshot of gmail.
enter image description here
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="text-align: center;">
<tbody>
<tr>
<td><h1>Welcom to WOW!</h1></td>
</tr>
<tr>
<td><p><strong>To confirm your account click on the following link.</strong></p></td>
</tr>
<tr>
<td style="padding:10px 0 10px;">Confirm account</td>
</tr>
<tr>
<td>Confirm account:</td>
</tr>
<tr>
<td>email#example.com </td>
</tr>
</tbody>
</table>
</body>
</html>
I am a newbie in HTML and currently working on my University project work and I really need some help. I am using a background box for the "blog-like" website which needs to align title and short text on the left and contents with hyperlinks on the right.
So far I have used a cell to align them but to say the least, it looks very ugly and moreover affects spacing. No matter what I tried I can't change the contents on both sides without a response from another. Is it possible to arrange content somehow another way instead of using a single cell for an entire box and dividing percentage for each side? I have uploaded a picture of the website below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Your Personal Guide To Best Hardcore Events
</title>
<style type="text/css">
body {
background: url(http://webprojects.eecs.qmul.ac.uk/at315/background.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
background-attachment: fixed
}
.background {
display: flex;
justify-content: center;
}
div.transbox {
margin: 0px;
background-color: #ffffff;
border: 1.5px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
max-width: 1300px;
}
</style>
</head>
<body>
<p align="center">
<img src="http://webprojects.eecs.qmul.ac.uk/at315/header.png" style="width:70%;" border="0" alt="" />
</p>
<div class="background">
<div class="transbox">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<th width="75%" align="left">
<h2>
Articles:
</h2>
</th>
<th width="20%" align="center">
<ul style="list-style: none;">
<li>
Homepage
<br />
<br />
</li>
<li>
<small><a href="http://www.qmul.ac.uk" style=
"text-decoration:none">Architects</a></small>
</li>
<li>
<small><a href="https://www.facebook.com" style=
"text-decoration:none">Northlane</a></small>
</li>
<li>
<small><a href="http://www.bbc.co.uk" style=
"text-decoration:none">Attila</a></small>
</li>
</ul>
</th>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<hr />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<hr />
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td align="left">
<h4>
<strong>Architects Rocking Brixton</strong>
</h4>Read our article about Architects headlining their biggest sold-out UK show!
<br />
<br />
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Main page of the website
In this situations it is best to use flex and max width. It is very good to responsive design so.
.background {
display: flex;
justify-content: center;
}
div.transbox {
margin: 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
width: 100%;
max-width: 1000px;
}
Change your browser size, It work good for all sizes. And the best part is if the screen has width < 1000px the table fills all of the screen.
just change this tag:
<table style="padding:0 5% " width = "90%" border="0" cellpadding="0" cellspacing="0">
I'm designing a website and I need it to look something like this http://www.spookycraft.net/
excluding the slide show and javascript and such, I just need 4 separate clickable blocks in the middle of a webpage, I've tried to use margin:auto and then re-position it using margin-left and margin-bottom ect but when I use margin-bottom It just splits apart more and acts rather interestingly here's my current code keep in mind I also need it to look the same on a higher resolution screen which is why I was attempting to use margin:auto;
<!DOCTYPE HTML>
<html>
<head>
<table border="10px"; class="head">
<tr>
<td>
<img src="http://www3.alcatel-lucent.com/partners/hp/data-center-network-connect/images/Alliance_DCNC_700x200.jpg" > </>
</td>
<tr>
</table>
<style media="screen" type="text/css">
.tone{
margin:auto;
}
.ttwo{
margin:auto;
}
.tthree{
margin:auto;
}
.tfour{
margin:auto;
}
.head{
margin:auto;
}
</style>
</head>
<body>
<table border="5px"; class="tone">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px"; class="ttwo">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px" class="tthree">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
<table border="5px" class="tfour">
<tr>
<td>
<img src="http://www.wilsoninfo.com/300x300.gif"> </>
</td>
</tr>
</table>
</body>
</html>
Any help would be appreciated! I'll be working to find a answer to my problem, and when I do I'll update this thread.
Don't use tables, they are a no-no in my books. Tables should not be used for structure in a HTML page these days, they should only be used for presenting data in a tabular format. Just use <div>s with a master wrapper <div> around them. Something like this is perfect:
HTML:
<div class="container">
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
<div class="box spacing"><img src="http://www.wilsoninfo.com/300x300.gif" width="100%"></div>
</div>
CSS:
body{
margin:0;
padding:0;
}
.container{
overflow:hidden;
width:450px;
margin:0px auto;
}
.box{
width:200px;
height:200px;
float:left;
background-color:#ccc;
margin-bottom:20px;
}
.spacing{
margin-right:20px;
}
Demo here: http://jsfiddle.net/aRSNh/172/
I'm not familiar with table design, but if you want to build it with div I have my code here
<div class="container">
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
<div class="box"><img src="http://www.wilsoninfo.com/300x300.gif"></div>
</div>
with this css
.container {
width: 680px;
margin: 10px auto;
}
.box {
float: left;
margin: 20px;
}
A nice library for fast CSS development is Twitter bootstrap http://twitter.github.io/bootstrap/index.html
Here is a quick example using bootstrap:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Layout Demo</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap- combined.min.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="margin: 100px 0px; 0px; 0px;">
<div class="row">
<div class="offset6 span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
<div class="span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
</div>
<br>
<div class="row">
<div class="offset6 span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
<div class="span3"> <img src="http://www.wilsoninfo.com/300x300.gif"> </> </div>
</div>
</div>
</body>
</html>
Plunker: http://embed.plnkr.co/iKgsmZ/preview
Notice how the first HTML/CSS works when you re-size the browser horizontally. It will shrink no further than around 800 pixels, but it will expand as far as you drag the right edge of the browser. It will also correctly overflow the table at the top and scroll it horizontally.
The thing I don't like about the first code snippet is where the scrollbar is. I want it to show up within the borders of the fieldset, so even if I narrow the browser down to 800 pixels wide, I can see both the left and right sides of the fieldset's border.
The second code snippet is exactly the same as the first except I add another div tag to the mix, inside of the field set and around the grid. Notice how the top fieldset's width won't correctly shrink when you make the viewport of your browser narrower. Any ideas on why it doesn't work, what I can do to get it to work like the first code snippet?
I don't think I'm describing this clearly, but if you run the two side by side, and expand and contract the horizontal edge of your browser windows, you'll see the differences between the two.
I'm pretty new to CSS and HTML layout, so my understanding of why CSS handles sizing the way it does in some situations is still really confusing to me.
Working HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divMasterGrid {
position:relative;
margin:5px;
top:5px;
width:99%;
margin:0 auto;
overflow-x:scroll;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divMasterGrid">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
Broken HTML file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divTopFieldSet {
position:relative;
margin:5px;
top:5px;
width:99%;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
#divTable {
position:relative;
width:99%;
margin:5px auto;
overflow-x:scroll;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divTopFieldSet">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<div id="divTable">
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
I hope this is what you mean:
I've moved the overflow-x and width rules to #divTopFieldSet - the contents of the div correctly scrolls when the body becomes too narrow to contain the table.
To tell you the truth, I'm not 100% sure of the root cause of this. When an element with a percentage width is set to overflow:scroll, it doesn't automatically shrink to crop its contents - it seems like the children of the element play a part. Because the table has a minimum width of its own (determined by the contents of the cells), the surrounding container will not shrink past the outer edge of the table. On top of that, there is the calculation of percentage widths - width:99%; means '99% of the parent container's width' - if the parent container isn't based on the size of the viewport, that 99% won't change when you resize, either.
Applying the overflow rule to a container further up the tree (divTopFieldSet) does work, though.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Style-Type" content="text/css"></meta>
<style type="text/css">
#divBody {
margin-top: 5px;
top:24px;
margin-top: 10px;
}
#divContainer
{
top: 5px;
position:relative;
min-height:100%;
#width:expression(document.body.clientWidth < 830? "800": "90%" );
width:90%;
min-width: 800px;
padding-bottom:70px;
}
#divTopFieldSet {
position:relative;
margin:5px;
top:5px;
width:99%;
overflow-x:scroll;
}
#divRadioButtonArea {
position:relative;
top:20px;
height:51px;
font-size: 12px;
width:99%;
margin:5px;
}
#divTable {
margin:5px auto;
}
</style>
<title>TEST TEST</title>
</head>
<body id="divBody">
<div id="divContainer" class="gridRegion">
<div id="divTopFieldSet">
<fieldset style="margin: 5px;">
<legend style="font-size: 12px; color: #000;">Numbers</legend>
<div id="divTable">
<table border="1px">
<tr>
<td>One
</td>
<td>Two
</td>
<td>Three
</td>
<td>Fout
</td>
<td>Five
</td>
<td>Six
</td>
<td>Seven
</td>
<td>Eight
</td>
<td>Nine
</td>
<td>Ten
</td>
<td>Eleven
</td>
<td>Twelve
</td>
<td>Thirteen
</td>
<td>Fourteen
</td>
<td>Fifteen
</td>
<td>Sixteen
</td>
<td>Seventeen
</td>
<td>Eighteen
</td>
<td>Nineteen
</td>
<td>Twenty
</td>
</tr>
</table>
</div>
</fieldset>
</div>
<div id="divRadioButtonArea">
<fieldset style=" padding-left: 5px;">
<legend style="color: #000; height:auto">Colors</legend>
<table style="width:100%;padding-left:5%;padding-right:5%;">
<tr>
<td>
<input type="radio" name="A" value="Y"/><label>Red</label>
</td>
<td>
<input type="radio" name="O" value="O"/><label>White</label>
</td>
<td>
<input type="radio" name="W"/><label>Blue</label>
</td>
</tr>
</table>
</fieldset>
</div>
</div>
</body>
</html>
Let us know if this isn't what you need...