Hi I am trying to position 4 blocks two on top and two at the bottom using the relative positioning and div blocks. However, the second block for some reasons are not showing. Need HELP!~
<!DOCTYPE html>
<html>
<head>
<style>
div{text-align:center;}
span{display:block}
#block1{
width: 300px;
height: 200px;
margin: 0px;
padding:0px;
position: relative;
left:0; top:0;
border: 1px solid black;
#block2{
width: 300px;
height: 200px;
margin: 0px;
padding: 0px;
position: relative;
right:0; top:0;
border: 1px solid black;
</style>
</head>
<body>
<div id="block1"> <span> left:0;top:0; </span></div>
<div id="block2"><span> right:0;top:0;</span></div>
</body>
</html>
There was a typo check the answer
css
div{text-align:center;}
span{display:block}
#block1{
width: 300px;
height: 200px;
margin: 0px;
padding:0px;
position: relative;
left:0; top:0;
border: 1px solid black;
}
#block2{
width: 300px;
height: 200px;
margin: 0px;
padding: 0px;
position: relative;
right:0; top:0;
border: 1px solid black;
}
#block3{
width: 300px;
height: 200px;
margin: 0px;
padding:0px;
position: relative;
left:0; top:0;
border: 1px solid black;
float:left;
}
#block4{
width: 300px;
height: 200px;
margin: 0px;
padding: 0px;
position: relative;
right:0; top:0;
border: 1px solid black;
float:left;
}
HTML
<div id="block1"> <span> left:0;top:0; </span></div>
<div id="block2"><span> right:0;top:0;</span></div>
<div id="block3"> <span> left:0;top:0; </span></div>
<div id="block4"><span> right:0;top:0;</span></div>
o/p
Related
I am trying to design a layout for a project. I have two div containers(leftnav and rightnav) which are floated on left and right. I have to divide the central part into two. "Mailbar" is the upper div in that central region. The problem is that applying borders to "mailbar" div overlaps with the floating div. I want to prevent it from overlapping.
#main {
margin: 0px;
height: 150px;
border: 1px solid black;
}
#leftbar {
float: left;
width: 250px;
height: 100%;
overflow-y: auto;
border-right: 1px solid black;
}
#rightbar {
float: right;
width: 250px;
height: 100%;
overflow-y: auto;
border-left: 1px solid black;
}
#mailbar {
width: 100%;
height: 50%;
border-bottom: 1px solid black;
}
<body>
<div id="main">
<div id="leftbar"> </div>
<div id="rightbar"> </div>
<div id="mailbar"> </div>
</div>
</body>
You can use % to define the width of the navbars, then the remaining % to mailbar and add the width of the left navbar to mailbar as margin-left.
For example:
https://jsfiddle.net/3jjpasum/2/
#main {
margin:0px;
height:150px;
border:1px solid black;
}
#leftbar {
float:left;
width: 15%;
height:100%;
overflow-y: auto;
border-right: 1px solid black;
}
#rightbar {
float:right;
width:15%;
height:100%;
overflow-y: auto;
border-left: 1px solid black;
}
#mailbar {
margin-left: 15%;
width:70%;
height:50%;
background-color: red;
border-bottom: 1px solid black;
}
Remove width: 100%; and add overflow: auto; for #mailbar.
#main {
margin: 0px;
height: 150px;
border: 1px solid black;
}
#leftbar {
float: left;
width: 250px;
height: 100%;
overflow-y: auto;
border-right: 1px solid black;
}
#rightbar {
float: right;
width: 250px;
height: 100%;
overflow-y: auto;
border-left: 1px solid black;
}
#mailbar {
/*width: 100%;*/
height: 50%;
border-bottom: 1px solid black;
overflow: auto;
}
<body>
<div id="main">
<div id="leftbar"> </div>
<div id="rightbar"> </div>
<div id="mailbar"> </div>
</div>
</body>
try like this:
use box-sizing:border-box; for child divs;
and calc for middle div
#main {
margin: 0px;
height: 150px;
border: 1px solid black;
}
#leftbar {
float: left;
width: 250px;
height: 100%;
overflow-y: auto;
border-right: 1px solid black;
box-sizing:border-box;
}
#rightbar {
float: right;
width: 250px;
height: 100%;
overflow-y: auto;
border-left: 1px solid black;
box-sizing:border-box;
}
#mailbar {
width: calc(100% - 500px);
float:left;
height: 50%;
border-bottom: 1px solid black;
box-sizing:border-box;
}
If you have fixed container as in this case. You can just use position absolute.
See example below.
#main {
margin:0px;
height:150px;
position:relative;
border:1px solid black;
}
#leftbar {
float:left;
width:250px;
height:100%;
position:absolute;
left:0;
top:0;
overflow-y: auto;
border-right: 1px solid black;
}
#rightbar {
width:250px;
height:100%;
position:absolute;
right:0;
top:0;
overflow-y: auto;
border-left: 1px solid black;
}
#mailbar {
left:250px;
right:250px;
position:absolute;
border-bottom:1px solid #000;
height:50%;
}
<body>
<div id = "main">
<div id = "leftbar">
</div>
<div id = "rightbar">
</div>
<div id="mailbar"></div>
</div>
</body>
I need "div2" to overlap/cover its two adjacent block. I can do it with "div1", but I cannot do it with "div3". Someone know how to do it? Please see my code below with what I have a problem. Thanks!
HTML:
<div class="parent">
<div class="child_1">Some div1</div>
<div class="child_2">Some div2</div>
<div class="child_3">Some div3</div>
</div>
CSS:
.parent {
position: relative;
font-size: 34px;
border: 1px solid #000;
background: #eef;
height: 110px;
width: 620px;
margin: 20px
}
.child_1 {
position: static;
text-align:center;
display: inline-block;
margin-top:20px;
margin-left:10px;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
}
.child_2 {
position: relative;
text-align:center;
display: inline-block;
margin-left:-30px;
height: 80px;
width: 200px;
border: 3px solid blue;
background:;
left:-30px;
top:-10px;
}
.child_3 {
position: relative;
display: inline-block;
text-align:center;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
left:-30px;
}
.child_3 needs to have left:-60px; in order to overlap .child_2
you have to add the -30px from .child_2to child_3, so -30px -30px = -60px
ADDITION: To really get child_2 to COVER child_3, assing z-index:1 to child_2:
.parent {
position: relative;
font-size: 34px;
border: 1px solid #000;
background: #eef;
height: 110px;
width: 620px;
margin: 20px;
}
.child_1 {
position: static;
text-align:center;
display: inline-block;
margin-top:20px;
margin-left:10px;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
}
.child_2 {
position: relative;
text-align:center;
display: inline-block;
margin-left:-30px;
height: 80px;
width: 200px;
border: 3px solid blue;
background:;
left:-30px;
top:-10px;
z-index:1;
}
.child_3 {
position: relative;
display: inline-block;
text-align:center;
height: 50px;
width: 200px;
border: 3px solid yellow;
background:yellow;
left:-60px;
}
<div class="parent">
<div class="child_1">Some div1</div>
<div class="child_2">Some div2</div>
<div class="child_3">Some div3</div>
</div>
You need to increase the negative left value on child3, and you need you use z-index to position child2 on top
In below sample I simplified your code a little.
.parent {
position: relative;
font-size: 34px;
border: 1px solid #000;
background: #eef;
height: 110px;
width: 600px;
margin: 20px;
}
.child {
position: relative;
display: inline-block;
height: 50px;
width: 200px;
margin: 20px;
text-align:center;
vertical-align: middle;
z-index: 1;
border: 3px solid yellow;
}
.child.nr1 {
background:yellow;
margin-right: -60px;
}
.child.nr3 {
background:yellow;
margin-left: -60px;
}
.child.nr2 {
height: 60px;
border: 3px solid blue;
z-index: 2;
}
<div class="parent">
<div class="child nr1">Some div1</div>
<div class="child nr2">Some div2</div>
<div class="child nr3">Some div3</div>
</div>
I'm trying to make such a stuff
But somehow I got something like the one below(Please ignore the color, font family for now)
My code is here.
HTML:
<div class="box">
<p>Instagram Photo</p>
</div>
<hr>
CSS:
.box{
background-color:red;
width:60%;
margin-left:20%;
height:30px;
z-index:3;
position:static;
}
.box p{
text-align:center;
color:white;
line-height:30px;
}
hr {
border-top: 1px solid red;
border-bottom: 1px solid blue;
z-index:-1;
margin-top:-15px;
position:static;
}
Change position: static to position: relative for the box.
CSS-Tricks reference
z-index only effects elements that have a position value other than
static (the default).
.box {
background-color: red;
width: 60%;
margin-left: 20%;
height: 30px;
z-index: 3;
position: relative;
}
.box p {
text-align: center;
color: white;
line-height: 30px;
}
hr {
border-top: 1px solid red;
border-bottom: 1px solid blue;
z-index: -1;
margin-top: -15px;
position: static;
}
<div class="box">
<p>Instagram Photo</p>
</div>
<hr>
I tried to make it exactly like the image you put.
Whenever you want to put an HTML element above or beneath another element, use the z-index property. The more the value of the z-index, it will be more on the above, and vice versa
.box{
background-color: #F8931F;
position: absolute;
width: 200px;
text-align: center;
color: #fff;
padding: 5px;
text-transform: uppercase;
left: 50%;
top: 40px;
transform: translate(-50%,0);
}
.seperator{
width: 100%;
height: 2px;
position: absolute;
background-color: #F8931F;
top: 52px;
z-index: -1;
}
<div class="box">instagram photos</div>
<div class="seperator"></div>
One suggestion is to use :after for the border.
.box{
height:30px;
z-index:3;
position:static;
}
.box p{
background-color:red;
text-align:center;
color:white;
line-height:30px;
margin: 0;
margin-left:20%;
width:60%;
}
.box:after{
border-top: 1px solid red;
border-bottom: 1px solid blue;
content: '';
display: block;
z-index:-1;
top:-15px;
position: relative;
width: 100%;
height: 0px;
}
<div class="box">
<p>Instagram Photo</p>
</div>
http://jsfiddle.net/afelixj/nrEfm/50/
How to move the inside div sqrBall to the bottom left of the parent div container.
Here is the HTML code:
<div class="container">
<div class="sqrBall">
</div>
</div>
Here is the CSS:
.container{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
}
.sqrBall{
width: 10px;
height: 10px;
background-color: blue;
}
Here is a DEMO
You can use absolute positioning on the inner element if the parent element has relative positioning. for example:
.container{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
position:relative;
}
.sqrBall{
width: 10px;
height: 10px;
background-color: blue;
position:absolute;
bottom:0;
left:0;
}
n.b. if the parent isn't positioned relatively, the inner element will be positioned to the bottom left of the body, not its parent. (at least in this example)
try this demo
Fiddle
.sqrBall {
width: 10px;
height: 10px;
background-color: blue;
position: absolute;
top: 98%;
left: 0;
}
.container
{
position:relative;
}
You have to add two more properties to your existing class .sqrBall
Properties are...
position: relative;
top: 98%;
Below is the working demo, hope it helps you
<style type="text/css">
.container
{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
}
.sqrBall
{
background-color: blue;
height: 10px;
position: relative;
top: 98%;
width: 10px;
}
</style>
<html>
<div class="container">
<div class="sqrBall">
</div>
</div>
</html>
.container {
width: 300px;
height: 300px;
border: 1px solid black;
margin: 0 auto;
position: relative /* Container should have relative position */
}
.sqrBall {
position: absolute; /* Child should have absolute position */
bottom: 0;
left: 0;
width: 30px;
height: 30px;
background-color: blue;
}
<div class="container">
<div class="sqrBall">
</div>
</div>
.container{
width: 500px;
height: 500px;
border: 1px solid black;
margin: 0 auto;
position:relative;
}
.sqrBall{
width: 10px;
height: 10px;
background-color: blue;
position:absolute;
bottom:0;
left:0;
}
Try like this: Demo
Add the following along with your code
CSS:
.container {
display:table;
}
.sqrBall {
float:left;
margin-top: 100%;
}
Demo jsFiddle
I have div color azure I want to fill the width area in the middle column no meter what size will be.
is there any solution with css3/css no jQuery ?
i need it like this picture:
the ststus current like this:
many Thx.
Demo jsFiddle
the code html:
<div id="frame">
<div id="inside_window">
<div id="Yellow"></div>
<div id="Green"></div>
<div id="Blue"></div>
<div id="Red"></div>
<div id="ver"></div>
<div id="hor"></div>
<div id="ver2"></div>
</div>
</div>
the code css:
html, body{
height:100%;
background-color: azure;
}
#frame
{
position: relative;
background-color: black;
height: 100%;
width: 100%;
margin: auto;
padding:0;
border: 1px solid black;
}
#Yellow
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: Yellow;
z-index:10;
display:table;
left:0px;
top:0;
}
#Green
{
position: absolute;
height: 100%;
width: 150px;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: green;
z-index:10;
right:0px;
top:0;
}
#Blue
{
position: relative;
height:100%;
min-width:65.8%;
-webkit-border-radius: 0px;
margin: 0 auto;
background-color: #62A9FF;
z-index:10;
display:table;
font-size:220%;
left:0px;
top:0px;
}
#Red
{
position: absolute;
height: 150px;
width: 100%;
-webkit-border-radius: 0px;
margin: 0 ;
background-color: red;
z-index:10;
border: 1px solid black;
left:0px;
bottom:0px;
}
#inside_window
{
width:100%;
height:100%;
margin:0 auto;
position: relative;
border: 1px solid black;
background-color: brown;
-webkit-transform: rotate(0deg);
-webkit-transform-origin:50% 50%;
}
#ver
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
left:150px;
top:0px;
z-index:1;
}
#hor
{
position: absolute;
height: 5px;
width: 100%;
margin: 0;
background-color: white;
left:0px;
bottom:150px;
z-index:20;
}
#ver2
{
position: absolute;
height: 100%;
width: 5px;
margin: 0;
background-color: white;
right:150px;
top:0px;
z-index:1;
}
Try removing the following CSS from your blue code:
position: relative;
display:table;
There are many ways to acheive a layout like this. Supposing that you could alter the order of your content, you could always try the "Holy Grail" layout method.