Hi all,
I am trying to create a web page that has a tabular layout but without using table elements. The problem I am having is that whenever I add text to any of the divs the layout changes. I am not sure why this is happening. Attached below is the code. It is a simplified version of the layout containing only the divs and plain text. I have color coded the divs so that each stands out.
The two versions in this code are identical. The only difference is that the second one has the text added to it. Notice how the the divs shift downward when the text is added. Does any one have a solution to why this is happening?
Thanks in advance for any help that you might be able to give me.
PeteM
<!doctype html>
<html lang="en" >
<head>
<title>PAGE TITLE</title>
<meta charset=“utf-8"/>
<style>
.content {
margin: 0px auto; /*center the content all browsers except IE*/
text-align: center; /*center the content IE*/
width: 1212px;
}
body { background-color:yellow; }
.table-one { display: table; width: 1212px; }
.row-one { display: table-row; width: 1212px; }
.column-one { display: table-cell; width: 256px; }
.column-two { display: table-cell; width: 956px; }
.image-one {
height: 256px;
width: 256px;
background-color:red;
}
.image-two {
height: 256px;
width: 256px;
background-color:green;
}
.image-three {
height: 256px;
width: 256px;
background-color:purple;
}
.image-four {
height: 256px;
width: 256px;
background-color:tan;
}
.image-five {
height: 256px;
width: 256px;
background-color:maroon;
float:right;
}
.top-middle {
background-color:pink;
width: 700px;
height: 256px;
}
.bottom-right {
width: 956px;
height: 768px;
background-color:blue;
}
</style>
</head>
<body>
<div class="content">
<header>
headerheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader
</header>
<section class="table-one"><!--table-->
<div class="row-one"><!--table row 1-->
<div class="column-one"><!--table COL 1-->
<div class="image-one"></div>
<div class="image-two"></div>
<div class="image-three"></div>
<div class="image-four"></div>
</div><!--END table COL 1-->
<div class="column-two"><!--table COL 2-->
<div class="image-five"></div>
<div class="top-middle"></div>
<div class="bottom-right"></div>
</div><!--END table COL 2-->
</div><!-- END table row 1-->
</section><!--END table-->
<footer>
footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooter
</footer>
</div> <!-- END content -->
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div class="content">
<header>
headerheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader
</header>
<section class="table-one"><!--table-->
<div class="row-one"><!--table row 1-->
<div class="column-one"><!--table COL 1-->
<div class="image-one"></div>
<div class="image-two"></div>
<div class="image-three"></div>
<div class="image-four"></div>
</div><!--END table COL 1-->
<div class="column-two"><!--table COL 2-->
<div class="image-five"></div>
<div class="top-middle">
Welcome to My Home on the Web!<br />
<br />
I am a Multimedia Computer Programmer and Web Designer and I am currently living in New York City.<br />
<br />
Hello to all of the visitor's to this site. It is designed to be a place to view all of my current projects.<br />
<br />
Below are links to games and multimedia projects that I have recently created...
</div>
<div class="bottom-right">
list item 1<br />
list item 2<br />
list item 3<br />
list item 4<br />
list item 5<br />
</div>
</div><!--END table COL 2-->
</div><!-- END table row 1-->
</section><!--END table-->
<footer>
footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooter
</footer>
</div> <!-- END content -->
<body>
</html>