CODEWITHSUNDEEP
htmlcss
Brooklyn Nicholson
Brooklyn Nicholson

Reputation: 646

HTML/CSS - What's the best way to have a partially expanded element?

Lets say I have a 980px centered content area but there's a background element that expands all the way from the left of the screen to 80% of the content area. How do you accomplish this without JavaScript intervention or using a background image on the body?

EDIT:

Here's a visual concept for guidance: https://i.sstatic.net/NgKal.jpg. The yellow header expands to the left of the window, outside of the content box area.

Upvotes: 0

Views: 611

Answers (3)

MikeM
MikeM

Reputation: 27405

You can get the overhang effect with a div element before the 980px container and give positioning to match where the header element is

jsfiddle example or fullscreen example

in the screenshot you've got an orange overhang on the left and black on the right so here's the HTML structure (alternatively you could do the overhang with a single div and css gradients to create an orange color up to 50% then black the other 50%)

<div class="container-outer">
    <div class="header-overhang header-left"></div>
    <div class="header-overhang header-right"></div>
    <div class="container">
        <div class="sidebar">
            sidebar area
        </div>
        <div class="header">
            PAGE HEADER
        </div>
        <div class="content">
            content text
        </div>
    </div>
</div>​

CSS:

.container-outer {background-color:#BDC7D2;border-top:60px solid #050912;}
.header-overhang {height:72px;width:50%;position:absolute;top:60px;}
.header-left {left:0;background-color:#FDC103;}
.header-right {right:0;background-color:#050912;}
.container {width:980px;margin:0 auto;position:relative;}

.sidebar {float:right;width:20%;height:220px;line-height:220px;text-align:center;border-top:5px solid #d7e0e9;border-bottom:3px solid #d7e0e9;background-color:#fff;}
.header {height:72px;line-height:72px;padding-left:40px;width:80%;background-color:#FDC103;}
.content {padding:50px 40px 120px 120px;background:#050912;color:#fff;}

Upvotes: 1

PJ McCormick
PJ McCormick

Reputation: 1993

You could accomplish this with a bit of visual trickery--namely, by using two yellow divs to create the visual effect of the #pageheader element.

Here's a JSFiddle illustrating the effect.

Here's some sample HTML: 

<body>
  <div id="yellowBar">
  <div id="content">
    <div id="pageHeader">
  <!--the rest of your HTML...-->

Then, your CSS: 

#yellowBar {
  height: (set appropriate height here);
  background: yellow (set appropriate hex code here); 
  position: absolute;
  top: (set appropriate top value so the #yellowBar nudges up against the #pageHeader visually);
  width: 50%;
  left: 0px;
}

#pageHeader {
  height: (same height as #yellowBar); 
  background: (same color as yellowBar); 
  width: 80%; 
  /*any other CSS rules*/ 
}

Upvotes: 1

Saeed
Saeed

Reputation: 3775

You Handle this issue by css

#inner{
   background:#fff;
   width:80%;
   position:absolute;
   left:0;
   top:0;
}

And you should set for its parents this style

#parent{
   position:relative;
}

For example :

<div id="parent">
<div id="inner"></div>
</div>

Upvotes: 1

Related Questions