5 replies [Last post]
seb
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

How can I make a div's content area shrink to fit what it contains, whilst still exhibiting the characteristics of a block-level element?

I.e. I want it to only be as wide as it's content, but I don't want anything to appear alongside it, the default flow should be for the next element to be below it.

Sounds simple...

seb
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Sizing a DIV horizontally to content?

The two routes to make a div shrink to width is either

display: inline;

or

float: left; (or right)

But both of these result in the next element appearing alongside, which I don't want - and I don't want to apply "clear" to the next element since that's a bodge in my mind - I'd have to apply it to every possible next element....

Daybreak_0
Offline
Enthusiast
Sydney, Australia
Last seen: 18 years 39 weeks ago
Sydney, Australia
Timezone: GMT+10
Joined: 2003-11-15
Posts: 389
Points: 0

Sizing a DIV horizontally to content?

Here you go

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Float test</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 

<style type="text/css"> 

.blankdiv{}

.div1 { 
background-color: #89a;
display: inline; 
} 

.div2 { 
background-color: #a98; 
}
 
</style> 
</head> 
<body> 

<div class="blankdiv">
<div class="div1">This is the div and which is display: inline; and is wrapped in a normal div.</div> 
</div>
<div class="div2">This is the second div but it is not displayed inline and not wrapped by another div.</div> 

</div> 

</body> 
</html> 

The only way to learn is to do it yourself

seb
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Sizing a DIV horizontally to content?

Ah yes, very obvious - bit messy though, I can't abide surplus markup as presentational hacks Sad

seb
Offline
Enthusiast
Last seen: 15 years 29 weeks ago
Joined: 2003-09-20
Posts: 208
Points: 0

Sizing a DIV horizontally to content?

Just come back to this, and I still can't believe there's not a better way to shrink a block-level to fit it's content.

My current situtation:

I have a form, containing labels and fields. The width of its content is approximately 200px. I want to set a background colour and border on the form, which should give a nice 10px padding around the contents of it. Additionally I want it centered on the page.

			<style>
		.formRow
		{	margin:				10px;}
		.formRow label
		{	}
		
		.formRow input, .formRow select
		{	width:				250px;}
			
		form
		{	margin:				0 auto;
			width:				270px;
			text-align:			left;
			background:			#ddd;
			border:				2px solid blue;
			margin-bottom:		2em;}
	</style>
	
	<div style="text-align:center;">
		<form method="get" name="MediaSearch">
			<div class="formRow">
				<label for="s">Status:</label>
				<select name="s" id="s">
					<option value="">All</option>
					<option value="1"	>Active</option>
					<option value="255"	selected="selected">Pending</option>
					<option value="0"	>Stopped</option>
				</select>
			</div>
	
			<div class="formRow">		
				<label for="c">Category:</label>
				<select name="c" id="c">
					<option value="">All</option>
					<option value="a" >All (Excluding Events)</option>
		

						<option value="1">
							News
						</option>
						
						<option value="2">
							Events
						</option>
						
						<option value="3">
							Articles
						</option>
						
						<option value="5">
							Weekly Reports
						</option>
						
						<option value="6">
							Tips
						</option>
						
						<option value="7">
							Comments
						</option>
						
				</select>
			</div>
	
			<div class="formRow">		
				<label for="p">Containing Phrase:</label>
				<input type="text" id="p" name="p" size="30" maxlength="100" value="">
			</div>

			<div style="text-align:center;margin-bottom:10px;">
				<input type="submit" name="Cmd" value="Search">
			</div>
		</form>
	</div>

This works "as standard" but of course is subjected to being broken as soon as people start messign with font sizes etc.[/code]

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Sizing a DIV horizontally to content?

may not have understood the problem correctly but can you not just enclose divs content in a span and style the span whilst retaining the divs block properties? or am I being dumb!

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me