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
2010-09-21 05:02:55
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
2010-09-21 05:06:46
And also, I need a line to be an html element not an image.
Orcut
2010-09-21 05:11:09
+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
2010-09-21 05:22:15
This might be a solution. And actually, I've considered it but hoped for a cleaner way.
Orcut
2010-09-21 05:42:33
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
2010-09-21 05:56:38