Centering a div in the remaing space left by a floating div? - html

Question

Right, so I have the site in a 100% width wrapper. Inside are two divs. One is floated left with a fixed width of 900px, and... I'm trying to get the second one to be centered in the remaining space between the first div and the right of the screen.
I've tried variations of floating left/right relative/absolute positioning, margin auto etc but none of it is working.
Could anyone help please?

Answer 1

Floated elements do not take up space inside their container by definition, it's therefore impossible to center 'the other content'.
In general, don't use float for content that isn't actually floating, like images inside an article. For layout you should usually prefer absolute positioning or other more flexible constructs.
You could for example just position the sidebar absolutely and give the container a margin equal to the size of the sidebar, which would solve your problem instantly.
If this isn't possible, for example because the elements are both flexible height, you could position 2 containers next to eachother with either float:left, display:inline-block or display:table-cell. Centering inside the right container is then trivial.

Answer 2

If my understanding is correct, you are trying to achieve something like this:
<div class="container"><div class="first"></div><div class="second"></div></div>
CSS:
.first {
width: 100px;
height: 50px;
background-color: black;
}
.second {
position: absolute;
height: 50px;
background-color: red;
left: 100px;
right: 0;
top: 0;
}
.container {
width: 500px;
height: 100px;
background-color: green;
position: relative;
}
Here's a fiddle. If I misunderstood and you don't want to have the second div stretched to full remaining width, instead you just want to center it, then simply modify the css like this:
.second {
position: absolute;
width: 100px;
height: 50px;
background-color: red;
left: 100px;
right: 0;
top: 0;
margin-left: auto;
margin-right: auto;
}

Answer 3

Here is an example using CSS table settings on the divs. It stays together well when resized, and when content is added. An additional benefit is that both the left and right columns will stay the same height, and will wrap around the content. If you want the left and right columns to appear to have different heights, just insert and style nested divs.
In the first example, the right div has text-align:center. The nested div within is display:inline-block which recognizes the text-align:center on the parent. Therefore, the nested div is truly centered. Inline-block will also wrap around its content's width, and that's helpful if your centered element has a set width, or a small variable width. If your content fills its parent like the example, just set a max-width.
In the second example the right div has equal padding on the left and right to "center" its contents.
Note: If you support IE6 and IE7 - CSS table settings and inline-block have excellent browser compatibly, except for IE6 and IE7. For the css table settings, there is a polyfill. Also IE6 and IE7 don't recognize inline-block, but they do recognize display:inline. Just use *display:inline; *zoom:1; for IE6 and IE7.
Give it a good test and see what you think.
JSFiddle Example
CSS Table Browser Compatibility Chart
Inline-block Browser Compatibility Chart
CSS
.table-holder {
display:table;
width:100%;
}
.table-row {
display:table-row;
}
.table-cell-right {
display:table-cell;
width:90px; /* small px used for example */
background-color:#ccffcc;
padding:.5em;
vertical-align:top;
}
.table-cell-left {
display:table-cell;
background-color:#ccffff;
text-align:center;
}
.center-nested {
width:85%; /*set to desired width */
display:inline-block;
padding:.5em;
text-align:left;
vertical-align:top;
background-color:#ffffcc;
}
/* ------------ center using padding -------------*/
.padded-table-cell-left {
display:table-cell;
background-color:#ccffff;
padding:0em 2em 0em 2em;
}
.padded-center-nested {
padding:.5em;
background-color:#ffffcc;
}
HTML
<p>Table using inline-block to center</p>
<div class="table-holder">
<div class="table-row">
<div class="table-cell-right">Left Container set at 90px</div>
<div class="table-cell-left">
<div class="center-nested">
This is a CSS table. The blue parent cell has text-align:center. The yellow nested div is display:block, which responds to the text-align:center on the parent: therefore, the yellow div is truely centered. Lorem ipsum dolor sit amet, usu ad fugit indoctum molestiae, inermis mediocrem in quo, sed affert sadipscing no. Per solum rebum forensibus id, his prima everti epicuri te. Vis diam tation ei, audire tritani adipiscing eam at. Ea modo nonumy feugiat usu, pri an ubique electram. Aeque adversarium ea vim. Pri te novum veritus scriptorem, vero blandit mei eu.
</div>
</div>
</div>
</div>
<p>Table using padding to center</p>
<div class="table-holder">
<div class="table-row">
<div class="table-cell-right">Left Container set at 90px</div>
<div class="padded-table-cell-left">
<div class="padded-center-nested">
The yellow centered cell appears centered because the parent has equal left and right padding. - Lorem ipsum dolor sit amet, usu ad fugit indoctum molestiae, inermis mediocrem in quo, sed affert sadipscing no. Per solum rebum forensibus id, his prima everti epicuri te. Vis diam tation ei, audire tritani adipiscing eam at. Ea modo nonumy feugiat usu, pri an ubique electram. Aeque adversarium ea vim. Pri te novum veritus scriptorem, vero blandit mei eu.
</div>
</div>
</div>
</div>

Answer 4

Do you have a padding on the divs?
if you have you can set box-sizing to border-box and float the first box to the left and leave the second one as is.
Do you want to achieve something like this?
http://jsbin.com/zenedabiyoyu/1/edit

Answer 5

One possible solution is to nest the right div inside of another div with margin-left: 900px and then use margin: 0 auto on the inner div to center it.
Check out the technique in this example: http://jsfiddle.net/r15fL0de/
Note: For the sake of the fiddle I used 300px instead of 900px, but the principle is the same