tags:

views:

73

answers:

3
+1  Q: 

An html challenge

http://i.imgur.com/PqmVu.jpg

A container that contains a box centered horizontally and it also contain a line centered vertically beside the left or the right side of the box. The width of the container may change dinamically so the line should also change its width (automatically). I hope the image explains that well.

A: 

If the height is static and the only thing that changes is the width, just make the line a background repeating image of a line.

Moses
Yes, the height may be static but the problem with your suggestion would be a line spreading thru the whole box. I need the line to be whether at the right or at the left.
Orcut
And also, I need a line to be an html element not an image.
Orcut
+2  A: 

this works for me

<table cellspacing="0" cellpadding="0" style="height: 100px; width: 500px; background: none repeat scroll 0% 0% Red;">
<tbody><tr>
<td style="width: 50%;">
<div style="border:solid 1px black;"></div>
</td>
<td>
<div style="width: 100px; height: 100px; background: none repeat scroll 0% 0% blue;">test</div>
</td>
<td style="width: 50%;">

</td>
</tr>
</tbody></table>
Vinay B R
This might be a solution. And actually, I've considered it but hoped for a cleaner way.
Orcut
And I think I'll go for it if I do not find anything better.
Orcut
Have you tested it in Google Chrome? It does not seem to work in GC.
Orcut
Neither does it in Safari for Windows.
Orcut
works on chrome as well. what problem did u come across
Vinay B R
A: 

This seems to work for me. I assumed the box is a fixed width, so I had to make the line 50% and hide it behind the box.

css:

.container
{
   height:100px;
   width:30%;
   position:absolute;
   left:100px;
   top:100px;
   border:solid black 1px;
}

.box
{
   position:relative;
   width:100px;
   height:100px;
   margin:0px auto;
   background-color:#eee;
}

.line
{
   width:50%;
   background-color:green;
   position:absolute;
   left:0px;
   top:50%;
   height:10px;
   margin-top:-5px; /*half the height*/
}

html:

<div class="container">
   <div class="line"></div>
   <div class="box"></div>
</div>
david