CODEWITHSUNDEEP
htmlcss
zklim
zklim

Reputation: 525

Div width expanding

I'm having a problem with a div container being automatically set to the full width of the page, when I actually only want it to expand to fit the contents. Here's the HTML:

<!doctype html>
<html>
<!-- Head -->
<head>
    <title>html_blocked_text</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />   

    <!-- Area for Additional Links -->
    <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link href='html_blocked_text.css' rel='stylesheet' type='text/css' />
</head>

<!-- Body -->
<body>
    <div id="container">
        <div class='block'>
            <div class='letter'>S</div>
        </div>
        <div class='block'>
            <div class='letter'>T</div>
        </div>
        <div class='block'>
            <div class='letter'>A</div>
        </div>
        <div class='block'>
            <div class='letter'>Y</div>
        </div>
    </div>
</body>
</html>

the CSS:

body {
    background-color: #B8FFDB;
}

#container {
    background-color: white;
    border-radius: 5px;
    overflow: hidden;
}

.block {
    overflow: hidden;
    background-color: #003D5C;
    border-radius: 5px;
    float: left;
    margin: 1px;
    padding: 5px;
}

.letter {
    font-family: 'Montserrat';
    color: white;
    font-size: 25px;
}

and the results (25px and 50px):

25px for Text Size 50px for Text Size

With the issue being: all the white space after the last letter. How do I take away the white space on the right side of the last letter? I only want that container to wrap around the contents (i.e. the letters).

Upvotes: 1

Views: 101

Answers (3)

bidhan
bidhan

Reputation: 70

div is a block container so it gets the width of its parent element, in your case the body element which is the full width of the page.

#container {
    display:inline-block;
}

should give you the desired result

Upvotes: 2

ZEE
ZEE

Reputation: 5869

you can add display : inline-block or float : left both of them avoid this problem : 

#container {
background-color: white;
border-radius: 5px;
overflow: hidden;
float: left;   
}

Live demo

Upvotes: 3

pavel
pavel

Reputation: 27092

Add display: inline-block to #container.

#container {display: inline-block;}

http://jsfiddle.net/0sh4uwnf/

Upvotes: 4

Related Questions