All geek questions in one place

Align a <div> at the top and one at the bottom of the table

I am having problems with some vertical CSS positioning. I would like to create a page with the following location:

B AAA
  AAA 
  AAA
C AAA

A is the table (table) of data B aligned to the top of the grid C aligned to the bottom of the grid

How can I choose B and C?

EDIT: Sorry for the confusion about the Div / Table tags! I am ideally looking to do this with pure CSS, but if it will be a lot of work, I will agree to solve the problem of using a table.

+3
source share
6 answers

I just checked this (adds a div to the wrapper):

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css" media="screen">
            #wrapper{ position: relative; }
            #b, #c{ position: absolute; left: 0; width: 80px; background: #ccc; }
            #a{ margin-left: 80px; }
            #b{ top: 0; }
            #c{ bottom: 0; }
        </style>
    </head>

    <body>
        <div id="wrapper">
            <div id="b">Contents of B</div>
            <table border="0" id="a">
                <tr><th>Header</th><th>Header</th><th>Header</th></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            </table>
            <div id="c">
                Contents of C
            </div>
        </div>
    </body>
</html>

divs C B . , . , C B.

-, Firefox 3.

+6

- :

<table>
    <tr>
        <td style="vertical-align: top;">B</td>
        <td rowspan="2">grid</td>
    </tr>
    <tr>
        <td style="vertical-align: bottom;">C</td>
    </tr>
</table>
+4

, . , , - , , . ASP.NET , div . , , , JQuery margin-top div, . locationInfo - . num_events , .

var line_height = 24; // line height plus padding
$(document).ready(function () {
    // find out the most events in one day
    var most_events = 0;
    $(".locationInfo").each(function () {
        // get number of events in this cell
        var parent_td = $(this).parent();
        var num_events = parent_td.children().length - 2;
        if (num_events > most_events) {
            most_events = num_events;
        }
    });
    //alert(most_events);

    // loop through each (location info) div and reposition by setting margin-top
    // this could  be improved further by finding the most_events for each week instead of the whole month
    $(".locationInfo").each(function () {
        //$(this).css("top", 50);
        parent_td = $(this).parent();
        num_events = parent_td.children().length - 2;
        $(this).css("margin-top", (5 + (most_events * line_height)) - (num_events * line_height));
    });

});
+1

using some jQuery, I can get this working cross browser (including IE6). A border is required on the wrapper div to make IE6 work (maybe hasLayout?). Div B can be variable width and everything should be placed.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <style type="text/css" media="screen">
            #wrapper{ position: relative;  border: 1px solid #fff; }
            #b, #c{ position: absolute; left: 0; background: #ccc; margin: 0; }
        </style>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script type="text/javascript" charset="utf-8">
            $(function(){
                var b_width = $('#b').width();
                var a_height = $('#a').height();
                var c_height = $('#c').height();
                var c_top = a_height - c_height;
                $('#a').css({"margin-left": b_width + "px"});
                $('#c').css({top: c_top + "px"});
            })
        </script>
    </head>

    <body id="">
        <div id="wrapper">
            <div id="b">Contents of B</div>
            <table border="0" id="a">
                <tr><th>Header</th><th>Header</th><th>Header</th></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
                <tr><td>Data</td><td>Data</td><td>Data</td></tr>
            </table>
            <div id="c">
                Contents of C
            </div>
        </div>
    </body>
</html>
0
source

This can be achieved with a clean div design using this grid layout generator . 4 rows and 4 columns. leave the second and third grids of the 1st column blank.

0
source

this solution:

    <style type="text/css">
    table { width:500px; border-collapse:collapse}
    th, td { border:1px solid black; vertical-align: top;}
    th { width:100px; }
    td { background:#ccc; }
    .wrap { position:relative; height:100%; padding-bottom:1em; background:#aaa; height:200px;}
    .manage { text-align:right; position:absolute; bottom:0; right:0; }
    p{ margin: 0 0 5px 0; }
    </style>



<table>
    <tr>
            <th>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero.</th>
            <td><div class="wrap">
                <p><a href="http://www.pronexo.com">www.pronexo.com</a></p>
      <div class="manage">Edit | Delete</div></div></td>
    </tr>

    <tr>
            <th>Cras diam.</th>
            <td><div class="wrap"><p>Mauris tortor nulla, sagittis ut, faucibus eu, imperdiet ut, libero. Sed elementum. Praesent porta, tellus ut dictum ullamcorper, est ante condimentum metus, non molestie lorem turpis in sapien. Aenean id enim. Nullam placerat blandit ante. Aenean ac ligula.</p><div class="manage">Edit | Delete</div></div></td>
    </tr>
</table>
0
source

Source: https://habr.com/ru/post/1702362/

More articles:


All Articles