I have just started of with HTML so this is a new realm for me. I am trying to get a rectangular container in the middle of the pafe,Overlaying two other containers. This is the script i wrote and this how i am trying to make it look like
<style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height:800px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
img {
width:100%;
height:100%;
}
.footer {
clear:both;
font-family: 'McLaren', cursive;
background-color:black;
text-align:center;
height:50px;
padding-top: 10px;
box-sizing: border-box;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Two Equal Columns</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
<img src="4.jpg"alt="Snow">
</div>
<div class="column" style="background-color:#bbb;">
<img src="5.jpg"alt="Snow">
</div>
<div class="footer">
© These are random text
</div>
</div>
</body>
</html>
This is what i am trying to get it to look like
Add position:relative to your row Class. This way the orange block can be positioned in the middle of the two .column divs
And then add this css class to the div you want to center
.middleScreen {
position:absolute;
top: 50%;
left: 50%;
width : 100px ;
height : 100px ;
background-color : orange ;
margin-top: -50px; /* = - 1/2 of the height*/
margin-left: -50px; /* = - 1/2 of the width*/
}
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.column {
float: left;
width: 50%;
padding: 10px;
height:800px;
}
.row {
position :relative;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
img {
width:100%;
height:100%;
}
.footer {
clear:both;
font-family: 'McLaren', cursive;
background-color:black;
text-align:center;
height:50px;
padding-top: 10px;
box-sizing: border-box;
}
.middleScreen {
position:absolute;
top: 50%;
left: 50%;
width : 100px ;
height : 100px ;
background-color : orange ;
margin-top: -50px; /* = - 1/2 of the height*/
margin-left: -50px; /* = - 1/2 of the width*/
}
<h2>Two Equal Columns</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
<img src="4.jpg"alt="Snow">
</div>
<div class="column" style="background-color:#bbb;">
<img src="5.jpg"alt="Snow">
</div>
<div class="footer">
© These are random text
</div>
<div class="middleScreen">
aaaaaaaaaaa
</div>
</div>
You can try using absolute position.
Example : if you’re div is 50% of the screen width and height etc.
.div{
position: absolute;
top: 25%;
left: 25%;
}
<style>
* {
box-sizing: border-box;
}
/* Create two equal columns that floats next to each other */
.row{
display: flex;
justify-content: center;
align-items: center;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
img {
width:100%;
height:100%;
}
.footer {
position: fixed;
font-family: 'McLaren', cursive;
background-color: black;
text-align: center;
height: 50px;
padding-top: 10px;
box-sizing: border-box;
width: 100%;
bottom: 0;
}
</style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Two Equal Columns</h2>
<div class="row">
<div class="column" style="background-color:#aaa;">
<img src="4.jpg"alt="Snow">
</div>
<div class="column" style="background-color:#bbb;">
<img src="5.jpg"alt="Snow">
</div>
</div>
<div class="footer">
© These are random text
</div>
</body>
</html>
Hope this code will help you:
body
{
padding:0;
margin:0;
}
.row
{
width: 100%;
height: 100vh;
display: flex;
position: relative;
}
.column
{
width: 50%;
height: 100%;
}
.column img
{
width: 100%;
height: 100%;
object-fit: cover;
}
.yellow
{
background-color: #ff0;
}
.red
{
background-color: #f00;
}
.overlay
{
width: 30%;
height: 30%;
box-sizing: border-box;
padding: 2rem;
background-color: #00f;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
<section class="row">
<div class="column yellow">
<img src="" alt="">
</div>
<div class="column red">
<img src="" alt="">
</div>
<div class="overlay">
<h1>Hello word!</h1>
</div>
</section>
Related
I am starting my approach to CCS and I face my first difficulties.
I have a <div> container and 2 overlaying <div> elements inside the container managed by CSS classes. These three elements are working properly as I want.
But when I add an other element outside the container that I am expecting to show up below the container it overlays on the other elements. I tried to use flexbox instructions but it did not work.
.container {
width: 100%;
position: relative;
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
background: #0057e3;
}
.overlay {
z-index: 9;
width: 20%;
position: absolute;
margin-top: 600px;
margin: 70px;
background: #009938;
}
.imgA {
max-width: 300px;
max-height: 450px;
display: block;
}
<div class="container">
<div class="box"><img src="yyyyyyyyyyyyy"></div>
<div class="box overlay">
<img class="imgA" src="xxxxxxxxxxxxx">
</div>
</div>
<div>
<h1>Why this one overlays?</h1>
</div>
.container does not have a height set and that's where the main problem is happening in your case.
Since there are two absolute positioned divs within your container. The two divs comes out of the normal flow. And your container height stays 0. Since you are not explicitly giving any height to container div.
If you add some height to the container, that will take height in the normal flow and overlay of last div would not happen.
.container {
width: 100%;
position: relative;
left:0;
top:0;
border:1px solid #ccc;
height:400px; /* Added Height */
}
.box {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
}
.overlay {
z-index: 9;
width: 20%;
position: absolute;
margin: 70px;
}
.imgA {
max-width: 300px;
max-height: 450px;
display: block;
}
<div class="container">
<div class="box overlay">
<img src="https://picsum.photos/200/300"/>
</div
<div class="box overlay">
<img class="imgA" src="https://picsum.photos/200/300"/>
</div>
</div>
<div>
<h1>Why this one overlays?</h1>
</div>
Try this code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
text-align: center;
}
.container {
width: 100%;
position: relative;
/* background-color: #0057e3; */
}
.box {
width: 100%;
/* height: 100%; */
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
background: #0057e3;
}
.box img{
height: 400px;
}
.overlay {
z-index: 2;
/* width: 20%; */
position: relative;
margin-top: 600px;
/* margin: 70px; */
background: #009938;
}
.imgA {
max-width: 300px;
max-height: 450px;
display: block;
}
.section-2{
border: 1px solid #0057e3;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="pic2.JPG">
</div>
<div class="box overlay">
<img class="imgAh" src="pic1.JPG">
</div>
</div>
<div class='section-2'>
<h1>Why this one overlays?</h1>
</div>
</body>
</html>
I am trying to split the screen horizontally into 3 equal pieces so I can place separate images into each piece. I have split the screen somewhat equally, but I am running into some issues with a white space and not being split equally.
Here is what I have:
HTML:
<div class="split left">
<div class="centered">
<img src="img_avatar2.png" alt="Avatar woman">
</div>
</div>
<div class="split center">
<div class="centered">
<img src="img_avatar.png" alt="Avatar man">
</div>
</div>
<div class="split right">
<div class="centered">
<img src="golf_course.jpg" alt="Finished Terrain Golf Course">
</div>
</div>
CSS:
/* Split the screen into thirds*/
.split {
height: 100%;
width: 33.3333%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
/* Control the left side */
.left {
left: 0;
background-color: #111;
}
/* Control the right side */
.right {
right: 0;
background-color: red;
}
.center {
right:auto;
left:auto;
background-color:wheat;
}
/* If you want the content centered horizontally and vertically */
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
/* Style the image inside the centered container, if needed */
.centered img {
width: 150px;
border-radius: 50%;
}
Image:
You can use flexbox:
.container {
display: flex;
justify-content: space-between;
}
.container div {
width: 100%;
padding: 5px;
border: 1px solid black;
}
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
You can use grid :
https://css-tricks.com/snippets/css/complete-guide-grid/
in grid you can divide your grid.
*doesn"t work with older browsers like ie11
First, width: available is not valid property. if you want to use all available space you should set width: 100%. anyway, for solving your issue you should use height: 100% also for body and html. see this example:
body, html {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 100%;
}
.leftpane {
width: 33%;
height: 100%;
float: left;
background-color: rosybrown;
border-collapse: collapse;
}
.middlepane {
width: 33%;
height: 100%;
float: left;
background-color: royalblue;
border-collapse: collapse;
}
.rightpane {
width: 33%;
height: 100%;
position: relative;
float: right;
background-color: yellow;
border-collapse: collapse;
}
<div class="container">
<div class="leftpane">
<h1>Test Page</h1></div>
<div class="middlepane">Test Page</div>
<div class="rightpane">
<h1>Test Page</h1></div>
</div>
I have a container thats 900px wide with 2 floating divs inside. I need to make column 2 background full height and dependent to the image to the left. The text in column 2 also needs to be vertically centered, again based on image height.
https://jsfiddle.net/rj5o6n79/1/
<div class="wrapper">
<div class="col span_2_of_3 content">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
</div>
<div class="col span_1_of_3 box2">
This is column 2
</div>
<div style="clear:both;"></div>
</div>
You can use jQuery to get the height of the left div
var leftDivHeight = $('.span_2_of_3').height();
$('.span_1_of_3').css('height',leftDivHeight);
then wrap the content of your inner div to another div
<div class="col span_1_of_3 box2">
<div class='innerContent'> This is column 2 </div> <!-- added div -->
</div>
then add this css to vertically center your inner div
.innerContent{
position: relative;
top: 50%;
transform: translateY(-50%);
}
JSFIDDLE DEMO
Is this what you want?
body { margin:0; padding:0; }
.wrapper { border:1px solid green; width:900px; margin:0px auto; }
.content {
width: 100%; /* or whatever is required */
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */
}
img {
position: relative; /* allows repositioning */
/*left: 100%; move the whole width of the image to the right */
/* margin-left: -200%; magic! */
float:left;
}
/* COLUMN SETUP */
.col {
display: block;
float:left;
margin:0;
}
.col:first-child { margin-left: 0; }
.box { background-color: #ccc; }
.box2 { background-color: red; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 33.8%;
height: 400px;
}
.content {
position: relative;
top: 50%;
text-align:left;
}
<div class="wrapper">
<div class="col span_2_of_3 content">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
</div>
<div class="col span_1_of_3 box2">
<div class="content">
This is column 2
</div>
</div>
<div style="clear:both;"></div>
</div>
I think, I have more or less found what you are looking for. Though the second column isn't full height it is vertically centered and just as big as it needs to be.
.wrapper {
width: 900px;
border: 1px solid #000000;
display: inline-block;
}
.col img{
display: block;
}
.content {
vertical-align: middle;
display: inline-block;
}
.box2 {
display: inline-block;
vertical-align: middle;
}
<div class="wrapper">
<div class="col span_2_of_3 content">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg"/>
</div>
<div class="col span_1_of_3 box2">
This is column 2
</div>
<div style="clear:both;"></div>
</div>
I have a solution of your problem checkout this demo, I think it's working for you. Here is the code:
body { margin:0; padding:0; }
.wrapper {
border: 1px solid green;
width: 900px;
margin: 0px auto;
/* background: #f00; */
display: table;
table-layout: fixed;}
.content {
width: 100%; /* or whatever is required */
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */
}
img {
position: relative; /* allows repositioning */
left: 100%; /* move the whole width of the image to the right */
margin-left: -200%; /* magic! */
}
/* COLUMN SETUP */
.col {
display: table-cell;
vertical-align: middle;
}
.col:first-child { margin-left: 0; }
.box { background-color: #ccc; }
.box2 { background-color: red; }
/* GROUPING */
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
.span_3_of_3 {
width: 100%;
}
.span_2_of_3 {
width: 66.1%;
}
.span_1_of_3 {
width: 33.8%;
}
td{ background:#000; color:#fff;}
<div class="wrapper">
<div class="col span_2_of_3 content">
<img src="http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" />
</div>
<div class="col span_1_of_3 box2">
This is column 2
</div>
<div style="clear:both;"></div>
</div>
I've been trying to figure how to achieve this without JavaScript and padding and so far it's been mission impossible. Does anyone know if there is any way with pure CSS and divs to achieve a simple layout:
http://jsfiddle.net/zLzg8v3s/1/
This is exactly what I'm trying to do but with divs and CSS:
http://jsfiddle.net/u0u7snh6/1/
HTML
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
<div class="tableCell">
<div>
This is the top banner
</div>
</div>
</div>
<div class="tableRow tableContent">
<div class="tableCell">
<div id="content">
This is the content
</div>
</div>
</div>
<div id="footer" class="tableRow" id="bottom">
<div class="tableCell">
<div>
This is the footer
</div>
</div>
</div>
</body>
CSS
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.tableRow {
display: table-row;
text-align: center;
height: 1px;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.tableCell div {
max-width: 400px;
margin: auto;
background-color: brown;
}
.tableContent {
height: 100%;
background-color: yellow;
vertical-align: middle;
}
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
.contentDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#header {
background-color: pink;
}
#footer {
background-color: orange;
}
This is as close as I can get to the layout... what I cannot fix:
1) The content inside the Content div should be vertically aligned middle (very important that the BG of the content cell also is 100% height so it connects to the header and footer)
2) There should not be any overflow: this is a IE8 behavior only (as far as I could tell), so it will be hard to see in JsFiddle... the full code below can be tested locally with IE8's emulation mode:
<!doctype html>
<html lang="en-CA" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>MOCKUP</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.table {
display: table;
height: 100%;
width: 100%;
}
.tableRow {
display: table-row;
text-align: center;
height: 1px;
}
.tableCell {
display: table-cell;
vertical-align: middle;
}
.tableCell div {
max-width: 1200px;
margin: auto;
background-color: brown;
}
.tableContent {
height: 100%;
background-color: yellow;
vertical-align: middle;
}
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
.contentDiv {
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#header {
background-color: pink;
}
#footer {
background-color: orange;
}
</style>
</head>
<body class="table">
<div id="header" class="tableRow" id="top" role="banner">
<div class="tableCell">
<div>
This is the top banner
</div>
</div>
</div>
<div class="tableRow tableContent">
<div class="tableCell">
<div id="content">
This is the content
</div>
</div>
</div>
<div id="footer" class="tableRow" id="bottom">
<div class="tableCell">
<div>
This is the footer
</div>
</div>
</div>
</body>
</html>
Okay found the problem in your code: http://jsfiddle.net/zLzg8v3s/9/
For IE8 testing : http://jsfiddle.net/zLzg8v3s/9/show/
CSS:
#content{
margin: 0 auto;
}
Remove this from your css:
.tableContent * {
height: 100%;
vertical-align: middle;
margin: auto;
}
Removing the asterisk fixed everything.
Solution: 2 JSFIDDLE: http://jsfiddle.net/p1bbyfqa/2/
HTML:
<div id="container">
<div class="header">
<h4>This is header</h4>
</div>
<div class="row">
<div class="content">
<div class="left">Left Col</div>
<div class="middle">Middle Col<br />
Middle Col<br />
Middle Col<br />
Middle Col<br />
Middle Col<br />
</div>
<div class="right">Right Col</div>
</div>
</div>
<div class="footer">
<h4>This is footer</h4>
</div>
</div>
CSS:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
display: table;
height: 100%;
width: 100%;
text-align: center;
}
.row {
display: table-row;
width:100%;
height: 100%;
}
.header, .footer{
background: pink;
display:table-row;
text-align: center;
vertical-align: middle;
}
.content {
display: table;
background: brown;
width:100%;
height: 100%;
overflow: auto;
}
.left, .right{
background: green;
display: table-cell;
width:10%;
vertical-align: middle;
}
.middle{
background: brown;
display: table-cell;
vertical-align: middle;
}
I have a responsive layout, which works perfectly in FireFox, Chrome and Opera but not in IE. It stretches vertically and horizontally in those 3 modern browsers but not in IE. It's based on display:table css technic.
This my code:
<div id="container">
<div id="header"> header header header header header </div>
<div id="contentWraper">
<div id="content">
<div id="columnsWraper">
<div id="leftPanel">left panel <br /> left panel <br /> left</div>
<div id="rightPanel">right panel</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
CSS:
html, body { height: 100%; background: gray; margin: 0; padding: 0; }
#container { display: table; height: 100%; width: 100%;}
#header { height: 0%; display: table-row;}
#contentWraper {height: 100%; background: lightgray; display: table-row;}
#content {height: 100%; background: lightgray; display: table; width: 100%;}
#columnsWraper {height: 100%; display: table-row;}
#footer { height: 0%; display: table-row;}
#leftPanel { background: wheat; width: 100px; display: table-cell; }
#rightPanel { background:yellowgreen; display: table-cell; }
http://jsfiddle.net/wftHq/6/
It works also in IE until I use nested divs with "display:table" style. I had to use it, otherwise "header" was only 100px wide (the width of "leftPanel").
Only in IE "leftPanel" and "rightPanel" doesn't fill the 100% height. Is there a way to fix it in IE ? Does anyone know how to change my code to work in IE. I'm trying to avoid using javaScript.
Without using "table style" and works on IE:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="container">
<div id="header"> header header header header header </div>
<div id="contentWraper">
<div id="content">
<div id="columnsWraper">
<div id="leftPanel">left panel <br /> left panel <br /> left</div>
<div id="rightPanel">right panel</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
CSS:
html,body {
background:gray;
margin:0;
padding:0;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#container {
height:100%;
position:absolute;
width:100%;
}
#header {
background:#FF1493;
top:0;
}
#footer {
background:#87CEEB;
bottom:0;
}
#header, #footer {
position:absolute;
width: 100%;
height: 1.5em;
}
#contentWraper {
position: absolute;
background: black;
width: 100%;
top: 1.5em;
bottom: 1.5em;
}
#content {
background:lightgray;
height:100%;
width:100%;
}
#leftPanel {
vertical-align: top;
background:#F5DEB3;
width:100px;
display: inline-block;
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
bottom: 0;
}
#rightPanel {
background:#9ACD32;
display: inline-block;
height: 100%;
left: 100px;
right: 0;
position: absolute;
}