CODEWITHSUNDEEP
htmlcss
Rajeshwar
Rajeshwar

Reputation: 11681

Increase the width of the style

I currently have something like this::

<html>
    <head>
    <style>
       UseA
           {
            border-radius: 10px;
            background: #BADA55;
            height:500px;
            width:500px;
           }
    </style>
    </head>
  <body>    
          
        <UseA>
                Hello , My name is Jim Some thing to test
        </UseA>
    
  </body>
 </html>

my output is something like this

enter image description here

How can I increase the width and the length of the styled tag so it looks like my requirement below

Upvotes: 0

Views: 52

Answers (5)

matsitka
matsitka

Reputation: 36

Use a padding on your class like this. Also, don't use non-standard html element. Fiddle here

.UseA {
border-radius: 10px;
background: #BADA55;
padding:30px;
}

your html

 <div class="UseA">Hello , My name is Jim Some thing to test</div>

Upvotes: 0

isherwood
isherwood

Reputation: 61114

Your non-standard element is apparently inline by default.

http://jsfiddle.net/isherwood/52RCt/

UseA {
    display: inline-block; /* or 'block', depending on your needs */
}

You'd probably be better off using standard HTML, though: 

<div class="UseA">...</div>

In the latter case no additional CSS is necessary, as a div is a block-level element by default.

Upvotes: 3

Stijn
Stijn

Reputation: 103

The best you can do is change your made up UseA element into a div. Adding inline-block is not necessary due to standard settings for the div element.

<html>
    <head>
    <style>
       div#useA
           {
            border-radius: 10px;
            background: #BADA55;
            height:500px;
            width:500px;
           }
    </style>
    </head>
  <body>    

        <div id="useA">
                Hello , My name is Jim Some thing to test
        </div>

  </body>
 </html>

Upvotes: 0

peterh
peterh

Reputation: 1

This "UseA", as any other nondefined HTML-Tags, have a default "display: inline". Width and height is always automatic for inline Tags.

You should give it "display: block" or "display: inline-block". So:

   UseA
       {
        display: block;
        border-radius: 10px;
        background: #BADA55;
        height:500px;
        width:500px;
       }

P.s. IMHO you should learn a litte bit about "fluid design" about google.

Upvotes: 0

Victor Ribeiro da Silva Eloy
Victor Ribeiro da Silva Eloy

Reputation: 4159

add display block to your css 

  UseA {
      border-radius: 10px;
      background: #BADA55;
      height:500px;
      width:500px;
      display:block;
  }

check this fiddle, http://jsfiddle.net/victorrseloy/9gwNX/

Upvotes: 1

Related Questions