How can I achieve the styling shown in the picture? Consindering the following scenario: I got 2 nested div elements, by which the parent is "relative positioned" and the child is "absolute positioned"! And the child div is always "fixed to the bottom" of the body element, when browser is scaled. I don't get this to work...
Here is the code, where I am using padding-bottom: 100%. But this is not a good solution! Is there a way to realise this with only CSS 2.1 API?
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 440px;
left:200px;
background-color: blue;
position: relative;
}
.child {
display: block;
position: absolute;
width: 100px;
right:0px;
background-color: yellow;
padding-bottom: 100%;
}
<body>
<div class="parent">
<div class="child">Fix to bottom</div>
</div>
</body>
Don't take 2nd div as child. You want it to stick to bottom and parent div's height will disturb it while scalling.
I hope this helps :)
body {
min-height: 100%;
background-color: grey;
}
.parent {
height: 70px;
width: 400px;
left:100px;
background-color: blue;
position: relative;
top:70px;
}
.another-parent {
display: block;
height:60%;
position: absolute;
bottom:0;
width: 100px;
right:22%;
background-color: yellow;
}
<body>
<div class="parent"></div>
<div class="another-parent">Fix to bottom</div>
</body>
Related
Have problem. I have this code.
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
I need to make two colums.
"Sidebar" must have fixed width 200px;
And "content" all remaining width to fullscreen.
I cant change the structure of html code, just css.
if absolute position is ok, you can use it to say left:200px; right:0 and get all the space you need
fiddle : http://jsfiddle.net/h2udmqhn/
.main {
position: relative;
height: 300px;
width: 300px;
border: 1px solid black;
}
.sidebar {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background: red;
}
.content {
position: absolute;
top: 0;
left: 200px;
right: 0;
height: 200px;
background: blue;
}
<div class="main">
<div class="sidebar"></div>
<div class="content"></div>
</div>
Use float: left for .sidebar and left margin for .content:
.sidebar {float: left; width: 200px; background: red;}
.content {background: green; margin: 0 0 0 200px;}
http://jsfiddle.net/orty5qtj/1/
Another option is to use calc, which is unsupported in IE8. The solution above works fine in all browsers.
Try this :
.sidebar {
float: left;
min-height: 50px;
background: red;
width: 200px;
}
.content {
background : yellow;
margin-left: 200px;
min-height: 50px;
}
https://jsfiddle.net/Saiyam/5krmkkkx/3/
There a couple of simple ways to do this without the need for calc, margins or absolute positioning. Both of the following ways have the added bonus of keeping the columns the same height as each other
Using display table (compatible to back ie8)
.main {
display: table;
width: 100%;
}
.main > div {
display: table-cell;
}
.sidebar {
width: 200px;
background: blue;
}
.content {
background: red;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
Using flex (for newer browsers only unless used with the browser prefix):
.main {
display: flex;
width:100%;
max-width:100%;
}
.sidebar {
width: 200px;
flex: 0 0 200px;
background-color:blue;
}
.content {
background-color:red;
flex: 1 0 auto;
}
<div class="main">
<div class="sidebar">200px</div>
<div class="content">the rest</div>
</div>
I'm having many issues regarding the positioning of div boxes in HTML and CSS. I have got a wrapper and 2 boxes. I want one box on the left and the other on the right, however the box on the right appears under the others. Why is this? I don't want to use "top" as it messes with a few other things. What do I do?
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Harry Kitchener - Home</title>
</head>
<body>
<div id="wrapper">
<div id="navbar"></div>
<div id="newsbar"></div>
</div>
</body>
</html>
#wrapper
{
position: relative;
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
}
FIXED:
#wrapper
{
height: 100%;
min-height: 100%;
min-width: 1000px;
background-color: #ccc;
}
#navbar
{
float: left;
height: 100%;
width: 15%;
background-color: #A13927;
}
#newsbar
{
float: right;
height: 100%;
width: 15%;
background-color: #A13927;
}
The default display for a div is: "display: block".
Blocks don't obey "width" style and span as 100%. The following elements are put below the block-displayed div.
Try adding the style to your divs as "display: inline-block" (i.e. to those divs you want to see consecutive).
EDIT: did not fully understand the question fully. BESIDES doing what i told, you can put "float: left" and "float: right" to those divs if you want them to stick to the left and right respectively.
add Float:left and float:right:
#navbar
{
position: relative;
height: 100%;
width: 15%;
background-color: #A13927;
float:left;
}
#newsbar
{
position: relative;
margin-left: auto;
height: 100%;
width: 15%;
background-color: #A13927;
float:right;
}
The answer to your question is because the elements are position relative to each other.
You have multiple "solutions":
1) float your elements. See JSFiddle
E.g.
#newsbar
{
float: right;
width: 15%;
background-color: #A13927;
}
2) Change your positioning to be fixed, but likely you want absolute. See JSFiddle
E.g.
#newsbar
{
position: absolute;
right:0;
width: 15%;
background-color: #A13927;
}
3) Other options as well (display: table-cell, et cetera)
You have a ton of solutions for this one. Here are three ways of doing it, each method will produce slightly different results. jsFiddle
HTML:
<div class="method-1">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-2">
<div class="left">
</div>
<div class="right">
</div>
</div>
<div class="method-3">
<div class="left">
</div>
<div class="right">
</div>
</div>
CSS:
div div {
height: 10em;
width: 15%;
border: 1px solid red;
}
div.method-1 div {
display: inline-block;
}
div.method-2 {
height: 10em;
}
div.method-2 div {
position: absolute;
display: block;
}
div.method-2 div.right {
left: 15%;
margin-left: 1em;
}
div.method-3 {
display: table;
width: 30%;
}
div.method-3 div {
display: table-cell;
}
There are two floated divs of different height inside a wrapper div. I need both of them to be 100% of height of the body i.e. of the same height. Also used clearfix. But height:100% doesnt seem to work. How to do this?
Demo
Html:
<div class="wrapper">
<div class="primary">
<img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
</div>
<div class="secondary">
<img src="http://demo1.opentaps.org/images/products/small/gis_computer_glen_rolla.png" />
</div>
<div class="clearfix">
</div>
</div>
CSS:
body {
min-height: 100vh;
background-color: green;
margin: 0;
}
.wrapper{
background-color: blue;
height: 100%;
}
.primary{
float: left;
width: 80%;
height: 100%;
background-color: yellow;
}
.primary img{
height: 100px;
width: 100px;
}
.secondary{
float: right;
width: 20%;
background-color: red;
height: 100%;
}
.secondary img{
height: 500px;
width: 100px;
}
.clearfix{
clear: both;
}
All you need to do is add a height of 100% to the html and body tags like so:
html, body {
height: 100%;
}
Demo:
http://jsbin.com/EsOfABAL/1/
if you want to use vh units (seen in your code), it does makes it easier, no need to worry about 'heritage' and see your columns being stopped at 100% height of the window.
if you mix the method of faux-column and clear fix , you need to set only once min-height:100vh; on the floatting element.
Your yellow background has to be drawn in the wrapper and the red one in the non-floatting element wich is stretch with the clearfix method.
body {
margin: 0;
}
.wrapper{
background-color: yellow;
overflow:hidden;
}
.primary{
float: left;
width: 80%;
min-height:100vh;
}
.wrapper .primary img{
height: 100px;
/* width:1000px; */
width: 100px;
}
.secondary .overflow{
margin-left:80%;
background-color: red;
}
.overflow:after {
content:'';
height:0;
display:block;
clear:both;
}
.secondary img{
height: 500px;
/*height:100px;*/
width: 100px;
}
uncomment height value for image to check behavior and drawing of your page, scrolling or not .
http://codepen.io/anon/pen/chHtK
Hope this helps you to understand the use of vh (or vw) units , for the faux-column and clearfix methods, it's just a reminder of old methods :)
Enjoy
The html element also needs to be 100% - try this:
html { height: 100%; }
body {
height: 100%;
background-color: green;
margin: 0;
}
I have a vertical parent container div with fixed positioning and height in pixels. I have child divs with same width as the parent. How do i stack these child divs inside the fixed parent? I am uanble to get through. please help.
If you want to do it statically, just set each child div's top property how you want it.
So if those child divs are 50px in height
#child1{
position:relative;
top:50px;
}
#child2{
position:relative;
top:100px;
}
and so on
They should already be stacked. Could you elaborate on your problem?
HTML
<div id="container">
<div class="stack one"></div>
<div class="stack two"></div>
<div class="stack three"></div>
</div>
CSS
#container {
width: 250px;
}
.stack {
width: 250px; height: 100px;
}
.one { background: red; }
.two { background: green; }
.three { background: orange; }
jsFiddle
Updated -
After reading your reply, I've now updated the CSS - jsFiddle
CSS
#container {
position: relative;
width: 250px; height: 300px;
}
.stack {
position: absolute;
width: 250px; height: 100px;
}
.one { background: red; bottom: 0; }
.two { background: green; bottom: 100px; }
.three { background: orange; bottom: 200px; }
I wanna set one div to be shown on another one.
I can do it by enter it in end of html code after other one,but I wanna do it by css.
how can I do it?
I'm guessing this is what you mean: having the divs overlap when placed one after the other in the markup? You can achieve this by making them position: absolute.
<div id="div1">
</div>
<div id="div2">
</div>
#div1, #div2 {
position: absolute;
}
#div1 {
background-color: red;
width: 100px;
height: 100px;
}
#div2 {
background-color: blue;
width: 100px;
height: 100px;
top: 5px;
left: 5px;
}