CODEWITHSUNDEEP
htmlcss
Sijia Xiao
Sijia Xiao

Reputation: 137

cannot set html div width

I want to make the form looks 1200px in width. However, when I set width in class .container or .form-group, or even in form tag, it won't work. Only when I set width in textarea tag will it work. What is the problem?

index.html

<!DOCTYPE html>
<html>
<head>
    <link href="style.css" rel="stylesheet">
</head>

<body>
<div class="container">
<form>
        <div class="form-group">
            <textarea class="status-box"></textarea>
        </div>
</form>
</div>
</body>

</html>

style.css

.container {
    width: 1200px;
    margin-top: 20px;
}

Upvotes: 0

Views: 1879

Answers (6)

Cp022
Cp022

Reputation: 60

There isn't a problem. As you can see the width is already active tho it doesn't show since there is no identification. snippet here. If you change your css to look like the following you can see it for yourself.

.container {
    width: 1200px;
    margin-top: 20px;
    background-color:blue; <-- This will show the full width of your div in a color
}

Upvotes: 0

Bejond
Bejond

Reputation: 1198

Please add "background-color: gray" to your container class. You will see the div width works. The width is for div, while it's not for the content in the div. So the right way is add width to textarea.

Upvotes: 0

almostcolin
almostcolin

Reputation: 59

Just to make sure that the CSS knows where it's being applied, you should try this in your style file:

.container .form-group {
  width: 1200px;
  margin-top: 20px;
}

Or if you're tying to size your text area you need to use it's rows and cols attributes: http://www.w3schools.com/tags/tag_textarea.asp

Upvotes: 0

Satish Kumar sonker
Satish Kumar sonker

Reputation: 1288

Also provide some height in CSS Class

.container {
    width: 1200px;
    margin-top: 20px;
min-height:10px // or Height:whatever the height you prefers
}

Upvotes: 0

Gavin Thomas
Gavin Thomas

Reputation: 1206

Your container size is fine - but if you want your elements to fill the container, you'll need to set the width of them seperately.

E.g.

.container { width: 1200px; }

textarea, input { width: 100%; }

Upvotes: 3

Nutshell
Nutshell

Reputation: 8537

If you want the textarea fill the 1200px, just add this line in your CSS code : 

textarea {width: 100%;}

See it here

Upvotes: 0

Related Questions