Forum Moderators: not2easy
<body>
<ul>
<li>
<span class="col1">0</span>
<a href="#" class="col2">abcdefg</a>
<span class="col3">lmnop</span>
</li>
</ul>
</body>
body > ul {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 45px;
width: 100%;
min-height: 372px;
}body > ul > li {
position: relative;
margin: 0;
border-bottom: 1px solid #E0E0E0;
padding: 8px 0 8px 10px;
font-size: 20px;
font-weight: bold;
list-style: none;
}
.col1
{
position: absolute;
left: 0;
text-align: center;
width: 40px;
margin: 0 0 0 -10px;
}
.col2
{
margin: -8px 0 -8px 36px;
padding: 8px 10px 8px 0px;
width: 200px;
}
.col3
{
position: absolute;
right: 10px;
width: 120px;
text-align: right;
font-size: 16px;
}
Basically what I want is three columns. A number in the left column, some right-aligned text on the right, and the stuff in the middle is a hyperlink. This is designed for touch screen (iPhone), so it is really important that the clickable area for the hyperlink reach all the way across, at least to the text on the right. Right now it all looks right, but the clickable area is just over the text in the middle column.
I can sort-of accomplish what I want with padding, but then when I do have longer text in the middle it starts wrapping and leaving a big blank space between the middle and right columns.
Obviously I'm a beginner with CSS. I'm amazed at how difficult this apparently is. I must be missing something.
I'm starting to get the urge to brute force it with a table but I hear those are slow, bad, and unnecessary.
Pointers would be greatly appreciated.
.col2
{
display:block;
margin: -8px 0 -8px 36px;
padding: 8px 10px 8px 0px;
width: 200px;
}
Also, you might want to look into floats.
dc
Latest HTML:
<body>
<ul>
<li>
<span class="col1">0</span>
<a href="#"><span class="col2">abcdefg abcdefg abcdefg abcdefg</span><span class="col3">lmnop</span></a>
</li>
</ul>
</body>
latest CSS:
body > ul {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 45px;
width: 100%;
min-height: 372px;
}body > ul > li {
position: relative;
margin: 0;
border-bottom: 1px solid #E0E0E0;
padding: 8px 0;
font-size: 20px;
font-weight: bold;
list-style: none;
}
body > ul > li > a {
display: block;
margin: -8px 0 -8px -10px;
padding: 8px 10px 8px 10px;
text-decoration: none;
color: inherit;
}
.col1
{
float: left;
left: 0;
text-align: center;
width: 40px;
margin: 0 0 0 -10px;
}
.col2
{
}
.col3
{
display:block;
float: right;
right: 10px;
max-width: 120px;
text-align: right;
vertical-align: top;
font-size: 16px;
}
<a href="#"><span class="col3">lmnop</span><span class="col2">abcdefg abcdefg abcdefg abcdefg</span></a>
