www.webdeveloper.com
Results 1 to 5 of 5

Thread: Lyout help please

  1. #1
    Join Date
    Apr 2005
    Location
    Essex, United Kingdom
    Posts
    187

    Lyout help please

    Hi. I am trying to create a tableless layout, but am having a few problems with the finer points. Can anyone please help me fill in gaps?

    Please refer to the attachment, and the requirements below. It takes a bit to explain, but is relatively simple i think.
    • All columns must be of equal height, and should be 500px. (the content in column A will always be 500px deep)
    • The height of areas B and C are not important, but the total height must be equal to columns A and D
    • The content in area B has to be aligned at the top and the content in area C has to be aligned at the bottom
    • The content in area D has to be aligned at the bottom
    If anyone can help, that would be great.

    thanks
    Attached Images Attached Images

  2. #2
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    There are probably different ways of approachng this, but it does depend on what the content is. Trying to make containers into which content will be placed later is table-layout thinking, and a solution that works for some content may not work for other content types. Tableless layouts are all about marking up the content with appropriate elements and then styling it the way you want.

    If you can post up a pic of what you want this to finally look like, including the content, then we can evaluate the structure and will have more of an idea of the best way to mark up and style this.

  3. #3
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    This is rather like a demo I did some months ago, here:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <title></title>
    <style type="text/css">
    * {border:0; padding:0; margin:0;}/* Set everything to "zero" */
    body {height:100%; font-size:1.0em;}/* Assist IE rendering */
    h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
    font-style:normal; font-variant:normal; font-weight:normal; margin-left:16px;}/* indent all, 16px */
    h1{font-size: 1.93em;}
    h2{font-size: 1.72em;}
    h3{font-size: 1.52em;}
    h4{font-size: 1.42em;}
    h5{font-size: 1.32em;}
    h6{font-size: 1.21em;}
    </style>

    <script type="text/javascript"><!--
    // -->
    </script>
    </head>
    <body>

    <div style="width:760px; height:383px; border:2px solid silver; padding:1px; margin:10px auto;"><!-- "wrapper" -->

    <!-- next: upper-left quadrant -->
    <div style="width:502px; height:200px; border:1px solid blue; float:left;">
    <p>Upper-left quadrant text</p>
    </div>

    <!-- next: upper-right quadrant -->
    <div style="width:253px; height:155px; border:1px solid green; float:right;">
    <p>Upper right quadrant text</p>
    </div>

    <!-- next: REQUIRED: do not remove -->
    <div style="clear:right;"></div>

    <!-- next: lower-right quadrant -->
    <div style="width:253px; height:228px; border:1px solid red; float:right;">
    <p>Lower right quadrant text</p>
    </div>

    <!-- next: REQUIRED: do not remove -->
    <div style="clear:left;"></div>

    <!-- next: lower-left quadrant -->
    <div style="width:502px; height:180px; border:1px solid green; float:left;">
    <p>Lower-left quadrant text</p>
    </div>

    </div><!-- end "wrapper" -->


    </body>
    </html>
    I build for: Firefox and tweak for IE

  4. #4
    Join Date
    Apr 2005
    Location
    Essex, United Kingdom
    Posts
    187
    Thanks for the replies guys. I have most of the layout done now, with the exception of one thing. I cannot get the content of a div to align at the bottom. If I can do this, my I have reached my goal. Is this possible?

  5. #5
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Quote Originally Posted by RikComery
    ... I have most of the layout done now, with the exception of one thing. I cannot get the content of a div to align at the bottom. If I can do this, my I have reached my goal. Is this possible?
    By posting your code, so it can be examined.
    I build for: Firefox and tweak for IE

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