CODEWITHSUNDEEP
htmlcss
Hui An
Hui An

Reputation: 27

CSS Having trouble with negative margin

Before I use negative margin : HTML:

<div class="blog-piece">
    <div class="blog-letter">
        <div class="blog-letter1">4.12</div>
        <div class="blog-letter2">CSS</div>
    </div>
    <div class="blog-piece-content">
        <p class="blog-content-headp">This is the heading of the article</p>
        <p class="blog-content-shead">This is the heading of the article</p>
        <p class="blog-content-mainp">This is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the articleThis is the heading of the article</p>
        <p class="blog-content-footerp">Your name 2015-06-01</p>
    </div>
</div>

CSS:

    .blog-letter{
    width: 55px;
    float: left;
}

    .blog-letter1{
        background-color: #522A5C;
        text-align: center;
        width:55px;
        height: 40px;
    }

and the result(firefox): enter image description here

Now I set blog-letter's margin is -55px(which is it's width),but blog-letter disappeared . enter image description here following is my code after fixed: CSS:

    .blog-letter{
    width: 55px;
    float: left;
    margin-left: -55px;
}
.blog-letter1{
    background-color: #522A5C;
    text-align: center;
    width:55px;
    height: 40px;
}

but it didn't work(it disappeared),I just want to set blog-letter out of the main content,like this:enter image description here

How can I do it with negative margin?

Upvotes: 0

Views: 77

Answers (3)

Usman Arshad
Usman Arshad

Reputation: 868

Adding following code will fix that issue.

.blog-piece {
  margin-left: 55px;
}

Codepen Demo

Upvotes: 0

Felix A J
Felix A J

Reputation: 6470

No need to use negative margin for .blog-letter. Instead use 

.blog-piece-content{
     margin-left: 65px;
}

Upvotes: 0

connexo
connexo

Reputation: 56720

Depending on whether there is space available left of your div.blog-piece, here's two ways to achieve what you want:

If space is available, position div.blog-letter absolute outside div.blog-piece, which needs to have position: relative; for that to work the way you expect it to.

If no space is available, give the .blog-piece-content a margin-left: 55px;.

See both solutions in action here:

http://codepen.io/anon/pen/KpWWBe

If for some reason solution 1 also makes the div.blog-letter disappear, it must be that div.blog-piece or some container surrounding it has overflow: hidden;.

Upvotes: 1

Related Questions