www.webdeveloper.com
Results 1 to 2 of 2

Thread: Need help with divs inside table and td tags

  1. #1
    Join Date
    Nov 2010
    Posts
    2

    Need help with divs inside table and td tags

    Hello,

    I need help placing divs inside tables; specifically, inside td tags.

    I have a table with 3 columns. Inside the 2nd column, I wish to put at least a few divs: a header, a footer, and the main area. The 1st and 3rd columns serve as bookends with a specific color and density pattern.

    I have to adapt a website that appears to have had a very particular background covering the entire viewport, and over this background is what I'll call the main area, which includes pictures and text. In this main area, it contains its own background of white. So, the white has replaced the particular background I talked about. Essentially, the "main" area is, say, 80% wide, 100% tall, and the particular background takes up the remaining 20% wide, 10% wide for the "first column" and 10% wide for the "third column".

    The website to be adapted doesn't have columns in this fashion. But I don't have a means for obtaining this particular background. So, I had decided to use a 3-column table layout to simulate the "main" area and this particular background. I was given a copy of the page in pdf format. Using this, I copied a small sample of the background and saved it as an image. Then, I inserted this image into the 1st and 3rd columns in my website. I wish I could insert a picture of the website, because I don't think I'm doing an adequate job of giving the visual.

    Anyway, I tried using all divs to adapt the website, but I don't know how to simulate the effect of tiling the image I copied/saved using a div and preserving a liquid layout, contrast with using tables. With divs, I had to specify the height to tile the image, but what good is that when I want to make a liquid layout that uses percentages? If there is a way to do it with all divs and no tables, I'm all ears.

    So, what I have is a 3-column table and the 2nd column will contain divs, which will make up the "main" area from the website I have to adapt. My question is this: Is there a way to keep a liquid layout with divs inside table data tags AND not have the contents collapse or expand, as the viewport window shrinks or expands? The shrinking/expanding is a big issue, because I noticed the table changes size, as I shrink the browser window. But then anything in the divs inside column 2 spill over.

    I would appreciate any help.

    Thank you very much.

  2. #2
    Join Date
    Nov 2010
    Posts
    2
    Here is the HTML, if that helps:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Test</title>
    <style type="text/css">
    <!--

    #LeftBG
    {
    float: left;
    width: 67px;
    height: 100&#37;;
    background-image: url(pictures\BG.jpg);
    background-position: left top;
    background-repeat: repeat;
    }

    #RightBG
    {
    float: left;
    width: 67px;
    height: 100%;
    background-image: url(pictures\BG.jpg);
    background-position: right top;
    background-repeat: repeat;
    }

    #main
    {
    float: left;
    }

    #header
    {
    margin-bottom: 10px;
    width: 985px;
    height: 128px;
    position: relative;
    top: 0%;
    left: 2.5%;
    background-image: url(pictures\banner.jpg);
    }

    #footer
    {
    clear: both;
    width: 1000px;
    height: 200px;
    position: relative;
    top: 90%;
    left 2.5%;
    }

    -->
    </style>

    </head>
    <body>

    <table style="position:relative" width="100%" height="100%" cellspacing="10" border="2" bordercolor="silver" width="100%" height="100%">
    <tr bordercolor="">
    <td bordercolor="red" width="67px" height="100%" style="background-image: url(pictures\BG.jpg);">
    </td>
    <td style="border: thick solid green; ">
    <div width="100%" height="100%">
    <div id="header">
    </div>
    <!--<DIV STYLE="width:100px; height:100px; position: relative; top: 100%;left: 0%; background-color: blue;">-->
    <div id="footer">
    <center>
    Copyright info
    </center>
    </div>
    </div>

    </td>
    <td bordercolor="red" width="67px" height="100%" style="background-image: url(pictures\BG.jpg);">
    </td>
    </tr>
    </table>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles