...

View Full Version : Div's minimum width?



Tehaxor
11-06-2006, 08:37 PM
A div which has no speficied width, will be as width as the parent element allows.
Is there a way to make the div as minimum width as the content inside the div allows? Just like opposite way than it behaves normally.

_Aerospace_Eng_
11-06-2006, 09:25 PM
The only way to do this is to either float the div to the left or make it position:absolute.

Tehaxor
11-06-2006, 09:37 PM
The only way to do this is to either float the div to the left or make it position:absolute.
Thanks a lot, that helped.

rpgfan3233
11-06-2006, 09:46 PM
The only way to do this is to either float the div to the left or make it position:absolute.

Wouldn't "display:inline" also work, assuming no block-level properties are required, such as text-align ?

croatiankid
11-06-2006, 10:02 PM
Wouldn't "display:inline" also work, assuming no block-level properties are required, such as text-align ? I also ask this

_Aerospace_Eng_
11-07-2006, 12:04 AM
@rpgfan Yeah you could do that but then why even use a div? Why not a span?

If the element was display:inline and required borders and such then it wouldn't work because margin nor padding could be applied to the inline element. A border might also not work correctly. IE has inline-block but it doesn't work with other browsers. Some other browsers support display:table-cell as well. Check out this example. Notice how the top padding is pretty non existant, as well as margin and border. You could add top padding to the #container but what if you didn't want everything to be so far from the top?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin:0;
padding:0;
}
#container {
text-align:center;
position:relative;
}
.box {
padding:10px;
border:1px solid #000;
background:#EEE;
margin:50px 0;
}
#fleft {
float:left;
}
#abs {
position:absolute;
left:0;
top:200px;
}
#inbox {
display:inline;
}
.clear {
clear:both;
line-height:0px;
font-size:0;
}
</style>
</head>
<body>
<div id="container">
<div class="box" id="fleft">This is a box that is floated left</div>
<div class="box" id="inbox">This is a box with display:inline;</div>
<div class="box" id="abs">This is an absolutely positioned box</div>
</div>
</body>
</html>

rpgfan3233
11-07-2006, 12:30 AM
@rpgfan Yeah you could do that but then why even use a div? Why not a span?

I agree with that point. I can think of one case, however, in which it may be beneficial to use a div with "display:inline" rather than a span: validation. For example, you might need

<div class="foo">
<ul class="bar">
<!-- skipping some stuff -->
</ul>
</div>
where "div.foo { display:inline; }" is defined. If you used a span in place of div.foo, it would not validate.

Of course, in that case, why would you need a parent element to display as inline-level with a child element displaying as a block-level element, right? I agree with you because there is not an example I can think of to make a decent counterexample and what you state also makes sense. :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum