Web Analytics Made Easy -
StatCounter Simple question about DIV tag - CodingForum

Announcement

Collapse
No announcement yet.

Simple question about DIV tag

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Simple question about DIV tag

    Hi!

    I need an answer about this,what is wrong or what is not wrong or what is the right way...

    Is this code ok?

    <div id="some_div1" style="heigh:200px; width:200px;">
    <div id="some_div2" style="heigh:200px; width:200px;">
    </div>
    </div>

    or is this code ok?

    <div id="some_div1" style="heigh:200px; width:200px;">
    <div id="some_div2" style="heigh:199px; width:199px;">
    </div>
    </div>

    I know its work well the first ans second example to but I wish to know what is the right way...

  • #2
    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.
    .My new Javascript tutorial site: http://reallifejs.com/
    .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
    .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

    Comment


    • #3
      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" />
      matt | design | blog

      Comment


      • #4
        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?

        Comment


        • #5
          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.
          .My new Javascript tutorial site: http://reallifejs.com/
          .Latest article: Calculators — Tiny jQuery calculator, Full-fledged OOP calculator, Big number calculator
          .Latest quick-bit: Including jQuery — Environment-aware minification and CDNs with local fallback

          Comment


          • #6
            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.
            matt | design | blog

            Comment


            • #7
              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

              Comment

              Working...
              X