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.
Related
Here is my fiddle:
http://jsfiddle.net/nom4mxLt/
<div id="wrapper">
<div id="yellow">variable height (I put 200px but can change in realtime)</div>
<div id="red">This one should fill all remaining space, even when yellow resizes</div>
</div>
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
width:100%;
height:100%;
position:relative;
}
#yellow {
width:100%;
height:200px;
background-color:yellow;
}
#red {
position:absolute;
top:200px;
bottom:0;
min-height;250px;
left:0;
width:100%;
background-color:red;
}
This works good when yellow bar has static height, which is not the case in my work.
(without using JS please !)
You can use flexbox with align-items: stretch
http://jsfiddle.net/nom4mxLt/3/
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
width:300px;
height:100%;
position:relative;
display: flex;
flex-flow: column;
}
#first {
width:300px;
height:300px;
background-color:#F5DEB3;
}
#second {
background-color:red;
flex-grow:1;
}
<div id="wrapper">
<div id="first"></div>
<div id="second"></div>
</div>
you may use flex for this kind of layout:
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
display:flex;
flex-flow:column;
height:100%;
}
#yellow {
width:100%;
background-color:yellow;
}
#red {flex:1;/* i will use whole space avalaible remaining in the flex direction of my parent */
background-color:red;
}
<div id="wrapper">
<div id="yellow">variable height <br/> any height but maybe a max-height could come handy to avoid red one to disseapear</div>
<div id="red">This one should fill all remaining space, even when yellow resizes</div>
</div>
To allow wrapper to grow, then min-height can come also usefull
html, body {
width:100%;
height:100%;
margin:0;
}
#wrapper {
display:flex;
flex-flow:column;
min-height:100%;
}
#yellow {
background-color:yellow;
}
#red {flex:1;/* i will use whole space avalaible remaining in the flex direction of my parent */
background-color:red;
}
<div id="wrapper">
<h1>test and resize me in full page mode </h1>
<div id="yellow"> variable height <br/> any height<br/> but maybe a max-height<br/> could come handy <br/>to avoid red one to disseapear<br/> or min-heigh on wrapper</div>
<div id="red">This <br/>one <br/>should fill <br/>all remaining space,<br/> even when yellow resizes</div>
</div>
Here is also some usefull ressource on flex : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
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
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;
}
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.
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