CODEWITHSUNDEEP
csshtmloverflowcentering
Sam Gibson
Sam Gibson

Reputation: 145

Centering an div which overflows it's parent within another centered div

I have a single column layout where the column is a centered div with a fixed width. I want to place a wider div within the column which overflows it's parents, but center it within the parent. Conceptually something like the following:

<div style="width: 100px; margin: 0 auto; overflow:visible;" id="parent">
    <div style="width: 400px; margin 0 auto;" id="child"></div>
</div>

The centering works as long as the child div is thinner than its parent, but once it gets larger, it always aligns left with the parent for some reason.

Upvotes: 3

Views: 4671

Answers (5)

Justus Romijn
Justus Romijn

Reputation: 16059

#wrapper {
  margin: 0 auto;
  width: 200px;
  background-color: #eee;
  position: relative;
  height: 200px;
}

#child {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0 0 0 -200px;
  width: 400px;
  background-color: #ddd;
}
<div id="wrapper">
  <div id="child">Child div</div>
</div>

jsFiddle

When an element overflows his parent, it is normal behaviour that it only overflows to the right. When you, for example, have a site that is wider then the viewport, you never have to scroll left, but only to the right. This solution is based on a absolute centered div, with a negative left margin (that value is the half of his own width). So if you know the width of this element, this solution should be fine.

Tested in FF 3.6, IE7 and IE8

Upvotes: 4

Ahmet
Ahmet

Reputation: 74

#parent {
  position: relative;
  width: 100px;
  overflow: visible;
}

#child {
  width: 400px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

Upvotes: 0

Alqin
Alqin

Reputation: 1305

This is how I solve it:

http://jsfiddle.net/WPuhU/1/

Also take care of the scrollbars(they do not appear if your window view is smaller then the overflowing div). Auto centers the overflowing div.

css:

#center-3 {height:40px;background-color: #999;}
#center-1 {height:20px;top:10px;background-color: #aaa;}

/* the necesary code */
body {width:100%;margin:0;}
#center-4 {
    width: 100%;
    overflow:hidden;  
    /* remove the next 2 line for a normal flow */
    position: absolute;
    z-index: -1;
}
#center-3 {
    position: relative;
    margin: 0 auto;
    width: 200px;
}
#center-2, #center-1 {
    position: relative;
    width: 400px;
}
#center-2 {
    left: 50%;
}
#center-1 {   
    left: -50%;
}

html:

 <div id="center-4">
    <div id="center-3">
        <div id="center-2">
            <div id="center-1"></div>
        </div>
    </div>
</div>
<div id="other-stuff">Here comes the other stuff above.</div>

Upvotes: 0

Scott Robinson
Scott Robinson

Reputation: 991

I made a variation of Justus' solution. Instead of relative positioning, I used a negative margin of 50% in the inner element.

#wrapper {
    margin: 0 auto;
    padding: 10px 0 10px;
    width: 200px;
    background-color: #eee;
}
#child {
    margin: 0 -50%;
    width: 400px;
    background-color: #ddd;
}

This way you don't need to know the element sizes ahead of time.

Upvotes: 3

Sarfraz
Sarfraz

Reputation: 382909

I am not 100% sure but try giving the parent element a position set to relative and child absolute and then set top, left and width/height properties for the child div accordingly.

Upvotes: 0

Related Questions