Announcement

**venegal** · Apr 15, 2009, 08:54 AM

It might help to know what exactly you are trying to accomplish.

Without knowing anything about your code:
Neither one is correct, because it's "height", not "heigh", you should not use inline CSS, and nesting empty divs does not make a whole lot of sense.

Apart from that, it depends on whether you want the inner box to be one pixel smaller than the outer box or not.

**BoldUlysses** · Apr 15, 2009, 08:59 AM

You have typos:

Code:

<div id="some_div1" style="heigh[COLOR="Red"][B]t[/B][/COLOR]:200px; width:200px;">
  <div id="some_div2" style="heigh[COLOR="Red"][B]t[/B][/COLOR]:199px; width:199px;">
  </div>
</div>

Also, it's good practice to avoid "inline styles," or CSS styles that are called within the HTML tags. The better way is to make a style declaration in your document head, like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>Untitled</title>
	
	<style type="text/css">	
	
		#some_div1 {
			height:200px;
			width:200px;
		}
	
		#some_div2 {
			height:200px;
			width:200px;
		}	
		
	</style>
	
</head>

<body>

	<div id="some_div1">
		<div id="some_div2">
		</div>
	</div>
	
</body>
</html>

And the best way is to place all the CSS styles in an external stylesheet and link to it in your document head:

Code:

<link href="styles.css" rel="stylesheet" type="text/css" media="all" />

**joda** · Apr 15, 2009, 07:51 PM

Ok,
For first,sorry because I'm misspell the word "height" my mistake...
This is not exactly the answer for my question but it is very helpful for me because I'm a beginner in CSS.

The exactly question is: what is the right way to declare the height and width in some_div1 nested some_div2 box?
Should the some_div2 be smaller then his parent some_div1? or it can be the same high and with like his parent some_div1? How they professionals do that?

**venegal** · Apr 15, 2009, 08:17 PM

Really, it depends on what you are trying to accomplish. Why do you want to have two nested divs nearly the same size anyway? I suppose that's already the answer to your question: Professionals would try to define their problem very clearly to themselves before asking for solutions.

You might have border collapsing issues in a less than standards compliant browser and need a nested div that's 1px smaller than its wrapper. Or you might work with a Javascript library that makes you wrap an element in a container the same size in order to animate it.

All in all you can give your divs any dimensions you like, as long as it serves your purpose.

**BoldUlysses** · Apr 15, 2009, 08:18 PM

As far as CSS is concerned, all HTML elements can be divided into two types: Block-level and inline. Divs are block-level elements. They have certain properties that distinguish them from inline elements. One of those properties is the fact that block-level elements always expand to 100% the width of their parent element.

In other words, in this example:

Code:

#some_div1 {
	height:200px;
	width:200px;
}

#some_div2 {
	height:200px;
	[B][COLOR="Red"]width:200px;[/COLOR][/B]
}

the width of the nested div is unnecessary, as it will automatically expand to the width of its parent. You can, however, specify a different width if you like:

Code:

#some_div1 {
	height:200px;
	width:200px;
}

#some_div2 {
	height:200px;
	[B][COLOR="Red"]width:100px;[/COLOR][/B]
}

That works as you would expect it to.

Height is a different story (HTML was designed as a document-communication language, so vertical layout controls are weaker than horizontal ones). You'll have to specify that for your nested div; it won't automatically assume the height of its parent.

As for the rest, like venegal said, it all depends what you're trying to do. But the guidelines I gave above about where to place your code are "how the professionals do it," no matter your particular application.

**Kelly Johns** · Apr 17, 2009, 04:53 AM

Both way are correct, If you use first way that will easy and supportable in programing area.

Check this link also "www.w3schools.com", This will also help beater.

Thanks,
Kelly

Announcement

Simple question about DIV tag

Simple question about DIV tag

Comment

Comment

Comment

Comment

Comment

Comment