I have a section of a page layout which has the option of anywhere from 1 to 3 buttons in the right column, and the left column will have a title which may be a few words or even a paragraph.
The right column has the buttons and must take precedence and stay aligned to the right of the page width. The buttons must stay inline without wrapping. You can remove one or two buttons and it forces the text to the left, which is correct.
The left column needs to flow as close to the right column as it needs to in the case of wrapping text.
I've hit upon the idea of using CSS table display which works great in the case of long text, but for short text, the button column comes away from the right side.
Try removing all but 3 or 4 words of text and the buttons snap to the left. Am I taking the wrong approach here?
Here is the HTML, and here's a fiddle http://jsfiddle.net/MaureenDunlap/tvFbN/16/
<div id="wrapper">
<div id="container">
<div id="header_wrapper">
<div class="player_header_info">In vel purus ipsum. quam tempor auctor. Praesent ac leo magna, at condimentum felis. Nullam vel tortor semper metus bibendum iaculis. In consequat arcu aliquam nibh posuere non cursus eros dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla venenatis gravida mi eget vestibulum.
<div class="player_header_secondary">February 28, 2013</div>
</div>
<div id="buttons">
<div class="button_container">
<img src="http://www.likno.com/Images/lwbm/Single_Mesh_11.jpg" />
<img src="http://www.likno.com/Images/lwbm/Single_Mesh_11.jpg" />
<img src="http://www.likno.com/Images/lwbm/Single_Mesh_11.jpg" />
</div>
</div>
</div>
</div>
<div id="normal">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sit amet tortor at diam aliquet ornare eu nec leo. Phasellus ut blandit leo. Vivamus viverra velit eget quam tempor auctor. Praesent ac leo magna, at condimentum felis. Nullam vel tortor semper metus bibendum iaculis. In consequat arcu aliquam nibh posuere non cursus eros dictum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nulla venenatis gravida mi eget vestibulum. Phasellus elit ipsum, convallis a porttitor eu, blandit non justo. Pellentesque gravida, dui vel vulputate cursus, diam nisl eleifend massa, ullamcorper cursus nisl diam at erat. Nulla urna odio, vehicula et commodo sit amet, commodo at diam. Phasellus molestie tincidunt lacus, varius semper ligula tincidunt non. Nullam fermentum, enim ut dictum gravida, libero mauris pretium lacus, ac vehicula neque massa at mi.</p>
<p>Nam dignissim vehicula eros non viverra. Vestibulum non tellus sed ante placerat pharetra in vitae velit. Vestibulum eu lacinia urna. Nullam libero mauris, venenatis in condimentum auctor, porta tempor massa. In faucibus sapien sit amet tellus faucibus quis dictum eros pellentesque. Fusce id odio nec orci pellentesque bibendum. Curabitur viverra, nisl nec sodales elementum, lectus nisi vulputate leo, non cursus est libero eget odio. Curabitur a libero arcu. Etiam pellentesque mauris ut mi pellentesque euismod. Aenean sit amet consectetur diam. Curabitur nec velit leo. Sed feugiat lacinia sagittis.</p>
<p>Nam quis nulla quis lorem ornare semper nec eget orci. Proin justo lectus, suscipit rhoncus sollicitudin nec, dignissim eu mauris. Curabitur sit amet tortor in nisl vulputate placerat in nec lectus. Praesent euismod pellentesque augue, eu condimentum quam pellentesque et. Aliquam erat volutpat. Nam vitae leo et augue placerat lobortis et id magna. Curabitur sit amet ante id felis luctus iaculis. Quisque ac orci eu purus tempor consectetur vitae et dui. Mauris vehicula tincidunt ligula a cursus. Nunc imperdiet semper pulvinar. Phasellus iaculis laoreet quam, ac adipiscing mi pellentesque eu.</p>
<p>Nulla adipiscing fermentum leo, eget convallis nulla facilisis vel. Phasellus mollis ultrices risus vel volutpat. Nullam in enim mi. Duis eget ligula lectus, eget feugiat mauris. Duis at tortor enim, sit amet euismod turpis. Cras mattis tincidunt dolor nec feugiat. Mauris hendrerit lacus eu augue ultrices eu porttitor tellus semper. Ut mattis augue vitae velit tincidunt tristique.</p>
</div>
Here's my CSS:
#header_wrapper {
display: table;
border-collapse: collapse;
width:100%;
border:1px dotted #ccc;
}
.player_header_info {
display: table-cell;
vertical-align:top;
background-color: #e7dbcd;
padding-left:5px;
}
#buttons {
display: table-cell;
padding-left: 10px;
vertical-align:top;
}
.button_container {
position:relative;
display:inline;
white-space:nowrap;
}