Center a div next to another fixed div - css

I'm working on this layout:
<div id="outer">
<div id="leftBar"></div>
<div id="middleContainer">
<div id="middle"></div>
</div>
</div>
with this stylesheet:
#outer{
background-color:yellow;
white-space:nowrap;
}
#leftBar{
background-color:purple;
display:inline-block;
height:300px;
width:100px;
}
#middle{
background-color:blue;
height:300px;
width:100px;
margin:0 auto;
}
#middleContainer{
background-color:green;
width:100%;
height:100%;
display:inline-block;
}
http://jsfiddle.net/thirtydot/8ac2e/2/
There's a (purple) side bar that needs to stay fixed and a middle (blue) div that needs to be centered in the remaining space. I've wrapped the blue div in a (green) spacing div, but if I set its width to 100% then it overflows off the page so it doesn't flow correctly.
I've tried using absolute positioning of the side bar but that knocks the centering off too.
How to get the blue div to be centered in the remaining space? I'd rather not use float-left or float-right if possible.

This is a classical situation for floats. It's just most flexible. Use float: left for the sidebar and overflow: hidden for your green middleContainer. This one takes the rest then. And change all display: inline-block to display: block;
http://jsfiddle.net/8ac2e/4/
This even works if your sidebar has flexible dimensions, the divs have different height and so on.

You could absolutely position the left bar, and add a margin-left to the middleContainer equal to the width of the left bar and make the middleContainer display block. See http://jsfiddle.net/8ac2e/5/
#leftBar{
background-color:purple;
display:inline-block;
height:300px;
width:100px;
position: absolute;
}
#middleContainer{
background-color:green;
margin-left:100px;
height:100%;
display:block;
}

Depending on the browser support that you need to consider, you can use calc() to calculate the width of the #middleContainer by subtracting the width of the #leftBar from 100% like this:
#middleContainer{
background-color:green;
width: calc(100% - 100px);
height:100%;
display:inline-block;
}
Fiddle: http://jsfiddle.net/8ac2e/1/
More about calc() including browser support: https://developer.mozilla.org/en-US/docs/Web/CSS/calc

You can solve it using CSS table.
#container{
display: table;
background-color:yellow;
width:100%;
height:100%;
white-space:nowrap;
}
#leftBar{
background-color:purple;
display:table-cell;
height:300px;
width:20%;
}
#middle{
background-color:blue;
height:300px;
width:100px;
margin:0 auto;
}
#middleContainer{
background-color:green;
width:80%;
height:100%;
display:table-cell;
}

Related

How to set the Div(absolute) width 100%

