aligning divs between two divs
The two divs in between are not properly aligned with the two red divs on both sides.
I used “.menu:nth-child(2n){margin-top:-20px;}” as Monika suggested but still cannot get the result
* {
box-sizing: border-box;
}
.menu {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:red;
}
.men {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:green;
margin-top:-20px;
}
.main {margin-top:5%;
height:20px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;
}
.mai {
margin-top:5%;
height:30px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;}
<div class="menu"><ul><li>The Flight</li> </ul></div>
<div class="main"></div>
<div class="mai"></div>
<div class="men"><ul> P<li>The Flight</li></ul></div>
screenshot after removing the line
According to your code, they're not aligning because you have a margin-top for .main, just remove the line.
* {
box-sizing: border-box;
}
.menu {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:red;
}
.men {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:green;
margin-top:-20px;
}
.main {
height:20px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;
}
.mai {
margin-top:5%;
height:30px;
width: 50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;}
<div class="menu"><ul><li>The Flight</li> </ul></div>
<div class="main"></div>
<div class="mai"></div>
<div class="men"><ul> P<li>The Flight</li></ul></div>
This can be achieved by using pseudo class, please check the css below
* {
box-sizing: border-box;
}
.menu {
height:200px;
width: 25%;
float:left;
padding: 15px;
border: 1px solid red;
background:red;
}
.menu:nth-child(2n){
margin-top:-20px;
}
.main {
height:20px;
width: 50%;
float:left;
padding:0px;
border:1px solid red;
background:#222;
}
.mai {
margin-top:5%;
height:30px;
width:50%;
float:left;
padding:0px;
border: 1px solid red;
background:#222;
}`
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 want to make a div which has two divs inside itself, and also I want to position them ALL in center using the margin:auto property. But it's not working properly. I've searched the web for this problem but I couldn't find a good answer. What have I missed?
<style>
body{
padding: 0px;
margin:0px;
}
.top{
padding: 0px;
margin:0px;
width:100%;
height:50%;
background-color: lightblue;
}
.top div{
margin:auto;
padding:0px;
box-shadow:2px 2px 2px black;
width:200px;
height:200px;
background-color: red;
border-radius:20px;
}
.top div div{
margin:auto;
padding:0px;
box-shadow:2px 2px 2px black;
width:100px;
height:100px;
background-color: red;
border-radius:20px;
}
</style>
to whom asked for html:
<body>
<div class="top">
<div>
<div>
</div>
</div>
</div>
</body>
Please update you following class. Please add positions to .top div {position:relative;} and update the .top div div class.
Html
<div class="top">
<div><div></div></div>
</div>
Css
body{
padding: 0px;
margin:0px;
}
.top{
padding: 0px;
margin:0px;
width:100%;
height:50%;
background-color: lightblue;
}
.top div{
margin:auto;
padding:0px;
box-shadow:2px 2px 2px black;
width:200px;
height:200px;
background-color: red;
border-radius:20px;
position:relative;
}
.top div div{
margin:auto;
padding:0px;
box-shadow:2px 2px 2px black;
width:100px;
height:100px;
background-color: red;
border-radius:20px;
vertical-align: middle;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
Demo here
I just want to keep display table for container and display table-cell for h1 (to get it vertically centered) and I want to put an arrow under the h1 and out of the red div
my code is :
.container{
display:table;
width:200px;
height:50px;
background-color:red;
text-align:center;
}
.h1{
display:table-cell;
vertical-align:middle;
}
.sub{
width: 0px;
height: 0px;
position: absolute;
margin: 0px auto;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 30px solid black;
display: inline-block;
}
<div class="container">
<h1> title 1 </h1>
<div class="sub"></div>
</div>
I think this way is a little better:
http://jsfiddle.net/es_kaija/dqjb6kqr/15/
<div class="container">
<h1> title 1 </h1>
</div>
.container {
display:table;
width:200px;
height:50px;
background-color:red;
text-align:center;
position: relative;
}
h1 {
display:table-cell;
vertical-align:middle;
}
.container:after {
top: 100%;
left: 50%;
border: solid transparent;
content:" ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 0, 0);
border-top-color: #000000;
border-width: 30px;
margin-left: -30px;
}
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/
here is my how i want the website design to be :
so i am in the initial step, my query is how do i place the slider div upon the header div and i want it to be in the centre. my code what i have used is :
<div id="header">
<div class="slider">
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
body {
margin:0px;
padding:0px;
background:#fff;
}
#header
{
background:#859685;
height:300px;
}
.slider
{
margin-left:auto;
margin-right:auto;
margin-top:50px;
position:absolute;
z-index:1;
width:980px;
height:200px;
border: 4px #666 solid;
}
.content
{
margin-left: auto;
margin-right: auto;
margin-bottom:10px;
margin-top:10px;
width:980px;
height:400px;
background:#fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.footer
{
margin-top:10px;
margin-bottom:10px;
padding: 0;
height:300px;
background:#98AFC7;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background:#111312;
}
here is my fiddle jsfiddle.net/hdmep/
Thanx in advance!
Change your slider class to something like this:
.slider
{
margin-left:auto;
margin-right:auto;
left:0;
right:0;
margin-top:250px;
position:absolute;
width:980px;
height:200px;
border: 4px #666 solid;
}
Check out this Working Fiddle
I changed the sizes a little bit (so it'll look nice in the Fiddle)
this is all about absolute positioning.
also if you're just going to use background for color, use background-color instead of background
and, notice the short way of using margin for all sides at once.
CSS:
#header
{
background-color: #859685;
height: 100px;
position: relative; /*the slider is now relative to the header*/
}
.slider
{
position:absolute;
width: 80%; /*80% of header*/
height: 50%; /* 50% of header*/
border: 4px #666 solid;
top: 70%;
left: 10%;
}
.content
{
margin: 10px auto;
height: 100px;
background-color: azure;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.footer
{
margin: 10px 0;
height: 100px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #111312;
}
try this:
DEMO
update slider class:
.slider {
margin-left: auto;
margin-right: auto;
bottom: -150px;
position: relative;
z-index: 1;
width: 980px;
height: 200px;
border: 4px #666 solid;
}