How to set div's height in css and html

Question

I'm using Twitter Bootstrap. I wrote in my html:

<div style="height:100px;" class="span12">
asdfashdjkfhaskjdf
</div>

Why the height is not 100px when I open that page?

For posterity, the original code was : <div height="100px">

you're unaware of a _major breakthrough_ for web page designers http://www.w3.org/TR/html4/present/styles.html — Ejaz, Apr 17 '13 at 19:36
and you're also unaware of the fact that changing the question will make answers pointless — Ejaz, Apr 17 '13 at 19:43

score 114 · Accepted Answer · edited Jul 23 '14 at 12:28

To write inline styling use:

<div style="height: 100px;">
asdfashdjkfhaskjdf
</div>

Inline styling serves a purpose however, it is not recommended in most situations.

The more "proper" solution, would be to make a separate CSS sheet, include it in your HTML document, and then use either an ID or a class to reference your div.

if you have the file structure:

index.html
>>/css/
>>/css/styles.css

Then in your HTML document between <head> and </head> write:

<link href="css/styles.css" rel="stylesheet" />

Then, change your div structure to be:

<div id="someidname" class="someclassname">
    asdfashdjkfhaskjdf
</div>

In css, you can reference your div from the ID or the CLASS.

To do so write:

.someclassname { height: 100px; }

OR

#someidname { height: 100px; }

Note that if you do both, the one that comes further down the file structure will be the one that actually works.

For example... If you have:

.someclassname { height: 100px; }

.someclassname { height: 150px; }

Then in this situation the height will be 150px.

EDIT:

To answer your secondary question from your edit, probably need overflow: hidden; or overflow: visible; . You could also do this:

<div class="span12">
    <div style="height:100px;">
        asdfashdjkfhaskjdf
    </div>
</div>

Thanks! And if I want to set in percent, how should I write? — user1460819, Apr 17 '13 at 19:37

score 22 · Answer 2 · answered Apr 17 '13 at 19:36

22

<div style="height: 100px;"> </div>

OR

<div id="foo"/> and set the style as #foo { height: 100px; }
<div class="bar"/> and set the style as .bar{ height: 100px;  }

answered Apr 17 '13 at 19:36

AllTooSir

48,828
16
130
164

2

Thanks! I do not know why there was a downvote, I upvoted to make it higher. – user1460819 Apr 18 '13 at 02:00

How to set div's height in css and html

2 Answers2

Linked