I created my web pages using a screen resolution of 800x600 px. I am trying to make the pages display correctly using a resolution of 1024x768 px. I initially tried to use a width of 30% for each of the divs to hold the flags. I tried many combinations of code and can get the left div and the right div to display correctly by padding and floating the right div to the right.
However, I cannot get the flag in the mid div to center over the text in the middle column.
Any suggestions will be appreciated.
Here is a link to the site Visit My Website
Here is the relevant code
<!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">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<style type="text/css">
<!--
body {
margin: .5em;
}
#header {
position:relative;
width: 99%;
height: 100px;
margin-bottom: .5em;
}
#flags {
position:relative;
width: 99%;
height: 80px;
margin-bottom: .5em;
padding: 10px 0 0 0;
border-bottom: medium solid silver;
}
#imleft {
position:relative;
top: 0px;
left: 0px;
height: 20px;
float: left;
padding: 0 20px 0 10px;
}
#immid {
position:relative;
top: 0px;
left: 210px;
height: 20px;
float: left;
}
#imright {
position:relative;
top: 0px;
left: 400px;
height: 20px;
float: left;
padding: 0 0px 0 0px;
image-align: right;
}
-->
</style>
<title>Genealogy of the Collier Family</title>
</head>
<body>
<div id="header"><h1>Welcome to the Genealogy <br> of the Collier Family</h1></div>
<div id="flags">
<div id="imleft"><img src="pictures/irelandflag.gif" alt="Flag of Ireland"></div>
<div id="immid"><img src="pictures/englandflag.gif" alt="Flag of England"></div>
<div id="imright"><img src="pictures/Can.gif" alt="Flag of Canada"></div>
</div>
1 Vote
Answers