Currently I am making a page where I have 4 divs each taking 50% width and height.
I would like to make a div where a box can float at the exact center of the page overlapping these elements.
This is the coding so far.
<html>
<head>
</head>
<body>
<div style="background-color:red; width:50%; height:50%; float:left">
</div>
<div style="background-color:blue; width:50%; height:50%; float:right">
</div>
<div style="background-color:green; width:50%; height:50%; float:left">
</div>
<div style="background-color:orange; width:50%; height:50%; float:right">
</div>
</body>
</html>
Absolute positioning would seem to be the most obvious solution.
html,
body {
height: 100%;
position: relative;
}
.center {
width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #663399;
}
<div style="background-color:red; width:50%; height:50%; float:left"></div>
<div style="background-color:blue; width:50%; height:50%; float:right"></div>
<div style="background-color:green; width:50%; height:50%; float:left"></div>
<div style="background-color:orange; width:50%; height:50%; float:right">
<div class="center"></div>
</div>
I think that you should try absolute positioning. Here is another SO question where someone asked how to center a popup dialogue. Similar to what you are doing. How to design a CSS for a centered floating confirm dialog?
Look at the answers provided by Steve Robbins and Cristian Toma. Those I think might help you.
Related
I need to center vertically floating divs and images to their container. I tried many ways but none works fine.
Something like this
http://codepen.io/catapanoa/pen/ygaKLy?editors=1100
<div class="leftWrapper">
<div class="title">
Title 1<br>
<span class="subtitle">Subtitle 1</span>
</div>
</div>
.
.
.
This is the best way to center content vertically
.vert-center {
margin-top: 50%;
translate: transform-y(-50%);
}
.wrap { position:relative; }
.center {
width:100%;
height:100%;
top:0;
right:0;
left:0;
bottom:0;
display:flex;
position:absolute;
text-align:center;
align-items:center;
justify-content:center;
}
<div class="wrap">
<div class="center">
<div>
<h1>Title</h1>
<span>span</span>
</div>
</div>
</div>
.title
{
border: 1px solid green;
position: relative;
top:50%;
transform: translateY(-50%);
}
How can I put a div with text, logo or any more stuff on the center of this banner, like the example?
<div class="banner">
<img src="img/banner2.jpg" width="100%" alt="Nasajon Sistemas">
</div>
Example :
My Page
Here there is an example you can fit to your needs:
.center{
text-align:center;
width:200px;
height:100px;
background-color:red;
position:absolute;
top: 50%;
left:50%;
margin-left:-100px;
margin-top:-50px;
}
.outter{
width:100%;
height: 500px;;
background-color:black;
}
<div class="outter">
<div class="center">
<h1>Mywebsite</h1>
</div>
</div>
https://jsfiddle.net/alexcuria/uunwbqyb/
I have this sample
link
CODE HTML:
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
CODE CSS:
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
I want to move div on the right (.right) to be in line with div website (banner) without changing HTML code (just CSS).
I tried to add margin-top:-6em look different on other resolutions.
Can you help me to solve this problem?
Thanks in advance!
If you can only change the CSS, you have to use margin-top:-100px instead of margin-top:-6em if you want to align it. https://jsfiddle.net/ck3pux8x/1/
But the best solution would be changing the HTML to move the .right div outside the .inner an place it next to the .banner and make .banner float right. https://jsfiddle.net/ck3pux8x/2/
HI now try to this define your body position relative and your class .right position absolute and left or top according to your requirement .
as like this
body{
position:relative;
}
.right {
background: aqua;
position: absolute;
left: 400px;
top: 0;
}
Demo
.right{
position:absolute;
left:400px;
top:0;
}
body{position : relative;}
.left,.main,.right{
float:left;
width:200px;
height:100px;
}
.left{
background:red;
}
.main{
background:blue;
}
.right{
background:aqua;
}
.banner{width:300px;background:yellow;height:100px;}
<div class="banner">
</div>
<div class="inner">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
You can use relative re-positioning in this case:
.right{
background:aqua;
position: relative;
top: -100px;
}
https://jsfiddle.net/ck3pux8x/4/
how do i make divs display at the bottom of the screen inline (following each other horizontally like facebook chat) and also overlapping their parent div. i have tried the following but does not work.
<div id="container">
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</div>
#container{
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
#box{
border:1px solid blue;
width:250px;
height:300px;
display:inline-table;
position:fixed;
bottom:0;
}
Wrap the elements in another container div, which is positioned absolutely.
Firstly, you can't use duplicate id's. Use classes instead.
Your HTML will be something like:
<div id="container">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
You can't use display:inline-table and fixed together. Use position:absolute or position:fixed (if you want to make the items stick) for the container div, and for instance display:inline-block for the .box elements to get them inline.
#container {
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
.box-container {
position:absolute;
bottom:0;
height:40px;
width:100%;
}
.box{
border:1px solid blue;
width:250px;
height:40px;
display:inline-block;
}
See http://jsfiddle.net/B228U/1/ for an example.
Cheers,
Jeroen
You can´t give same id to different elements. Use class. Also give main div position:relative and float:left to rhe class box. Like this:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
#container{
height:10px;
position:absolute;
bottom:0;
width:1000px;
margin:0 auto;
}
.box{
border:1px solid blue;
width:250px;
height:300px;
float:left;
display:inline-table;
position:relative;
bottom:0;
}
http://jsfiddle.net/7kwLc/
html
<div id="wrap">
<div id="header">
header
</div>
<div id="content">
content
</div>
<div id="sidebar">
in here will be login module
</div>
</div>
<div id="footer">
asdfasdf
</div>
css
#wrap{
width:100%;
margin:0 auto;
}
#header{
width:100%;
height:50px;
background:orange;
}
#content{
width:100%;
height:500px;
background:green;
float:;
}
#sidebar{
width:25%;
height:550px;
background:red;
float:left;
position:relative;
bottom:550px;
left:20px;
}
#footer{
float:left;
position:ralative;
}
I want the footer div starting from the left side(same as content and header div), but it starts with a weird point.
this is the demo
http://jsfiddle.net/64Uq5/3/
and, can somebody link me on good tutorial understanding position and float?
i think this is the reason, why this messed up, but can't understand what it means, for a newbie front-end designing.
Add left:0px; in your sidebar id #sidebar
#sidebar {
width: 25%;
height: 550px;
background: red;
float: left;
position: relative;
bottom: 550px;
left: 0;
}
HTML
<div style="clear:both"></div> //include this division before footer division
<div id="footer">
asdfasdf
</div>
css
#footer{
position:ralative;
float : left;
margin-top : -550px;
}
check this fiddle
http://jsfiddle.net/ankurdhanuka/Lgyku/