CODEWITHSUNDEEP
htmlcssxhtmlpositioning
Steve
Steve

Reputation: 5923

CSS "valign" Positioning

<div>
<h1>Title</h1>
<table>
...
</table>
</div>

Now, the

<h1>

has a margin: 0; so it is at the top of the div. The height of the div is 300px.

However I'd like the table to be placed at the bottom of the div, eg. valign="bottom" but for the whole table.

Upvotes: 1

Views: 1178

Answers (3)

Darryl Hein
Darryl Hein

Reputation: 145027

Here is what Remy Sharp suggested:

<style type="text/css" media="screen">
#container { 
    position: relative; 
    margin: 0;
    height:300px;
    border:1px solid #000; 
}
#container h1 { 
    margin:0; 
}
#tableLayout { 
    position: absolute;
    bottom:0; 
    border: 1px solid #c00;
}
</style>

<div id="container">
    <h1>Title</h1>
    <table id="tableLayout">
      <tr><td>example cell</td></tr>
    </table>
</div>

Looks like it works!

I posted it here so it will always be here.

Upvotes: 3

Remy Sharp
Remy Sharp

Reputation: 4560

Try this: http://jsbin.com/emoce

Though it's similar to Darryl's solution. Except I'm not using position:absolute on the wrapping div, but rather position: relative to make the table's position absolute to that.

Upvotes: 2

Darryl Hein
Darryl Hein

Reputation: 145027

What about this:

<style type="text/css">
#container { 
    position: absolute; 
    margin: 0;
    height:300px;
    border:1px solid #000; }
#container h1 { 
    margin:0; }
#tableContainer { 
    position: absolute;
    bottom:0; }
</style>

<div id="container">
    <h1>Title</h1>
    <div id="tableContainer">
        <table id="tableLayout">
            <tr><td>...</td></tr>
        </table>
    </div>
</div>

The only problem is that both the container div and the tableContainer divs need to be absolute positioned. Not sure if this will work for your layout.

Upvotes: 0

Related Questions