I have a problem with the width of a div, I want to have the width of the div equaled to the width of it’s content.
The problem I have is, if I resize the browser down to a width of 1024 the content doesn’t float anymore, which is correct but I’d need the div around it to be as wide as it’s content.
Here is the code im using to test it:
Thanks in advance!!!
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Content with Menu</title>
<style type="text/css">
.box {
border: 1px solid #AAA;
border-radius: 4px;
padding: 10px;
margin-bottom: 20px;
display: -moz-inline-stack;
display: inline-block;
vertical-align: top;
zoom: 1;
*display: inline;
}
div.box ol li label {
font-size: 12px;
position: relative;
float: left;
width: 11em;
margin-right: 1em;
padding-top: 0.5em;
}
input {
border:1px solid #CCC;
font: 12px Arial,Helvetica,sans-serif;
width: 160px;
}
</style>
</head>
<body>
<div class="box">
<div class="box">
<ol>
<li>
<label>
TEST 1.1
</label>
<input type="text" disabled="disabled" />
<input type="text"/>
<span></span>
<span></span>
</li>
<li>
<label>
TEST 1.2
</label>
<input/>
</li>
<li>
<label>
TEST 1.3
</label>
<input/>
</li>
</ol>
</div>
<div class="box">
<ol>
<li>
<label>
TEST 2.1
</label>
<input type="text" disabled="disabled" />
<input type="text"/>
<span></span>
<span></span>
</li>
<li>
<label>
TEST 2.2
</label>
<input/>
</li>
<li>
<label>
TEST 2.3
</label>
<input/>
</li>
</ol>
</div>
</div>
</body>
To prevent such things as misplacement of content when window is resized to a low size, use
min-width.This way, you can expand your content, but you set a minimum width, so that your content doesn’t get “squeezed”…