Jump to content

Problems creating a table-less web page design

pmingione

By pmingione
in HTML/XHTML

 Share

Recommended Posts

pmingione Newbie

pmingione

Posted
Posted
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>

 

Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted (edited)

You lose me as soon as you start making divs into parts of tables rather than using float. Styling divs as tables isn't the simple, standard approach. What exactly do you mean when you say you want a "tabular layout?" For a standard floated div layout you would do something like this...

<!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; }.column-one { float:left; width: 256px; }.image-one {float: left;height: 256px; width: 256px; background-color:red;}.image-two {float: left;height: 256px; width: 256px; background-color:green;}.image-three {float: left;height: 256px; width: 256px; background-color:purple;}.image-four {float: left;height: 256px; width: 256px; background-color:tan;}.image-five {float: left;height: 256px; width: 256px; background-color:maroon;float:right; } .top-middle {float: left;background-color:pink; width: 700px; height: 256px;}.bottom-right {float: left;width: 956px; height: 768px; background-color:blue;}footer{ clear:both;}</style> </head><body><div class="content"><header>headerheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader</header><section class="table-one"><div class="column-one"> <div class="image-one">1</div> <div class="image-two">2</div> <div class="image-three">3</div> <div class="image-four">4</div> </div><!--END column-one--><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="image-five">5</div> <div class="bottom-right">bottom-right</div> </section><!--END table-one--><footer>footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooter</footer></div> <!-- END content --></body></html>
Edited by davej
Link to comment
Share on other sites
davej Devoted Member

davej

Posted
Posted (edited)

But what is the point of that? Why not just use a table? There is nothing evil about tables. You just shouldn't use them for the entire layout.

Edited by davej
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...