css how to make the div width just for the content

Question

I have this html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Test Float</title>
    <link rel="stylesheet" href="Styles/style.css" />
</head>
<body>
    <div class="header">
    </div>
    <div class="mainContent">
        <div class="slideBar"></div>
        <div class="content">
            up
            <div class="div1">
                Hello
            </div>
            down
        </div>
    </div>
    <div class="footer"></div>
</body>
</html>

And this is my css style:

html, body {
margin:0px;
height:100%;
}
.header {
    width:100%;
    height:20%;
    background-color:red;
    border-radius:10px;
}
.footer {
    width:100%;
    height:20%;
    background-color:green;
}
.mainContent {
    width:100%;
    height:60%;
}
.slideBar {
    width:20%;
    height:100%;
    float:left;
    background-color:blue;
}
.content {
    width:80%;
    height:100%;
    float:right;
    background-color:yellow;
}
    .content .div1 {
        border:2px solid black;
        margin-left:10px;
    }

This is the result: enter image description here

My problem

the border of the hello word goes to all the width. but I need it just to be surround the text

I think if you don't define a width it will inherit the width from its parent. That's causing your problem — davegson
– davegson, Commented Apr 18, 2014 at 16:13
@TheChamp what should I do please? I don't know the width. maybe one word. maybe 1000 word. I can handle the overflow myself — user2208349
– user2208349, Commented Apr 18, 2014 at 16:16
possible duplicate of Make Div Width Equal To Child Contents — Rose Kunkel
– Rose Kunkel, Commented Apr 18, 2014 at 16:17

Rose Kunkel · Accepted Answer · 2014-04-18 16:23:58Z

4

<div> is a block-level element, so in order to get it to shrink around its content, you need to make it act like an inline element. Setting display: inline-block; on .content .div1 will make it behave more or less like an inline element, and so it will fit to contents. See example here: http://jsfiddle.net/6wZhe/

However, what you might want to do is change out your <div> tag for a <span> tag, which is another multipurpose non-semantic container, except that is is an inline element, not a block-level element.

If you still want the linebreak after the <div> you can add a <br /> element, or do it with floats.

edited Apr 18, 2014 at 16:23

answered Apr 18, 2014 at 16:16

Rose Kunkel

3,3082 gold badges30 silver badges54 bronze badges

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

Comments

CodeVirtuoso · Accepted Answer · 2014-04-18 16:21:41Z

1

Add display:inline-block; to .content .div1 and in html add a <br> above and below it:

http://jsfiddle.net/LYvft/2/

answered Apr 18, 2014 at 16:21

CodeVirtuoso

6,44812 gold badges48 silver badges63 bronze badges

Comments

Simon L · Accepted Answer · 2014-04-18 16:24:39Z

1

Add display: inline-block to it. http://jsfiddle.net/zhF4f/

Divs are "block elements"(display:block) which mean they take up 100% of their parent width. By setting inline-block, it only wraps the content.

answered Apr 18, 2014 at 16:24

Simon L

363 bronze badges

Comments

i.nata · Accepted Answer · 2014-04-18 16:27:57Z

1

You can write display: inline-block; for div with class = div1 or replace your div to span. Div is block element on default. If you use a text it is better to use span - default inline element.

answered Apr 18, 2014 at 16:27

i.nata

111 bronze badge

Collectives™ on Stack Overflow

css how to make the div width just for the content

My problem

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

My problem

4 Answers 4

Comments

Comments

Comments

Comments

Linked

Related