Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2014
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problems creating a table-less web page design

    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-colorurple;
    }
    .image-four {
    height: 256px;
    width: 256px;
    background-color:tan;
    }
    .image-five {
    height: 256px;
    width: 256px;
    background-color:maroon;
    float:right;
    }

    .top-middle {
    background-colorink;
    width: 700px;
    height: 256px;
    }
    .bottom-right {
    width: 956px;
    height: 768px;
    background-color:blue;
    }
    </style>

    </head>
    <body>
    <div class="content">
    <header>
    headerheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderhead erheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader
    </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>
    footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfoot erfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooter
    </footer>
    </div> <!-- END content -->
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div class="content">
    <header>
    headerheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderhead erheaderheaderheaderheaderheaderheaderheaderheaderheaderheaderheader
    </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>
    footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfoot erfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooter
    </footer>
    </div> <!-- END content -->
    <body>
    </html>

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Seems like it'd be easier to remove the display:table-cell - you haven't really got a table there or anything like it, just some columns.

    Have a try making the following changes:

    Code:
    .table-one {
        /*display: table;*/
        width: 1212px;
    }
    
    .column-one {
        /*display: table-cell;*/
        float: left;
        width: 256px;
    }
    
    .column-two {
        /*display: table-cell;*/
        margin-left: 256px;
        width: 956px;
    }
    Setting all the heights as you have currently will work but will make changes to your layout more complex then they need to be as multiple changes will be needed to incorporate (say) additional text.

    If you have to stick with table cells:

    Code:
    .column-two {
        display: table-cell;
        vertical-align: top;
        width: 956px;
    }
    Last edited by SB65; 01-31-2014 at 11:09 AM.
    Use the W3C HTML Validator and CSS Validator to check your code and Firebug to see what css is applied to an element
    Read Steve Krug's book Don't Make Me Think - essential reading on web usability
    I don't recommend much, but I do recommend Clook for UK web hosting


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •