Div should be the width of his children, while the other child should wrap
I have a simple container that will contain some dynamic content. It should look something like this:
-------------------- ------------------------------- | This is the title | | This is a much longer title | -------------------- ------------------------------- | This is the text | | This is the text that will | | that will be put | | be put onto multiple lines | | onto multiple | | depending on the width of | | lines depending | | the title | | on the width of | ------------------------------- | the title | --------------------
I want "This is a header" to set the width of the container so that it is always on the same line. Other text should be wrapped across multiple lines.
JSFiddle to show the problem.
source to share
This works - http://jsfiddle.net/945n1ofs/
inline-block
to .container
make it as much as possible narrow, then white-space: nowrap
on .title
causes it to be as extensive as is necessary.
Then .container
relatively positioned with .content
inward absolute
means it .content
cannot affect width .container
as outside of document flow.
Finally, you just need to add a small layout top
for the child to account for the one-line header and move the borders to the header and child.
source to share
Richard,
You need to add javascript
Javascript
Include jQuery file also from Here
$(document).ready(function () {
var x = $('.title').outerWidth(true); // Find width of TITLE
$('.content').attr("style", "width:"+ x +"px"); // Assign the TITLE value to CONTENT
});
CSS
.container {
border: 1px solid black
}
.title {
border-bottom: 1px solid black;
display:inline-block;
}
source to share
I'm not sure if you can achieve this with pure CSS. But with some JS help it could be something like this:
CSS
.container {
border: 1px solid black;
display: inline-block;
}
.title {
float: left;
border-bottom: 1px solid black;
}
.content {
clear: both;
}
Js
$(document).ready(function () {
var titleWidth = $('.title').width();
$('.title').next('.content').width(titleWidth);
});
source to share