ansaurus

Question

IE7 Defaults Elements to 100% Width

Answer 1

+5 A:

I think this is required by HTML/CSS. Block elements extend the full width unless there is something to stop them.

(FF has the same behaviour.)

Richard 2009-03-06 11:23:50

I hadn't realised this was default behaviour. I just tested it in FF and you're right, exactly the same.

Kezzer 2009-03-06 11:29:00

Answer 2

+1 A:

Don't divs default to 100% (of parents size) because they're blocks? You could always try changing display to inline: #test {display:inline;}

BeefTurkey 2009-03-06 11:26:09

Yeah display:inline is a bit of a pain in this case as padding's get overlapped. Good idea though.

Kezzer 2009-03-06 11:30:02

Answer 3

+1 A:

As Richard and BeafTurkey say, divs are block elements and will fill the width of the browser.

You can either use an inline element, such as a span

<span id="test">
    Test information!
</span>

or add some style to your div to force it to be inline

div#test { display: inline; }

Antony Scott 2009-03-06 11:31:31

Answer 4

+1 A:

It's not because the element has a background or a border that it expands to the full with of the parent, it's because it's a block element. The background or border just makes you see how large the element really is.

The default width is actually not "100%", but "auto". The practical difference is that the element including borders uses 100% of the width, instead of the width excluding the borders becoming 100% of the width (making the width including borders wider than it's parent).

If you don't want the element to use the available width you can make it a floating element. Then it will adjust itself to it's content.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
 <title>Test</title>
 <style type="text/css">
 #test1 {
  float: left;
  border:1px solid #ccc;
  background-color: #ddd;
 }
 #test2 {
  float: left;
  clear: both;
  border:1px solid #000;
  background-color: #ccf;
 }
 </style>
</head>
<body>
 <div id="test1">
  Test information!
 </div>
 <div id="test2">
  Test information!
 </div>
</body>
</html>

Guffa 2009-03-06 11:38:19

ansaurus

tags:

views:

answers:

IE7 Defaults Elements to 100% Width

related questions