DIV help.

[~J~]

Sorry for the dumb questions today, resident designer off sick and muggins here is having to carry the torch!

I'll try and explain this as best as I can, bear with me:

I've got a rectangular 'table' on a page made with DIV's. The table has the following elements:

Top-Left, Top, Top Right.
Left, middle, Right.
Bottom-Left, Bottom, Bottom Right.

Each element, apart from the 'middle' one has a graphic:

Top graphics all have a height of 16px's, but varying widths.
Left and right all have a height of 16px's but varying widths.
Bottom graphics all have a height of 15px's but varying widths.

What I'm trying to do is to layout the DIV's accordinly but having some problems, especially when it comes to automatically adjusting the width of the middle elements.

For example, the Top Right element is 23px's wide by 16px's high, but the Right one should align perfectly, full flush to the right, but it's width is 8px's by 16px's.

So setting the "Top" element to a width of 90%, and the middle element to a width of 90% doesn't work and of course the Right element is shifted to the left slightly.

I note there's an Auto value for the Width attribute, but that seems to make everything go off the page.

I've also tried enclosing everthing in a surrounding DIV, and making all middle elements 100% 'hoping' that the fixed widths of all other elements would 'jiggle' the sizing about - alas, doesn't work.

IF it helps, the code is here:

<div style="height:226px;">
<div>
<div style="width:26px; height:13px; float:left; background-image:url('07.jpg')"></div>
<div style="width:90%; height:13px; float:left; background-image:url('08.jpg');"></div>
<div style="width:21px; height:13px;"><img src="11.jpg" width="21px" height="13px" alt=""/></div>
</div>
<div>
<div style="width:26px; float:left; height:200px; background-repeat:repeat-y; background-image:url('14.jpg');"></div>
<div style="float:left; width:auto;">
<table class="bodytext">
<tr><td><asp:Label id="lblCreatedDate" runat="server" Text="Created Date"></asp:Label></td><td><asp:Label ID="lblCreatedDateValue" runat="server" Text='' ></asp:Label><br /></td></tr>
<tr><td><asp:Label id="lblName" runat="server" Text="Name" ></asp:Label></td><td><asp:TextBox ID="txtName" runat="server" Text='<%# Eval("Name") %>' ></asp:TextBox></td></tr>
<tr><td><asp:Label id="lblDescription" runat="server" Text="Description"></asp:Label></td><td><asp:TextBox ID="txtDescription" runat="server" Text='<%# Eval("Description") %>'></asp:TextBox></td></tr>
<tr><td><asp:Label ID="lblUploadFile" runat="server" Text="Upload file:"></asp:Label></td><td><asp:FileUpload ID="fuFileUpload" runat="server" /></td></tr>
</table>
</div>
<div style="width:12px; height:200px; background-repeat:repeat-y; background-image:url('17.jpg');"></div>
</div>
<div>
<div style="width:26px; height:15px; float:left; background-image:url('21.jpg')"></div>
<div style="width:90%; height:15px; float:left; background-image:url('22.jpg');"></div>
<div style="width:21px; height:15px; background-image:url('25.jpg');"></div>
</div>
</div>

Any thoughts?

 

[~J~]

Well the TL, TR, BL and BR do have the DIV's sized exact yes.
Likewise the Left DIV has it's width sized exact, as with the Right DIV.
The Top and Bottom have their heights sized exact, it's just the width that will fluctuate.