I'm trying to make a box width 100% when its position absolute ?
This below image is what I am trying to make
https://i.imgur.com/qMaT361.gif
<div class="box1">
<div class="box2">
float
</div>
</div>
.box1 { position:relative; width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:absolute; top:10px; right:0; left:0; width:100%; height:50px; background:red; }
Demo : https://jsfiddle.net/otkg9nfh/8/
Please help~
When a div is set to absolute position the div takes the boundry set by the parent div (relative position). If you wan to make the div 100% of the browser screen you will have to make the div position fixed insted of absolute
.box1 { position:relative; width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:fixed; top:10px; left:0; right:0; width:100%; height:50px; background:red; }
<div class="box1">
<div class="box2">
float
</div>
</div>
.
you can use viewport width width:100vw
.box1 { position:relative; width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:relative; width: 100vw; height:50px; background:red; }
<div class="box1">
<div class="box2">
float
</div>
</div>
.box{position: relative;}
.box1 { width:500px; height:100px; margin:0 auto; overflow:visible; background:#f1f1f1;}
.box2 { position:absolute; top:10px; left:35.55%; right:0; width:100%; height:50px; background:red;}
<div class="box">
<div class="box1">
<div class="box2">
float
</div>
</div>
</div>
If you want div to start from left with some space using absolute then do like this.
You can do it 2 way
One is by using position: fixed. But you will lost the relative positioning based it's parent. Because when you apply fixed it goes out regular document flow and it consider the body it's parent.
Another way by using calc() if you want to keep the position; absolute.
.box2 { position:absolute; top:10px; right:0; left:calc(250px - 50vw); width:100vw; height:50px; background:red;}
Here left:calc(250px - 50vw); used to make center the element. 250px half size of parent container and 50vw is ensure half size of window vertical width.
It's still not clear from your question what you want the element to be "100%" of, but assuming it's the parent of the parent (the document body in this case), you can simply remove position:relative; from .box1.
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning
An absolutely positioned element is an element whose computed position value is absolute or fixed. The top, right, bottom, and left properties specify offsets from the edges of the element's containing block. (The containing block is the ancestor to which the element is relatively positioned.) If the element has margins, they are added to the offset.
.box1 {
width: 500px;
height: 100px;
margin: 0 auto;
overflow: visible;
background: #f1f1f1;
}
.box2 {
position: absolute;
top: 10px;
left: 0;
right: 0;
width: 100%;
height: 50px;
background: red;
}
<div class="box1">
<div class="box2">
float
</div>
</div>
As Shahil M suggested, you can also remove box2 from inside of box1. Ultimately you need to either change your markup or you css. As is often the case when things don't behave, you might want to re-examine why you've structured things like this to begin. Typically when you apply absolute positioning you are expecting the parent to act as the containing block.

2 fixed width sidebars with a central div that fills remaining space

How can I let the green div be width: 100% with the other two divs on the same line with fixed width.
My idea is to let the two side div's have fixed width and the central div to be width: 100% (taking up the remainder space).
Is it possible to implement this situation?
CSS:
.boxMenu {
width:200px;
height:40px;
background-color:#000;
float:left;
}
.boxConteudoMaster {
height:40px;
background-color:#4cff00;
float:left;
}
.boxNotificacao {
width:200px;
height:40px;
background-color:#000;
float:left;
}
HTML:
<div class="boxMenu"></div>
<div class="boxConteudoMaster">asd</div>
<div class="boxNotificacao"></div>
JSFIDDLE HERE
I think your after something like this:
HTML:
<div class="boxMenu"></div>
<div class="boxNotificacao"></div>
<div class="boxConteudoMaster">Testing...</div>
CSS:
.boxMenu {
width:200px;
height:40px;
background-color:#000;
float:left;
}
.boxConteudoMaster {
height:40px;
background-color:#4cff00;
width: 100%;
}
.boxNotificacao {
width:200px;
height:40px;
background-color:#000;
float:right;
}
So we can float the 2 divs that we want fixed (float:left and float: right) and then after put are middle div to width: 100%.
DEMO HERE

how to position two divs next to each other, one of them is centered in the container of both divs

how to position two divs next to each other, one of them is centered in the container of both divs
How can I position the second div directly next to the first one and make it expand to the right side ?
here is an example :
http://jsfiddle.net/Dpcq4/3/
HTML:
<div id="container" >
<div id="div1"> </div>
<div id="div2"></div>
</div>
CSS:
#container{ width: 100%;
display:inline;
height:60px;
color:#000;
}
#div1{ margin-left:auto;
margin-right:auto;
width:200px;
height:50px;
background-color:#333;
}
#div2{ float:right;
width:100%;
height:50px;
background-color:#ccc;
}
thanks.
Check this out: http://jsfiddle.net/GTduj/2/
#container{
width: 600px;
height:60px;
border:1px solid #bbb;
text-align:center;
}
You need a fixed width for your container element, and you want to center it's contents.
#div1{
width:60%;
display:inline-block;
height:50px;
background-color:#333;
}
div1 could be a % width or fixed, but it needs to be inline-block.
#div2{
display:inline-block;
width:10%;
height:50px;
background-color:#ccc;
margin-right:0;
position:absolute;
}
Use inline-block and absolute position for div2 and so it will hang off after your centered div1.
Centering a div within another div with margin: auto implies you are taking the whole width of the containing div. Put div1 within another div that you give a specified width, then float div1 in it.
<div id="container" >
<div class="container">
<div id="div1"> </div>
</div>
<div id="div2"></div>
</div>
.container{
width: x%;
float: left;
}
#div2{
float: left;
}
Assuming you don't want white space on the left you need to remove margin-left:auto; and margin-right:auto; from #div1. Also you need to change #div2 width.
Something like this:
#div1{
width:200px;
height:50px;
background-color:#333;
float:left;
}
#div2{
width:75%;
height:50px;
background-color:#ccc;
margin-right:0;
float:left;
}
However if this is meant to be fluid I would change #div1 width to a percentage as well. Something like width:25%;; If you intend to have white space to the left of the two divs then you would need to add div to the left to act as a column.
http://jsfiddle.net/Dpcq4/12/
Here's the ways I know to do this. Maybe someone else can inform us both of a better way.
First, hard coding the widths in your css like this
#container{
width: 600px;
height:60px;
color:#000;
}
#div1{
float: left;
width:200px;
height:50px;
background-color:#333;
margin-left: 200px;
}
#div2{
float:left;
width:200px;
height:50px;
background-color:#ccc;
margin-right:0;
}
If this isn't an options, and I'm sure it probably wont be, another solution will be using javascript. I'll be using jquery in the example.
var container = $('#container1');
var div1 = $('#div1');
div1.css('margin-left', container.width()/2-div1.width());
http://jsfiddle.net/Dpcq4/9/
My method works in ie8 and above along with all other browsers and uses strictly css.
By using display:table and then display:table-cell for it's children it keeps the two elements in the same table row.
#container{
width: 100%;
display:table;
height:60px;
color:#000;
}
#div1{
margin-left:auto;
margin-right:auto;
width:200px;
height:50px;
background-color:#333;
display:table-cell;
}
#div2{
display:table-cell;
height:50px;
background-color:#ccc;
margin-right:0;
float:left;
width:100%;
}
http://jsfiddle.net/Dpcq4/13/
just give float:left to your div1 and make sure this:
width(div1) + width(div2) <= width(Screen)
so, you want the div2 to take rest of the space, so give both the divs percentage width i.e.
give div1 30% width, and div2 70% width.
see this fiddle
Update:
so you want the div1 to always be at the center of the #container, then give it left:50% and accordingly adjust the div2
see this fiddle if that is what you want.

