How can I make box2 appear before box1 without changing the source code? For the record, the boxes are not fixed widths in reality, just for the purpose of this demonstration. Also, I do not know their height either. So in effect on each page refresh, the contents of all 4 boxes can change size.
Though if required, box3 and box4 can have their height and width defined permenantly but I would rather all 4 boxes were dynamic and this layout still worked.
Any help urgently and gratefully appreciated!
Though if required, box3 and box4 can have their height and width defined permenantly but I would rather all 4 boxes were dynamic and this layout still worked.
Any help urgently and gratefully appreciated!
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#container {
background-color: #CCCCCC;
}
#box1 {width: 50px; height: 50px; background-color: #00CC66; }
#box2 {width: 50px; height: 50px; background-color: #00CCCC; }
#box3 {width: 50px; height: 50px; background-color: #99FF00; }
#box4 {width: 50px; height: 50px; background-color: #FFCC66; }
</style>
</head>
<body>
<div id="container">
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
<div id="box4">4</div>
</div>
</body>
</html>