Difference between replaced and non-replaced elements? [Archive]

wishiwasageek

05-31-2005, 07:47 AM

I'm trying to do the right thing and put the appropriate units for width in my css - b-u-u-t
I dont' understand the definitions:

http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width

What is the difference between replaced and non-replaced elements (inline)?

And my real questions is...dadah!
What I want: 2 divs within another containing div (am I allowed to say that?) to each take up 50% width of the containing div.

following is the code, what would be the better way of specifying width, length, height etc. Should be compatible for both IE 6.0 and Firefox 1.03-4

div class=1 should have max width of 600px
div class=2 should have max widths of about 300px and be inline.

<html>
<head>
<title>sample_delete</title>
<style type="text/css">

.1 { border:1px blue solid;
width:600px;
height:100px;
background-image:url(/Images/chapter%20heading%20banner.gif);
background-repeat:no-repeat;
background-position:top left; }

.2 { background-color: transparent;
display: inline;
border:1px red solid;
padding-top: 75px;
margin-bottom:0pt;
height:100px;
vertical-align:bottom;}

#left { text-align:left;}

#right {text-align:right;
}

</style>
</head>

<body>
<div class="1">
<div class="2" id="left"><h3>This is div1</h3></div>
<div class="2" id="right"><h3>some more text<h3></div>
</div>

</body>
</html>

ok thanx.
WISWAG :o

mwinter

05-31-2005, 12:12 PM

What is the difference between replaced and non-replaced elements (inline)?If you read the definition in the Definitions section (3.1) of the specification, things will be a lot more clear. Essentially, replaced elements are img, object, and the various form controls. These all have intrinsic dimensions (another defined term). For instance, all images have a size that was determined when the image was drawn.

What I want: 2 divs within another containing div (am I allowed to say that?) to each take up 50% width of the containing div.Again, your best solution would probably be to float the elements (left this time). However, you should use a little less than 50% width to account for rounding errors. Even half a percent should do.

<div class="1">Class names must begin with a letter.

By the way, have you seen my answer to your expanding/contracting content question?

Mike