Fluid Div under fixed height elements in css?

I was wondering if there was a way to have an element stretch itself with the remaining window space it has when a fixed width has taken up a certain amount of the window.
For example
<div id ="first">
This div will ALWAYS be fixed at 20px height
</div>
<div id="second">
This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window.
</div>
Thank You
Here's an example using fixed positioning:
html, body {
margin:0;
padding:0;
height:100%;
}
#first {
height:20px;
background:yellow;
position:fixed;
top:0;
left:0;
right:0;
z-index:1;
}
#second {
padding-top:20px;
height:100%;
background:pink;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
And one using relative positioning:
html, body {
margin:0;
padding:0;
height:100%;
}
#first {
height:20px;
background:yellow;
position:relative;
z-index:1;
}
#second {
margin-top:-20px;
padding-top:20px;
height:100%;
background:pink;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-ms-box-sizing:border-box;
-o-box-sizing:border-box;
box-sizing:border-box;
overflow:auto;
}
Both are assuming the following HTML:
<div id ="first">
This div will ALWAYS be fixed at 20px height
</div>
<div id="second">
This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window.
</div>
If you borrow the sticky footer idea from here, and you adapt it to get a fixed header, it would look like this (fiddle).
the html:
<div id ="first">
This div will ALWAYS be fixed at 20px height
</div>
<div id="second">
<div id="push"></div>
This div will take up 100% of the remaining space between the top div (first div that is 20px high ) and the bottom of the window.
</div>​
the css:
#first {
height: 20px;
}
#push {
height: 20px;
background: #fcc;
}
html, body {
height: 100%;
}
#second {
min-height: 100%;
height: auto !important;
height: 100%;
margin: -20px 0;
background: #cfc;
}
Is this what you want?
http://jsfiddle.net/xvnCd/
In your first sentence you say "fixed width" but in the code you say height, so I'm not sure if this is what you're looking for.
Note that this version will lose you 20px at the bottom of the viewport, so it may or may not work for you depending on how you need this to be used.

How to set div width to 100%

I'm trying to design a 2 column layout using divs. My left column size is fixed to 150 px. But right column is not fixed size, so I want it to extend to right boundary of the browser. I used width:auto and width:100% values in right column but they didn't work.
CSS :
html {
height:100%; width:100%
}
body {
color: #000040;
text-align: left;
padding:0;
margin:0;
height:100%;
width:100%
}
#header {
position:relative;
float:left;
background-color: #000053;
width: 100%;
height: 76px
}
#wrapper {
position:relative;
overflow:hidden;
width:100%;
height: 100%;
margin:0px auto;
padding:0;
background-color:Aqua
}
#container {
clear:left;
float:left;
overflow:hidden;
width:100%;
height:100%
}
#left_column {
position: relative;
float: left;
background-color:Fuchsia;
width: 150px;
overflow:hidden;
height:100%
}
#right_column {
position: relative;
float:left;
overflow:hidden;
background-color:Blue;
height: 100%;
width:auto }
HTML
<html>
<body>
<div id="wrapper">
<div id="header">
HEADER
</div>
<div id="container">
<div id="left_column">
LEFT COLUMN
</div>
<div id="right_column">
RIGHT COLUMN
</div>
</div>
</div>
</body>
</html>
I would remove all position statements and only put a float:left on the left column, not the right nor the container. Give the right column a margin-left:150px and it should work fine.
Except for the left-floated column, you can also remove the width:100% statements from the rest; when they're not floated, they'll be 100% wide automatically.
The overflow:hidden is only needed on the wrapper; at least if you are using it to have the div grow in height to accommodate the floats inside it.
change for the div right_column the position from relative to fixed, and width from auto to 100%. Also add left:150px;
With these changes you css for right_column will look like the following:
#right_column {
position: fixed;
left:150px;
float:left;
overflow:hidden;
background-color:Blue;
height: 100%;
width:100%; }
you can check it here http://jsbin.com/ejetu3

Resources