htmlcss

How to set div's height in css and html

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">

Solution

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