[thelist] css/div problem....

ben morrison morrison.ben at gmail.com
Fri Jun 24 12:05:39 CDT 2005


> i have the following sample html, and the test css. i'm trying to figure out
> how to get the 'tab' css to allow the text in the '<a>' boxes to wrap if the
> text extends beyond a certain width. i'm only concerned with the 'tab'
> portion of the html, so i left out the rest of the css file that i'm using.

you need to set the tabs to display:block;

beacuse of the box model you will have difficulties using padding and width.

you could/should use a list for these links.

<ul class="tabs">
<li><a href="#">1st link</a></li>
<li><a href="#">2nd link</a></li>
</ul>

that way you have more hooks to help you declare widths and padding.

css

ul.tabs {
margin:0;
padding:0;
list-style:none;
float:left;
width:100%;
}
ul.tabs li {
width:30px;
display:block;
float:left;
border:1px solid #ccc;
margin:0;
padding:0;
}
ul.tabs li a {
padding:5px;
display:block;
}

hope that helps.

ben


More information about the thelist mailing list