1

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

user2208349
  • 7,429
  • 5
  • 26
  • 35
  • I think if you don't define a width it will inherit the width from its parent. That's causing your problem – davegson Apr 18 '14 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 Apr 18 '14 at 16:16
  • possible duplicate of [Make Div Width Equal To Child Contents](http://stackoverflow.com/questions/450903/make-div-width-equal-to-child-contents) – Rose Kunkel Apr 18 '14 at 16:17

4 Answers4

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.

Rose Kunkel
  • 3,102
  • 2
  • 27
  • 53
1

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

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

CodeVirtuoso
  • 6,318
  • 12
  • 46
  • 62
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.

Simon L
  • 36
  • 3
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.

i.nata
  • 11
  • 1