The div inside another div won't go to the right but just stays to the left. The code below is some what look like chat box the first div with green background has a position of 0px left and it works but the second div has 0px right and it still stick to the left please help me with this it bothers me for 2 day without right solution
<html>
<head>
</head>
<body>
<div style="width:100% height:100%; position: relative; top:0px; left:0px; background-color:white;">
<div style="width:200px; height:100px; position: relative; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: relative; top:10px; right:0px; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
</body>
</html>
position: relative means the div is positioned "relative to itself". So right: 0px just means "move the div 0px to the right of where it would normally be"... not to the right edge of the container.
You could use position: relative on the container, and apply position: absolute to the children instead, but assigning top values will be cumbersome.
Info about position
An alternative might be adding display: flex to the wrapper. Then you can use margin-left: auto to push a div to the right.
.wrapper {
background: lightgrey;
display: flex;
flex-direction: column;
}
div > div {
width: 200px;
height: 100px;
margin-bottom: 10px;
}
.left {
background: green;
}
.right {
background: red;
margin-left: auto;
}
<div class="wrapper">
<div class="left">
<p>1</p>
</div>
<div class="right">
<p>2</p>
</div>
</div>
.parent{
width:100%;
position: relative;
clear: both;
}
.incoming {
float: left;
max-width: 80%;
background-color: #ccc;
padding: 4px;
overflow: auto;
}
.reply {
float: right;
max-width: 80%;
background-color: powderblue;
padding: 4px;
}
<div class="parent">
<div class="incoming"><p>Incoming chat that takes up a maximum of 80%
of screen width.</p></div>
<div class="reply"><p>Reply, that also does the same, but from the right of the screen.</p></div>
</div>
Edited to reflect updated requirement
Using relative element with top, left, bottom and right properties is useless. you have to change it to absolute value.
<div style="width:100% height:100%; position: relative; background-color:white;">
<div style="width:200px; height:100px; position: absolute; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: absolute; top:10px; right:0px; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
UPDATE
here is another way to position elements
<div style="width:100%; height:100px; background-color:white;">
<div style="width:200px; height:100px; float:left; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; float:right; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
UPDATE#2
here is markup for your chat
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.chat {
width: 100%;
background: lightblue;
padding: 10px;
overflow: hidden;
}
.message {
clear: both;
font-family: sans-serif;
color: white;
}
.to, .from {
width: 40%;
padding: 10px;
overflow: hidden;
}
.to {
background: pink;
float: left;
}
.from {
background: lightgreen;
float: right;
}
<div class="chat">
<div class="message">
<div class="to">hi</div>
</div>
<div class="message">
<div class="to">how are u?</div>
</div>
<div class="message">
<div class="from">fine, thnks</div>
</div>
<div class="message">
<div class="to">can u help me?</div>
</div>
<div class="message">
<div class="from">sure, no problem</div>
</div>
</div>
Use float: right; instead of right:0px;.
Here is the code.
<html>
<head>
</head>
<body>
<div style="width:100% height:100%; position: relative; top:0px; left:0px; background-color:white;">
<div style="width:200px; height:100px; position: relative; top:10px; left:0px; background-color:green; font-size:20px;"><p>1</p></div>
<div style="width:200px; height:100px; position: relative; top:10px; float:right; background-color:red; color: white; font-size:20px;"><p>2</p></div>
</div>
</body>
</html>
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>
On a current project I have a similar structure (here I have very simplified the structure):
http://jsfiddle.net/6j5ouhz4/3/
HTML
<div class="container">
<div class="columns">
<div class="column1">
<div class="openFlexbox"> OPEN </div>
<div class="flexbox">TEST
<span class="close">X</span>
</div>
</div>
<div class="column1">
<div class="openFlexbox"> OPEN </div>
<div class="flexbox">TEST
<span class="close">X</span>
</div>
</div>
<div class="column1">
<div class="openFlexbox"> OPEN </div>
<div class="flexbox">TEST
<span class="close">X</span>
</div>
</div>
<div class="column1">
<div class="openFlexbox"> OPEN </div>
<div class="flexbox">TEST
<span class="close">X</span>
</div>
</div>
</div>
</div>
CSS
.container {
border:1px solid black;
width:600px;
min-height:200px;
margin: 0 auto;
background: #ddd;
display:flex;
display: -ms-flexbox;
}
.columns {
column-gap: 8em;
column-count: 2;
}
.column1 {
display: block;
border:1px solid red;
width:200px;
height: 200px;
margin:10px;
position:relative;
}
.flexbox {
display:none;
position: fixed;
top:0;
left:0;
width:100%;
height:100%;
background: #aaa;
font-size:30px;
text-align:center;
z-index: 9999
}
.flexbox.open {
display:block;
}
.close {
border:1px solid #fff;
padding: 5px;
}
.openFlexbox {
background: #a6dbea;
padding: 10px 0;
text-align:center;
display:inline-block;
position:absolute;
width: 100px;
left: 50%;
margin-left:-50px;
top: 40%;
}
JS
jQuery('.openFlexbox').on('click',function(e) {
jQuery(this).next('.flexbox').addClass('open');
});
jQuery('.close').on('click',function() {
jQuery('.flexbox').removeClass('open');
});
Firefox and Chrome don't have any problem, on Microsoft edge the modalbox appear "halfsize" occupying the half area of column where this block is located (in this example instead, it does not appear at all).
Actually, by removing the relative position, the problem disappears, but the "position: relative" I use to center the button..
but the way, the relative position shouldn't effect the fixed positions.
There is a fix for this problem?
the 'openflexbox' does not cover the whole area but maybe this would work for you?
css:
.flexbox {
display:none;
/*position: fixed;*/
top:0;
left:0;
width:100%;
height:100%;
background: #aaa;
font-size:30px;
text-align:center;
z-index: 9999;
}
js:
jQuery('.openFlexbox').on('click',function(e) {
jQuery(this).next('.flexbox').addClass('open');
$('.openFlexbox').css('display', 'none');
});
jQuery('.close').on('click',function() {
jQuery('.flexbox').removeClass('open');
$('.openFlexbox').css('display', 'inline-block');
});
I'm trying to rearrange 3 divs when device width is below 900px. They are arranged as three columns (2 floating divs and main one in the middle) and i don't know how to make them be 2 columns and third div below them (Image shows what i'm aiming at).
Thank you in advance :)
Adding code as you asked :) here is html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<header></header>
<div id="left"></div>
<div id="right"></div>
<div id="middle"></div>
</div>
</body>
</html>
and here is css
#container{
width: 90%;
margin: 0px auto 0px auto ;
}
header{
width: 100%;
height: 200px;
background-color: blue;
}
#left{
float: left;
width: 20%;
height: 500px;
background-color: orange;
}
#right{
float: right;
width: 20%;
height: 500px;
background-color: green;
}
#middle{
width: 80%;
background-color: red;
height: 500px;
}
if i make right div float:none then it moves the middle div
You need to use media queries
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Enjoy
With media queries and flex.
Here is a snippet, (click on run then full screen).
<div class="flex">
<div class="sub c">1</div>
<div class="sub c">2</div>
<div class="doge c">3</div>
</div>
.flex{
display: flex;
flex-wrap: wrap;
}
.c{
height:20px;
width:20px;
border: 1px solid green;
box-sizing: border-box;
}
#media(max-width:600px){
.sub{
width: 50%;
}
.doge{
width: 100%
}
}
<div class="flex">
<div class="sub c"></div>
<div class="sub c"></div>
<div class="doge c"></div>
</div>
Welcome to the world of {in an ominous voice} RESPONSIVE DESIGN ! ,
To perform what you are trying to do you will need to explore Media Queries.
Here is an example of what you are trying to do: JSFiddle
HTML
<div class="container">
<div class="left">
left content flexible width
</div>
<div class="right">
right content fixed width
</div>
<div class="bottom">
Bottom content flexible width
</div>
</div>
CSS
.container {
height: 100px;
overflow: hidden;
}
.left {
float: left;
background: #00FF00;
width: 25%;
overflow: hidden;
height: 100%;
}
.right {
display: inline-block;
width: 50%;
background: #0000ff;
height: 100%;
}
.bottom {
float: right;
background: #ff0000;
display: inline-block;
width: 25%;
height: 100%;
}
#media only screen and (max-width: 900px) {
.container {
height: auto;
overflow: hidden;
}
.left {
float: left;
background: #00ff00;
width: 25%;
overflow: hidden;
height: 100px;
}
.right {
float: none;
width: 75%;
background: #0000ff;
height: 100px;
}
.bottom {
position: relative;
float: none;
background: #ff0000;
width: auto;
overflow: hidden;
height: 50px;
display: inherit;
}
}
Good luck!
It would be helpful to see your sourcecode to tell you why it has not worked. At least you could describe it in more detail. Otherwise I would suspect that clear: both could maybe help you here by redefining a div-class in a media-query. At least this has worked for me.
As an example you could just attach float: left for the left column then the middle column would be following on the right side. By redefining the right-column (class) with clear: both the right-column would then be a footer. This is just an example and would not be the best solution indeed.
Here's my take on it.
/* Styles go here */
body,html{
margin: 0;
padding: 0;
height:100%;
}
.wrapper{
height:100%;
width:100%;
padding: 20px;
}
.div1{
height:100%;
width:30%;
float:left;
background-color:orange;
}
.div2{
height:100%;
width:30%;
float:left;
margin-left:2%;
background-color:red;
}
.div3{
height:100%;
width:30%;
margin-left:2%;
float:left;
background-color:green;
}
#media(max-width:900px){
.wrapper{
height:100%;
width:100%;
clear:both;
}
.div1{
height:70%;
width:49%;
float:left;
background-color:orange;
}
.div2{
height:70%;
width:49%;
float:left;
background-color:red;
}
.div3{
height:30%;
width:100%;
float:left;
margin:20px 0 20px 0;
background-color:green;
}
}
<div class="wrapper">
<div class="div1"><p></p></div>
<div class="div2"><p></p></div>
<div class="div3"><p></p></div>
</div>
I've got the following setup http://jsfiddle.net/47x60k4w/529/.
HTML
<div class="header">
header
</div>
<div class="inner_block">
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
<div class="column">
<img src="xxx" />
</div>
</div>
<div class="footer">
footer
</div>
The inner_block should overlap the header class and the footer should be placed right behind the inner_block.
In my solution I just don't get the footer behind the inner_block without doing not responsible stuff like calling a margin-top with x.xem on it. I just found some links with z-index stuff which didn't worked for me because the inner_block lost his passed height and width from the nested block.
The result should look like this beautiful mockup.
Do you have any ideas?
Thanks in advance.
So I made the following changes to your code:
Remove the position: absolute for the inner-block.
As you are floating the contents of the inner-block you have clear the floats so that the parent container will not lose height.
.inner_block:after {
content: '';
display: block;
clear: both;
}
Whenever using floats, remember to clear it.
Added position: relative to the inner_block to position it over the header and footer.
Added display: block to the img so that you can remove the small space below it characteristic on inline elements (the default display).
Also tinkered a bit with the margins and widths to achieve the layout.
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block {
position: relative;
/*width: 100%;*/
border: solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top: -2.5%;
margin-right: 2.5%;
margin-bottom: 2.5%;
background-color: white;
}
.inner_block:after {
content: '';
display: block;
clear: both;
}
.column {
max-width: 30%;
float: left;
margin-right: 2.5%;
}
.column:first-child{
margin-left: 2.5%;
}
.column:last-child{
margin-left: 0;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
Hope this gives you a head-start. Check it out and let me know your feedback on this. Thanks!
Alternate Solution:
So here is a solution using a flexbox which is easier to set up:
First remove the floating container and the clearfix.
Now Wrap the inner_block with another div
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
Using display: flex allows the images to take the available space along the row and justify-content: center aligns it along the center. Check this out!
.header {
position: relative;
background-color: black;
width: 100%;
height: 50px;
}
.footer {
clear: both;
background-color: red;
width: 100%;
height: 50px;
}
.inner_block_wrapper {
margin: -2.5% 2.5% 2.5% 2.5%;
background-color: white;
position: relative;
}
.inner_block {
border: solid 1px black;
background-color: white;
padding: 5px;
display: flex;
justify-content: center;
}
.column {
margin: 5px;
}
.column img {
max-width: 100%;
height: auto;
display: block;
}
<div class="header">
</div>
<div class="inner_block_wrapper">
<div class=" inner_block ">
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg " />
</div>
<div class="column ">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg " />
</div>
</div>
</div>
<div class="footer ">
test
</div>
You can even try something as below, your codes were fine just set your .footer margin-top equal to the height of .header and .inner_block using css calc() function.
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
background-color:red;
width:100%;
height:50px;
margin-top:calc(100% - 82%);
}
.inner_block{
position: absolute;
width:90%;
border:solid 1px black;
padding: 5px;
background-color:white;
margin:-2.5% calc(100% - 97%);
}
.column {
width:30%;
float:left;
margin:0 1.6%;
}
.column img {
max-width:100%;
height:auto;
}
<div class="header">
</div>
<div class="inner_block">
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088605.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088607.jpg" />
</div>
<div class="column">
<img src="http://www.healthytravellovers.com/wp-content/uploads/2016/09/photo233227749810088606.jpg" />
</div>
</div>
<div class="footer">
test
</div>
is this what you were looking for ?
.header{
position:relative;
background-color:black;
width:100%;
height:50px;
}
.footer{
clear:both;
background-color:red;
width:100%;
height:50px;
}
.inner_block{
position: absolute;
width:100%;
border:solid 1px black;
padding: 5px;
margin-left: 2.5%;
margin-top:-2.5%;
background-color:white;
}
http://jsfiddle.net/8y4e8L08/
.header {
height: 200px;
width:800px;
background-color:#000;
margin:20px;
}
.header {
margin-bottom: -25px;
}
.inner_block {
width: 35%;
height: 150px;
margin: auto 200px;
background-color:#FFF;
border:1px solid #000;
margin-top: -45px;
}
.column{
max-width:20%;
float:left;
border: 2px soid #999;
margin:25px;
}
.column img{
max-width:100%;
height:auto;
}
.footer {
height: 100px;
margin-top: -25px;
margin:20px;
background-color:#F00;
width:800px;
}
.content {
position: relative;
z-index: 1;
}
<div class="header"></div>
<div class="inner_block">
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
<div class="column">
<img src="download.jpg"/>
</div>
</div>
<div class="footer">
</div>
Well just using the z-index won't always work. You also need to specify the 'position' property as well so as to define the z-index wrt some position of the frame.
Z-index is a property which defines the 'depth' or 'height' of an element. If your <header> has z-index of '100' and; <div> element defined inside the header, usually it would be shown above it but once you define the z-index:50; since 50<100, <div> element would be hidden behind it.
Example of z-index
1) http://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
2) https://css-tricks.com/almanac/properties/z/z-index/
Hope it helps.
I have this Tow column page layout || but the problem that the footer is for the whole file
what if I want the footer to be under the right column only as the black footer in this image
I tried to chand the part
footer content
but it didnt came in the place I wanted
<style>
html, body {
font-family: Helvetica;
height: 100%; /*important for equal height columns*/
}
#wrapper{
height: 100%; /*important for equal height columns*/
padding-bottom:60px; /*This must equal the height of your header*/
}
#header{
background-color: #222;
height: 60px; /*This must equal padding bottom of wrap*/
display:block;
padding: 10px;
color: #fff;
}
#main {
position: relative;
height: 100%; /*important for equal height columns*/
width: 100%;
overflow:auto;
display: table; /* This is needed fo children elements using display table cell*/
table-layout: fixed;
padding-bottom: 80px; /*This needs to match footer height*/
overflow: auto;
}
#side{
background-color: #ccc;
width: 200px;
vertical-align: top;
text-align: center;
padding: 10px 0;
display: table-cell; /*To make sibling columns equal in height*/
}
#side-stuff{
display: block;
}
#content{
background-color: pink;
padding: 20px;
display: table-cell; /*To make sibling columns equal in height*/
}
#content-stuff{
width: auto;
height: auto;
}
#footer{
position: relative;
height: 80px;
margin-top: -80px; /* margin-top is negative value of height */
clear: both;
background-color: #222;
color: #fff;
padding: 10px;
}
</style>
<div id="wrapper">
<div id="header">
header content
</div>
<div id="main">
<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
</div>
<div id="content">
<div id="content-stuff">
content stuff
</div>
</div>
</div>
<div id="footer">
footer content
</div>
</div>
Hope this helps
<style>
#wrapper{
margin:0px auto;
padding:0px;
width:1000px;
}
#header
{
margin:0px;
padding:0px;
width:1000px;
height:100px;
background-color:lavender;
}
#content
{
margin:0px;
padding:0px;
width:1000px;
}
#side
{
margin:0px;
padding:0px;
width:250px;
height:700px;
background-color:grey;
float:left;
}
#main
{
margin:0px;
padding:0px;
width:750px;
height:700px;
float:right;
}
#main1
{
margin:0px;
padding:0px;
width:750px;
height:650px;
background-color:pink;
float:right;
}
#footer
{
margin:0px;
padding:0px;
width:750px;
height:50px;
background-color:black;
float:right;
}
</style>
<div id="wrapper">
<div id="header"> Header </div>
<div id="content">
<div id="side">Side</div>
<div id="main">
<div id="main1">Main</div>
<div id="footer">Footer</div>
</div>
</div>
</div>
put the div of the footer inside the div of the side
<div id="side">
<div id="side-stuff">
sidebar stuff
</div>
<div id="footer">
footer content
</div>
</div>