ansaurus

Question

How to make 2nd element get rest of the horizontal space

Answer 1

A:

untested. you didn't mention colspans can't be used, so this solution uses it.

<table class="t">
    <tr>
        <td class="caption">Caption:</td>
        <td class="data"><input type="text" class="edt" /></td>
    </tr>
    <tr>
        <td class="caption">Caption:</td>
        <td colspan="3"><input type="text" class="edt" /></td>
        <td class="data"><a href="#"><img width="22px" src="cal.png" /></a>
        </td>
    </tr>
</table>

lyrae 2009-07-18 05:16:33

Unfortunately in my case this outer table structure is fixed, so I can't do it your way (

Artem 2009-07-18 05:39:43

Answer 2

A:

I have found that I can do it with tables. The question still remain, is it possible to do with div/css?

<html><head><title>width test</title>
<style type="text/css">
.t {
    width: 100%;
    table-layout:fixed; 

}
.caption {
    text-align: left;
    width: 35%;
}
.data {
    text-align: left;
    width: 65%;
}
.edt {
    width: 100%;
}
.joiningtable
{
    border-spacing:0px;
    border-collapse:collapse;
    width:100%;
    margin:0px;
    border:0px;
    padding:0px;
}
.joiningrest
{
    width:100%;
    margin:0px;
    border:0px;
    padding:0px;
}
.joiningfixed
{
    margin:0px;
    border:0px;
    padding:0px;
}
</style>
</head>
<body>
<table class="t">
    <tr>
     <td class="caption">Caption:</td>
     <td class="data"><input type="text" class="edt" /></td>
    </tr>
    <tr>
     <td class="caption">Caption:</td>
     <td class="data">
      <table class="joiningtable">
       <tr><td class="joiningrest"><input type="text" class="edt" /></td><td class="joiningfixed"><a href="#"><img src="cal.png" /></a></td><tr>
      <table>
     </td>
    </tr>
</table>
</body>
</html>

Artem 2009-07-18 05:39:54

Answer 3

A:

If you're still interested, it is possible but you need to use a little magic..

With absolute positioning, you can stretch those entry fields as wide as you like, or rather, you make them stretch to 100% and put them inside spans that stretch as wide as you like because input fields are stubborn things and won't behave otherwise.

<html>
<body>
<div style="background-color:#DDDDFF; position:absolute; left:10px; top:10px; right:10px; height:80px;">
<span style="position:absolute; left:10px; top:10px;">Caption</span>
<span style="position:absolute; left:10px; top:40px;">Caption</span>
<span style="position:absolute; left:70px; top:10px; right:10px;">
<input type="text" style="width:100%" />
</span>
<span style="position:absolute; left:70px; top:40px; right:40px;">
<input type="text" style="width:100%" />
</span>
<img style="width:22px; position:absolute; top:40px; right:10px;" src="cal.png" />
</div>
<div>
</div>

</body>
</html>

P.S. I've left the style definitions on the entities for simplicity. In a real-world case, I'd move them to a .css file of course.

GenericMeatUnit 2010-02-03 00:11:05

ansaurus

tags:

views:

answers:

How to make 2nd element get rest of the horizontal space

related questions