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...
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....
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>
Sizing a DIV horizontally to content?
Ah yes, very obvious - bit messy though, I can't abide surplus markup as presentational hacks
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]
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.