resizing a div with css so the width resizes with the content

Hi Experts,

I have these two examples

Example 1
https://jsfiddle.net/qfkhx9n1/

Example 1 looks like this:

example 1

Example 2
https://jsfiddle.net/ewyxnj4c/

Example 2 looks like this:

example 2
They are the same example except that in example 2 the content in the div with this id id="sub-left" and this id id="sub-right" is longer.

Is it possible to revise Example 2 so that the divs  id="sub-left" and id="sub-right" stay centered as they are now but if the inside the divs content is longer, the content just stays on the same line but the widths of the divs grows with the content.
So instead of wrapping to another line like example 2 is currently doing, the content will be on the same line?

Anyone know the syntax to do that?
LVL 1
maqskywalkerAsked:
Who is Participating?
 
Kim WalkerConnect With a Mentor Web Programmer/TechnicianCommented:
You will have to add another wrapper for each of your subtitles which are 50% width and floated left and right. Then you would float the actual subtitle divs the opposite direction within them and make those subtitle divs auto width.
<div id="wrapper">
	<div id="header">
		<span class="MainTitle">Welcome To the Sanitarium Everyone</span>
	</div>
	<div id="sub-main">
		<div id="sub-left-wrapper">
			<div id="sub-left">
				<span class="SubTitle">This is a much longer subtitle 1</span>
			</div>
		</div>
		<div id="sub-right-wrapper">
			<div id="sub-right">
				<span class="SubTitle">This is a much longer subtitle 2</span>
			</div>
		</div>
	</div>
</div>

Open in new window

#header {
	text-align: center;
}

#wrapper {
	border: 1px solid #ab29d8;
	margin: 0 auto;
	width: 100%;
}

#sub-main {
	border: 1px solid #08aa15;
	margin: 0 auto;
	width: 100%;
	overflow: hidden;
}

#sub-left-wrapper {
	width: 50%;
	float: left;
}

#sub-left {
	border: 1px solid #ff0000;
	text-align: center;
	float: right;
	width: auto;
}

#sub-right-wrapper {
	width: 50%;
	float: right;
}

#sub-right {
	border: 1px solid #0000ff;
	text-align: center;
	float: left;
	width: auto;
}

.MainTitle {
	color: #000000;
	font-family: Arial;
	font-weight: bold;
	font-size: 32px;
	text-align: center;
}

.SubTitle {
	color: #000000;
	font-family: Arial;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

Open in new window

0
 
maqskywalkerAuthor Commented:
That solution was brilliant! You rock!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.