How to Adjust Bootstrap's Container Div to 100Px Off The Left Viewport Edge

How to adjust Bootstrap's container div to 100px off the left viewport edge?

Ok here's what I did:

.container {
  padding-left: 10px;
  padding-right: 250px;
}

doesn't give me exactly the result I was looking for, but pretty close. My first span 3 is a sidebar and the last span9 main content area. The main content area is now always centered and the sidebar next to it and has a minimum gap of 10px to the window border.

What do I need to do to get these bootstrap columns to align left?

You can left align the container as described in this question, or simply use a full-width container-fluid, and then only use a portion of the 12 Bootstrap columns, for example 8 columns..

<div class="container-fluid">
    <div class="row">
        <div class="col-md-8">
         .. page layout here
        </div>
    </div>
</div>

http://www.bootply.com/SRnhM22tPr

On smaller screens you'd probably want the layout to be full-width instead of left aligned.

Expanding div from container to the right edge of viewport

If you're okay with hiding horizontal overflow on the body, the my solution below should do the trick for you.

My making .stretch absolutely positioned, relative to it's parent .right, I was able to achieve the effect.

What I was unable to do was find a solution that would place it on the right edge of the viewport, so I used a fixed value, and hid the horizontal overflow on the body.

body {  background: #FFF;  overflow-x: hidden;}
.container {  margin: 0 auto;  width: 100%;  max-width: 1360px;}
.left {  background: #0095ff;  float: left;  width: 32.35294%;  height: 100px;}
.right {  float: right;  width: 66.17647%;  background: #F1F1F1;  height: 100px;  position: relative;}
.right .stretch {  background: #ff8227;  height: 50px;  position: absolute;  right: -2000px;  left: 0;}

.clear {  clear: both;  font-size: 0px;  line-height: 0px;  display: block; }

<div class="container">    <div class="left">left</div>    <div class="right">        <div class="stretch">right</div>    </div>        <div class="clear"></div></div>

How to align a div to the middle (horizontally/width) of the page

<body>
    <div style="width:800px; margin:0 auto;">
        centered content
    </div>
</body>

In a bootstrap responsive page how to center a div

Update for Bootstrap 5

Simpler vertical grid alignement with flex-box

@import url('https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css');
html,
body {
  height: 100%
}

<div class="h-100 d-flex align-items-center justify-content-center">
  <div style="background:red">
    TEXT
  </div>
</div>

Make a div fill the height of the remaining screen space

2015 update: the flexbox approach

There are two other answers briefly mentioning flexbox; however, that was more than two years ago, and they don't provide any examples. The specification for flexbox has definitely settled now.

Note: Though CSS Flexible Boxes Layout specification is at the Candidate Recommendation stage, not all browsers have implemented it. WebKit implementation must be prefixed with -webkit-; Internet Explorer implements an old version of the spec, prefixed with -ms-; Opera 12.10 implements the latest version of the spec, unprefixed. See the compatibility table on each property for an up-to-date compatibility status.

(taken from https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes)

All major browsers and IE11+ support Flexbox. For IE 10 or older, you can use the FlexieJS shim.

To check current support you can also see here:
http://caniuse.com/#feat=flexbox

Working example

With flexbox you can easily switch between any of your rows or columns either having fixed dimensions, content-sized dimensions or remaining-space dimensions. In my example I have set the header to snap to its content (as per the OPs question), I've added a footer to show how to add a fixed-height region and then set the content area to fill up the remaining space.

html,body {  height: 100%;  margin: 0;}
.box {  display: flex;  flex-flow: column;  height: 100%;}
.box .row {  border: 1px dotted grey;}
.box .row.header {  flex: 0 1 auto;  /* The above is shorthand for:  flex-grow: 0,  flex-shrink: 1,  flex-basis: auto  */}
.box .row.content {  flex: 1 1 auto;}
.box .row.footer {  flex: 0 1 40px;}

<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">  <div class="row header">    <p><b>header</b>      <br />      <br />(sized to content)</p>  </div>  <div class="row content">    <p>      <b>content</b>      (fills remaining space)    </p>  </div>  <div class="row footer">    <p><b>footer</b> (fixed height)</p>  </div></div>

Is there a way to make a child DIV's width wider than the parent DIV using CSS?

Use absolute positioning

.child-div {
    position:absolute;
    left:0;
    right:0;
}

Fixed position but relative to container

Short answer: ~~no.~~ (It is now possible with CSS transform. See the edit below)

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

How can I do width = 100% - 100px in CSS?

Modern browsers now support the:

width: calc(100% - 100px);

To see the list of supported browser versions checkout: Can I use calc() as CSS unit value?

There is a jQuery fallback: css width: calc(100% -100px); alternative using jquery

How to Adjust Bootstrap's Container Div to 100Px Off The Left Viewport Edge