Tue, 2004-05-18 17:42
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...
Tue, 2004-05-18 17:54
#1
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....
Tue, 2004-05-18 21:40
#2
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>
Fri, 2004-05-21 14:40
#3
Sizing a DIV horizontally to content?
Ah yes, very obvious - bit messy though, I can't abide surplus markup as presentational hacks 
Fri, 2004-08-27 14:46
#4
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]
Fri, 2004-08-27 21:18
#5
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.