width

I have a horizontal parent list. Some of the list items display a nested vertical list when clicked. How do I force the items in the vertical sub list to be the same width as the parent list item? See jsFiddle . HTML: <ul class="mainMenu horizontalMenu bulletless fullWidth bold"> <li class="showSubMenu"> <div>Resumes & Cover Letters ▾ </div> <ul class="mainSubMenu bulletless"> <li><a>Resumes</a></li> <li><a>Cover Letters</a></li> <li><a>Interviews</a></li> </ul> </li><li><a>Other Link</a> </li><li><a>Other Link</a></li> </ul>​ CSS: .horizontalMenu li{ display: inline-block; } .mainMenu > li{

I have an easy HTML template using bootstrap 3. Template has following structure: static header, static footer and content which is in the bootstrap's class "Container". In the middle of content I have bootstrap'w "Well" and i want it make looks like header and footer. I mean I want it to be the full width of the screen on any screen. I created easy fiddle. Here's a question, is there any way to override container's width inside this container? <header> <div class="container"> <div class="content"> </div> <div class="well"> </div> <div class="content"> </div> </div> <footer> iamnotsam ORIGINAL

I prepared a JSFiddle to explain/show you my problem: http://jsfiddle.net/nz96C/ It looks alright at first, but when I add some text to #firsttd the whole table overflows the parent div once the tds whole width is used. I know how to solve this problem with CSS ( #firstdiv {width:90px;overflow:hidden;} ) but I don't know the exact number of pixels (percentage doesn't work). Also I don't want the text in the first td to wrap. I hope you get my problem, I even have trouble explaining it in my first language. EDIT: My goal is to have a table in which it doesn't matter how long the text in the

I have a table in a div inside another div . The direct container has a width of 40% , and I want the table to be as wide as this div, by setting width: 100% . Relevant Markup This works most of the time, however depending on the width of the browser window, the width of the table is sometimes off by a single pixel: As you can see to the right, the border is a pixel to the left of that of the sibling div .info . These borders should align. Relevant CSS #userListContainer{width: 40%; float: left; } .info{display:block;line-height:22px; height:22px; padding-left:10px; } #userListContainer .info

I've made a table as such: <table style="width:1000px;"> <tr> <td>aaa</td> <td id="space"></td> <td class="fixed-width">bbb</td> <td class="fixed-width">ccc</td> </tr> </table> How would I do the CSS so that the b and c columns have a fixed width, the a column only takes as much space as needed, and the space column to expand to fill the rest of the table? I'm no CSS guru, but it just didn't seem right that there'd be no way to do this. This appears to work in Firefox and IE7. I have not checked other browsers. The first shrink-to-fit <col> is set (using CSS) to 0 width, so it shrinks to fit