Here is my HTML :
<div id="container">
<div id="red"></div>
<div id="yellow">
<div id="green"></div>
</div>
</div>
Here is my CSS :
#container { height:auto; width:100%; background:orange; float:left; }
#red { height:100%; width:200px; background:red; float:left; position:relative; }
#yellow { height:100%; width:calc(100% - 210px); background:yellow; float:right; position:relative; padding:5px; }
#green { height:300px; width:100%; background:green; }
Here is a sample : https://jsfiddle.net/cc5xL660/
As it is in the jsfiddle, the #red div is invisible. I'm looking for a way to make the #red div visible without a specific height dimension. Of course, I could give a height:300px to the #red div but the #green div is supposed to be dynamic. I would like the #red div to have the same height.
You have to give
position: relative to #container
position: absolute to #red
Your JSFiddle edited: https://jsfiddle.net/cc5xL660/4/
You can use display:flex to do that. Have a look at here
#container {
height: auto;
width: 100%;
background: orange;
float: left;
display:flex;
flex-direction:row;
align-items:stretch;
}
#red {
/*height: 100%;*/
width: 200px;
background: red;
float: left;
position: relative;
}
#yellow {
/*height: 100%;
width: calc(100% - 210px);*/
background: yellow;
float: right;
position: relative;
padding: 5px;
flex:1 0;
}
#green {
height: 300px;
width: 100%;
background: green;
}
<div id="container">
<div id="red"></div>
<div id="yellow">
<div id="green"></div>
</div>
</div>
Fiddle
Related
is there any way to change position absolute parent?
in this example I want to send red box to position right:0 of his second parent (black box)
.box1{
height:500px;
width:500px;
position:relative;
background:black;
}
.box2{
height:300px;
width:300px;
position:relative;
background:green;
}
.box3{
height:100px;
width:100px;
position:absolute;
background:red;
right:0
}
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
</div>
Make Some few changes in your markup
.box1 {
height: 500px;
width: 500px;
position: relative;
background: black;
}
.box2 {
height: 300px;
width: 300px;
position: relative;
background: green;
}
.box3 {
height: 100px;
width: 100px;
position: absolute;
background: red;
right: 0
}
<div class="box1">
<div class="box3"></div>
<div class="box2">
</div>
I'm new in CSS and have not not found the solution for this basic problem. I have 3 divs in one line. The center div must have fixed width and it's position also fixed px from the center. I need auto width for the left and right div to fill the space at the left/right side. Here is my try but the left and right divs are zero width. Thanks for the help!
.fullwidth{
width:100%
height:20px;
}
.left{
background-color:green;
float:left;
height:20px;
width: auto;
}
.center{
background-color:red;
position:absolute;
right:50%;
margin-right:100px;
height:20px;
width:100px;
}
.right{
background:blue;
float:right;
height:20px;
width: auto;
}
<div class="fullwidth">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
What you're looking for is known as the flexible box model design, it is fairly new so there are some vendor prefix requirements although I have emitted them for simplicity. You may have noticed that there is poor support for Internet Explorer so if that's a concern you may need to look for alternatives. Regardless take a look of it in use:
.fullwidth {
width: 100%;
height: 20px;
display: flex;
}
.left {background-color: green;}
.center {
background-color: red;
width: 100px;
}
.right {background: blue;}
.left,.right {flex: 1;}
<div class="fullwidth">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
flexbox can do that.
Codepen Demo - Click "View Compiled" for all vendor prefixes
* {
box-sizing: border-box;
}
.fullwidth {
height: 20px;
display: flex;
}
.fullwidth .left,
.fullwidth .right {
flex: 1 0 auto;
}
.left {
background-color: green;
}
.center {
background-color: red;
flex: 0 0 100px;
margin-left: -100px;
}
.right {
background: blue;
}
.line {
/* center point reference for demo only */
position: absolute;
height: 50px;
left: 50%;
width: 1px;
border-right: 1px solid green;
}
<div class="fullwidth">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<div class="line"></div>
You could use CSS calc function
.fullwidth {
width: 100%;
height: 20px;
}
.fullwidth div {
float: left
}
.left {
background-color: green;
height: 20px;
width: calc(50% - 50px);
}
.center {
background-color: red;
height: 20px;
width: 100px;
}
.right {
background: blue;
height: 20px;
width: calc(50% - 50px);
}
<div class="fullwidth">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
How can I align 4 divs, in css, inside a container like in this image: http://postimg.org/image/w0k7wgdfb/
Here's my html, I guess I need another container for DIV#2 and DIV#3.
<div id="container">
<div id="header"> DIV 1 </div>
<div id="wraper"> <!-- WRAPER -->
<div id="sidebar"> DIV 2 </div>
<div id="content"> DIV 3 </div>
</div> <!-- WRAPER -->
<div id="footer"> DIV4 </div>
</div>
Thank you for your help!
Solution 1 - Floats
After centre aligning the content, you could use a simple float trick for the two middle divs:
CSS
html, body {
height: 100%;
width:100%;
margin: 0;
padding: 20px;
box-sizing:border-box;
}
#container {
text-align:center;
width:500px;
margin: 0 auto;
height:100%;
background:black;
padding:20px;
box-sizing:border-box;
}
#header {
background:green;
height:20%;
}
#wraper {
height:60%;
overflow:hidden;
}
#sidebar {
width:20%;
float:left;
height:100%;
background:red;
}
#content {
overflow:hidden;
background:blue;
height:100%;
}
#footer {
background:orange;
height:20%;
}
Solution 2 - Display:Table
After centre aligning the content, you could apply a table layout to the middle divs
CSS
html, body {
height: 100%;
width:100%;
margin: 0;
padding: 20px;
box-sizing:border-box;
}
#container {
text-align:center;
width:500px;
margin: 0 auto;
height:100%;
background:black;
padding:20px;
box-sizing:border-box;
}
#header {
background:green;
height:20%;
}
#wraper {
height:60%;
display:table;
width:100%;
}
#sidebar {
width:20%;
display:table-cell;
background:red;
}
#content {
display:table-cell;
background:blue;
}
#footer {
background:orange;
height:20%;
}
Here there is a working fiddle.
HTML
CSS
#one{
width: 400px;
background: black;
margin: 0 auto;
height: 600px;
}
#two{
height: 100px;
width: 400px;
background: lime;
}
#three{
height: 400px;
width: 100px;
background: yellow;
float: left;
}
#four{
height: 400px;
width: 300px;
background: blue;
float: left;
}
#five{
height: 100px;
clear: both;
width: 400px;
background: silver;
}
I want to center a div element and to place another div element just on the right with the same vertical alignment. I don't know how to proceed without centering both elements.
Here is my code.
<div class="container">
<div class="center"></div>
<div class="right"></div>
</div>
.center {
width: 100px;
height: 100px;
margin: auto;
background-color: red;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
}
http://jsfiddle.net/KWsnh/
You could use calc to achieve this:
FIDDLE
.container{
text-align:center;
position: relative;
}
.center {
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
position:absolute;
top:0;
left: calc(50% + 50px); // (100% - 100px)/2 + 100px (offset) = 50% + 50px
}
PS: Browser support for calc is quite good these days.
Demo Fiddle
HTML
<div class="container">
<div class='vcenter'>
<div class="center"></div>
<div class="right"></div>
</div>
</div>
CSS
html, body {
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
display:table;
}
.container {
display:table-cell;
vertical-align:middle;
}
.center {
width: 100px;
height: 100px;
margin: 0 auto;
background-color: red;
}
.vcenter {
display:block;
width:100%;
position:relative;
}
.right {
width: 100px;
height: 100px;
background-color: blue;
position:absolute;
right:0;
top:0;
}
test case http://codepen.io/anon/pen/hFumw.
Works fine in all browsers except chrome. In chrome width of .container is calculated like .child.one elements are not floated. Is there any way to fix this behaviour?
HTML:
<div class="container">
<div class="header">
header
</div>
<div class="child one">
</div>
<div class="child one">
</div>
<div class="child one">
</div>
</div>
CSS:
.container {
background:red;
padding:10px;
display: inline-block;
overflow:hidden;
.child {
width:100px;
height: 100px;
background: green;
float:left;
clear:left;
border: 1px solid blue;
}
.one {
float: left;
clear:left;
background:yellow;
}
.header {
background:blue;
}
}
UPD:
.header {
float: left;
width: 100%;
}
is not acceptable in my particular case.
Following CSS seems to work fine in Chrome and FF. See header declaration.
body {
text-align: center;
}
.container {
margin-left:auto;
margin-right:auto;
background:red;
padding:10px;
display: inline-block;
overflow:hidden;
.child {
width:100px;
height: 100px;
background: green;
float:left;
clear:left;
border: 1px solid blue;
}
.one {
float: left;
clear:left;
background:yellow;
}
.two {
float: right;
margin-left:0px;
clear: right;
}
.header {
background:blue;
display:block;
float:left;
width:100%;
}
}
Try adding this css to .header
clear:both;
float:left;
width:100%