HTML Help
HTML Help Central . com

» Online Users: 117

0 members and 117 guests
No Members online
Most users ever online was 695, 02-16-2011 at 07:01 AM.

» Site Navigation

 > FAQ

» Domains For Sale

Results 1 to 2 of 2
  1. #1
    Join Date
    Jan 2014
    Posts
    1

    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
    Code:
    
    <!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>
    
    Last edited by coothead; 01-31-2014 at 04:24 AM.

  2. #2
    Join Date
    Sep 2007
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    369
    Hi there PeteM,

    and a warm welcome to these forums.

    Try it like this...
    Code:
    
    <!doctype html>
    <html lang="en" >
    <head>
    
    <meta charset="utf-8"/>
    
    <title>Page Title</title>
    
    <style>
    body { 
        background-color:#f0f0f0; 
     }
    #content {
        margin:0 auto;
        width:1000px;
        background-color:#fff; 
     }
    #header {
        padding:10px;
        box-shadow:inset 0 0 1px #000;
     }
    #column-one { 
        float:left; 
        width:206px; 
     }
    .image {
        float:left; 
        width:206px;
        height:206px; 
        box-shadow:inset 0 0 1px #000;
     }
    #column-two {
        float:left; 
        width:794px; 
     }
    #top-middle {
        float:left;
        width:568px; 
        height:186px;
        padding:10px;
        box-shadow:inset 0 0 1px #000;
        overflow:auto;
     }
    #bottom-right {
        clear:both;
        height:598px; 
        padding:10px;
        box-shadow:inset 0 0 1px #000;
      }
    #footer {
        clear:both;
        padding:10px; 
        box-shadow:inset 0 0 1px #000;
     }	
    </style>	
    
    </head>
    <body>	
    
    <div id="content">
    
    <div id="header">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis.
    </div>
    
    <div id="column-one">
    
     <div class="image">image 1</div>
     <div class="image">image 2</div>
     <div class="image">image 3</div>
     <div class="image">image 4</div>
    
    </div><!-- end #column-one -->
    
    <div id="column-two">
    
    <div id="top-middle">
    <p>Welcome to My Home on the Web!
    </p><p>I am a Multimedia Computer Programmer and Web Designer and I am currently living in New York City.
    </p><p>
    Hello to all of the visitor's to this site. It is designed to be a place to view all of my current projects.
    </p><p>
    Below are links to games and multimedia projects that I have recently created...
    </p>
    </div>
    <div class="image ">image 5</div>
    
    <div id="bottom-right">
    <ul>
     <li>list item 1</li>
     <li>list item 2</li>
     <li>list item 3</li>
     <li>list item 4</li>
     <li>list item 5</li>
    </ul>
    </div>	
    
    </div><!-- end #column-two -->
    
    <div id="footer">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis.
    </div>
    
    </div><!-- end #content -->	
    
    </body>	
    </html>
    http://www.htmlhelpcentral.com/messageboard/image.php?type=sigpic&userid=8698&dateline=1189772  724

Similar Threads

  1. Problems creating a background.
    By OM2 in forum HTML / XHTML / XML
    Replies: 1
    Last Post: 06-23-2006, 05:50 AM
  2. Table Design
    By savemyself in forum Miscellaneous
    Replies: 5
    Last Post: 06-17-2004, 03:13 PM
  3. Web page design
    By long7time in forum HTML / XHTML / XML
    Replies: 1
    Last Post: 10-11-2003, 02:42 AM
  4. Creating a table/frame for my news section.
    By Darkmist in forum HTML / XHTML / XML
    Replies: 9
    Last Post: 01-01-2003, 01:57 AM
  5. Creating an order page
    By Grimlock in forum HTML / XHTML / XML
    Replies: 1
    Last Post: 07-25-2001, 02:50 PM

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
  •  
Powered by vBadvanced CMPS v4.1.1