cannot set html div width

Question

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;
}

You only want the .container to be 1200px width? In that case your CSS works fine - jsfiddle.net/0h5pbaLs — Pimmol
– Pimmol, Commented Apr 7, 2016 at 8:50

Gavin Thomas · Accepted Answer · 2016-04-07 08:51:47Z

3

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%; }

answered Apr 7, 2016 at 8:51

Gavin Thomas

1,2067 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nutshell · Accepted Answer · 2016-04-07 08:51:36Z

0

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

textarea {width: 100%;}

See it here

answered Apr 7, 2016 at 8:51

Nutshell

8,5251 gold badge21 silver badges38 bronze badges

Comments

Satish Kumar sonker · Accepted Answer · 2016-04-07 08:53:00Z

0

Also provide some height in CSS Class

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

answered Apr 7, 2016 at 8:53

Satish Kumar sonker

1,3089 silver badges16 bronze badges

Comments

almostcolin · Accepted Answer · 2016-04-07 08:54:56Z

0

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

answered Apr 7, 2016 at 8:54

almostcolin

599 bronze badges

1 Comment

t.niese Over a year ago

You will use rows and cols if you need to size the textarea based on the font family and font size of the textarea, but cols is most of the time not that usefull. Using css and width is a better choice.

Bejond · Accepted Answer · 2016-04-07 08:55:42Z

0

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.

answered Apr 7, 2016 at 8:55

Bejond

1,1981 gold badge12 silver badges18 bronze badges

Comments

Cp022 · Accepted Answer · 2016-04-07 11:31:25Z

0

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
}

edited Apr 7, 2016 at 11:31

answered Apr 7, 2016 at 8:53

Cp022

608 bronze badges

Collectives™ on Stack Overflow

cannot set html div width

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related