How do I wrap several buttons inside a TD element


Tags: html,css

Problem :

I'm trying to alter this collection of buttons to wrap at the right edge of the screen. Currently they do not respect the right border of the screen and they just continue off the edge (well they aren't visible anyway). How do I force these buttons to automatically wrap to a new line within the table? The screen is re-sizable so I can't just set them statically.

Thanks.

<td>    
<table class="clsActionTable">
    <tr>
        <td style="text-align:center;">
            <button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
            <button class="clsActionButton" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
            <button class="clsActionButton" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
            <button class="clsActionButton" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
        </td>
    </tr>
</table>

and the CSS...

.clsActionTable
{
    width: 100%;
    color: white;
    font-size: smaller;
}

.clsActionButton
{
    width: 128px;
}
#idActionPlane
{
left: 0px;
bottom: 0px;
width:100%;
background-color: #4E5A81;
color: White;
}


Solution :

The reason you are not seeing it wrap in IE9 is because your original code http://jsfiddle.net/VdBGe/ automatically drops into compatibility mode. If you un-check it and put it back to standards mode you will see it wrap. It wraps for IE8+9 but not IE7.

To make it wrap in IE7 using your original code, you need to wrap the buttons in a div and set width:100%. Live Example: http://jsfiddle.net/VdBGe/1/

HTML:

<td style="text-align:center;">
    <div id="btnwrap">
        <button class="clsActionButton" id="idAddButton" onclick="idAddButton_onclick();">Add</button>
        <button class="clsActionButton" id="idEditButton" onclick="idEditButton_onclick();">Edit</button>
        <button class="clsActionButton" id="idDeleteButton" onclick="idDeleteButton_onclick();">Delete</button>
        <button class="clsActionButton" id="idManageRowButton" onclick="idManageRowButton_onclick();">Add Row</button>
    </div>
</td>

CSS:

#btnwrap{
    width: 100%;
}

    CSS Howto..

    How to arrange div structure with radius using CSS

    How to cancel HTML “onfocus” behavior?

    How to set a single value of transform while leaving the other values?

    How to squash a div vertically and keep element below 100% on screen

    how to always display empty tags, is there a css property for this?

    How to fix this CSS 3 code to make it working properly on the server?

    How to show the text overflow after showing two lines in the div using css?

    How to include a CSS link if a call isn't done via AJAX?

    How do I go about dynamically splitting a body of text into two even columns with plain Javascript (no JQuery)?

    How can I center my

    when there is an next to it?

    How to create a horse-shoe-like gauge using CSS

    How to separate css style from common to different statement

    How to set the background image width using CSS?

    How to get all select element in JQuery

    How can I give the current page's link a disabled look?

    How to edit CSS file in Objective-C

    How to reposition my jQuery popup?

    How to stop Table within a Table inheriting style of first table?

    How do you modify wordpress css for posts?

    How to make hover using jquery without CSS?

    inline svg - how to apply browser default styles to xhtml in foreignObject?

    How to vertically align numbers of ol?

    css how to make two div side by side

    How do I position text within a box with css?

    CSS: How to crop image that has any size?

    How to add font awesome in CSS

    How to center equally spaced anchor tags in

    How to change all CSS file into SCSS

    How to stack multiple divs on top of each other and each have a height of 100%

    Cannot get Font Awesome Images to Show