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
Related
I have two floating divs (left and right) nested in the mother div.
Floating divs display one image each.
Images must be resized to the maximum possible size without getting different sizes.
That's what I have.
HTML
<div id="mother">
<div class="left">
<img src="image.src" />
</div>
<div class="right">
<img src="image.src" />
</div>
</div>
CSS
#mother {
width:80%;
min-width:600px;
max-width:1800px;
margin:0 auto;
display:block;
}
.left {
float:left;
min-width:300px;
max-width:900px;
width:100%;
}
.right {
float:right;
min-width:300px;
max-width:900px;
width:100%;
}
.left img, .right img {
min-width:300px;
max-width:900px;
width:100%;
}
Your classes .left and .right both have width 100%. This means your divs are trying to get the same space in their container, so one will get below the other because they don't fit on the same row.
If I understand correctly your problem, you can fix it by changing the following classes:
.left {
float:left;
min-width:300px;
max-width:900px;
width:50%;
}
.right {
float:right;
min-width:300px;
max-width:900px;
width:50%;
}
I changed the width to 50% for this classes.
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;
}
I have the following issue with the next code posted in JSFiddle: http://jsfiddle.net/b9XVV/1/
HTML
<div class="content">
<div class="header">THGE HEADER OF THE PAGE</div>
<div class="thebody">
HERE GOES THE CONTENT OF THE PAGE......
</div>
<div class="footer">
<div class="footerContent">
<div class="footer1">Footer section</div>
<div class="footer2"></div>
</div>
</div>
</div>
CSS
.header {
width:100%;
height:50px;
background-color:#FFFF58;
}
.thebody {
width:500px;
height:400px;
margin:0 auto;
background-color:#DDD;
}
.footer {
width:500px;
height:50px;
background-color:#696969;
margin:0 auto;
}
.footerContent {
width:500px;
height:50px;
}
.footer1 {
width:400px;
height:50px;
float:left;
}
.footer2 {
width:100px;
height:50px;
float:left;
background-color:#FFddFF;
position:fixed;
right:0;
}
The question is that the pink Div should always stay on the footer and fixed on the right, but if window width is less than body width plus pink Div width, the pink Div should be kept on the left of the main footer (500px width)
Another issue is that scrolling the content, the pink div should always stay at the same level of the footer.
CSS:
.footer2 {
width:100px;
height:50px;
background-color:#FFddFF;
}
#media all and (max-width: 649px){
.footer2 {
position: inline;
float: right
}
}
#media all and (min-width: 650px){
.footer2 {
position:fixed;
right:0;
bottom: 0;
}
}
Demo: http://jsfiddle.net/b9XVV/2/
Watch the compatibility of the media queries: http://caniuse.com/#feat=css-mediaqueries Your main problem (if applicable) is IE8.
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.
HTML:
<div id="wrap">
<div id="header">
<div class="logo"></div>
<div class="category"></div>
</div>
</div>
CSS:
#wrap {
width:960px;
margin:0 auto;
position:relative; }
#header_wrap {
position:fixed;
top:0;
left:0;
width:100%;
min-width:960px;
height:105px;
background:rgba(256, 256, 256, 0.6); z-index:999; }
#header {
width:860px;
position:relative;
height:90px;
padding:15px 40px 0 40px;
margin:0 auto; }
.logo {
float:left;
margin-top:-35px; }
.category { float:right; margin-top:-9px; }
I made a fixed header menu on top of page.
But if browser window's width is smaller than wrap width (especially, when zooming on safari in iphone/ipad.), I can't see the right side(category) of header(fixed).
Help!
Do not specify the width in 'px' give it in the form of %, as you maximize or minimize your browser then either the scrollbar will appear and cut off your div