Welcome to WebmasterWorld Guest from 54.205.20.160

Forum Moderators: not2easy

Message Too Old, No Replies

I don't have to use a table for this do I?

making an anchor wide enough to fill available space

   
4:07 am on Oct 10, 2008 (gmt 0)

5+ Year Member



OK, here's my html:

<body>
<ul>
<li>
<span class="col1">0</span>
<a href="#" class="col2">abcdefg</a>
<span class="col3">lmnop</span>
</li>
</ul>
</body>

and here's my 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 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.

9:45 am on Oct 10, 2008 (gmt 0)

WebmasterWorld Senior Member dreamcatcher is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You can`t set a width for an <a> tag by default. You must make it a block level element first.

.col2
{
display:block;
margin: -8px 0 -8px 36px;
padding: 8px 10px 8px 0px;
width: 200px;
}

Also, you might want to look into floats.

dc

1:32 pm on Oct 10, 2008 (gmt 0)

5+ Year Member



Thanks! I'm further along now, but now I can't figure out why my text isn't wrapping around my float (instead my float block moves down to make room for the text). I've wrapped the <a> tag around the middle and right columns (I realized that's really what I need), and the right column is float: right. When there is alot of text in the middle column, I was hoping it would wrap, but instead the right column moves down to make room for it and it looks bad. Any pointers on how to get the right column to stay put?

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;
}

4:06 pm on Oct 10, 2008 (gmt 0)

10+ Year Member



If you put your right column in front of your middle column in the code it should stay stuck to the top:

<a href="#"><span class="col3">lmnop</span><span class="col2">abcdefg abcdefg abcdefg abcdefg</span></a>
8:29 pm on Oct 11, 2008 (gmt 0)

5+ Year Member



You rock, thanks.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month