Solved

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

Posted on 2016-09-12
2
43 Views
Last Modified: 2016-09-13
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?
0
Comment
Question by:maqskywalker
2 Comments
 
LVL 22

Accepted Solution

by:
Kim Walker earned 500 total points
ID: 41795466
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
 
LVL 1

Author Closing Comment

by:maqskywalker
ID: 41796672
That solution was brilliant! You rock!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery CSS Scroll Issue 3 74
Login area of a page 4 33
Not showing page correctly 3 31
Why my select dropdown does not work? 8 27
This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

25 Experts available now in Live!

Get 1:1 Help Now