Welcome to WebmasterWorld Guest from 54.224.194.28

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)

New User

5+ Year Member

joined:Oct 10, 2008
posts: 3
votes: 0


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)

Senior Member

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

joined:Mar 30, 2003
posts:3719
votes: 0


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)

New User

5+ Year Member

joined:Oct 10, 2008
posts: 3
votes: 0


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)

Preferred Member

10+ Year Member

joined:Sept 4, 2002
posts:508
votes: 0


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)

New User

5+ Year Member

joined:Oct 10, 2008
posts: 3
votes: 0


You rock, thanks.