CODEWITHSUNDEEP
htmlcss
Greg
Greg

Reputation: 3063

DIV within a DIV and padding issue

I'd like the header section of my article DIV to take the full width of the DIV and goes up to the top (like on the 2nd picture) but cannot achieve that due the padding of the DIV (see 2nd picture). Is there a workaround? Thanks

http://jsfiddle.net/ph2yq/2/

enter image description here

What I'd like to achieve:

enter image description here

HTML:

<div class="article">
    <div class="article-headline"><h1>Once upon a time</h1></div>
    <h2>Sub-title</h2><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae </p>
      </div>

CSS:

.article {
    clear: right;
    float: right;
    text-align:justify;
    color:#000;
    opacity:1;
    width: 590px;
    padding: 20px 32px 25px 50px;
    position: relative;
    z-index: 15;
    margin-top: 136px;
    /* background: #3B5898; */

    box-shadow:-2px 0 5px 0 rgba(0, 0, 0, 0.5); 
    overflow: visible;
margin-right: 50px;
/* background-image: url("../images/pagetile.png"); */
    background: #FFF;
bottom:60px;
  /* box-shadow: 0 1px 5px rgba(0,0,0,0.25), 0 0 20px rgba(0,0,0,0.1) inset;
  border-radius: 1%     1%     1%     1% /     1%     1%     1%     1%; */

}


.article p {
    padding-right:20px;
    color: #333;
}
.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
}
.article h1, .article h2 {
    margin-top: -4px;
    padding-bottom: 2px;
}

Upvotes: 0

Views: 114

Answers (5)

David Jashi
David Jashi

Reputation: 4511

Sorry, had to clean it up a bit to understand:

http://jsfiddle.net/ph2yq/7/

HTML:

<div class="article">
<div class="article-headline"><h1>Once upon a time</h1></div>
<div class="article-body">
<h2>Sub-title</h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae 
</div>
</div>

CSS:

.article-body {
    padding: 20px 32px 25px 50px;
    margin-right: 50px;
}
.article {
    text-align:justify;
    color:#000;
    opacity:1;
    width: 590px;
    z-index: 15;
    box-shadow:-2px 0 5px 0 rgba(0, 0, 0, 0.5); 
    overflow: visible;
    background: #FFF;
}

.article p {
    padding-right:20px;
    color: #333;
}
.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
    padding-left:30px;
}
.article-headline h1, .article h2 {
    margin-top: -4px;
    padding-bottom: 2px;
}

Upvotes: 1

Axel A. Garc&#237;a
Axel A. Garc&#237;a

Reputation: 683

Just play with negative margin and padding in .article-headline:

.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
    margin: -20px -32px 10px -50px; // this is relative to .article padding
    padding: 5px 40px 0; // this is relative to this margin
}

http://jsfiddle.net/ph2yq/10/

Upvotes: 1

Tim Wasson
Tim Wasson

Reputation: 3656

You may have to adjust some of the padding, but this should get you started. I gave the headline a position:absolute and adjusted the top, left and right to get rid of the border.

http://jsfiddle.net/ph2yq/5/

Upvotes: 1

Bartek Bielawa
Bartek Bielawa

Reputation: 572

NEW CSS:

.article-headline {
    background:#03F;
    color: #fff;
    border-right:40px;
    border-right-color:#3F3;
    margin: -20px 0 0 -50px;
    width: 662px;
    padding: 10px 0  0 10px;
}

There is demo: http://jsfiddle.net/ph2yq/2/

Upvotes: 0

Dory Zidon
Dory Zidon

Reputation: 10719

your article contains position relative, so position absolute would work as it relates to the container.

.article-headline {
  position:absolute;
  top: 0px;
  left: 0px;
  width:100%
}

working jsFiddle: http://jsfiddle.net/ph2yq/11/

http://www.developerfusion.com/code/5405/css-positioning-within-a-container/

Upvotes: 1

Related Questions