My page has a fixed header, and there are content below. I have a div element, inside which I would like to relatively position another div. So I'm using the following structure:
Header: Fixed position
Container div: relative position
Div inside div: absolute position
This is all looking good, however in practice the relative and the absolute divs are displayed in front of the header, when scrolling.
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
I know about z-index, however before using another CSS element, I would like to know if it's possible to solve this problem without adding a new variable to the already existing code. Thank you in advance!
This will work for you:
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
z-index: 0;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2 {
position: fixed;
background-color: white;
z-index: 9;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
I have just added z-index: 0; to div.relative and z-index: 9; to h2[the z-index to the h2 can be changed as per your requirement, it works as layer format, so if you want your h2 to be top of all elements you can even go with z-index: 9999;, but all this depends upon the other elements in the page.].
I believe adding a simple z-index: 1 to the header is the way to go.
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: white;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Use z-index: 1; into your Fixed header will solved the problem.
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: yellow;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Use z-index
h2{
z-index:2;
}
div.relative {
position: relative;
width: 400px;
height: 1000px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
h2{
position: fixed;
background-color: white;
border-bottom:solid 1px #ccc;
top:0px;
z-index:2;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>FIXED HEADER FIXED HEADER FIXED HEADER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliquaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Adding a position to an element takes it out of the normal flow of the page. Which can cause them to overlap each other. The only way to make sure to the elements are displayed in the right order on the z-axis is with the z-index property in css.
h2{
position: fixed;
background-color: white;
z-index: 1;
}
Should be enough to fix your issues.
z-index is the most obvious and easiest way. Set the z-index to a high number like 9999 - z-index:9999. This will bring the header to the top most layer.
Related
I have got the floating image and its descriptions.
I want divs which contain descriptions to be positioned center vertically and flow around the image.
Here is my code.
.parent {
border: 1px red solid;
}
.parent:after, .parent:before {
content: "";
display: table;
clear: both;
}
.left-child {
width: 40vw;
height: 40vw;
border: 1px red solid;
float: left;
}
<div class="parent">
<div class="left-child"></div>
<div clss="right-child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div clss="right-child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
<div clss="right-child">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
Anybody who can help me with solving this?
I recommend to you flex box.
A good link about that is here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
.parent {
border: 1px red solid;
display: flex;
align-items: center;
}
.left-child {
width: 40vw;
height: 40vw;
border: 1px red solid;
}
<div class="parent">
<div class="left-child"></div>
<div class="right-child">
Insert your centered stuff here
</div>
</div>
Set the parent display property to table and the child to table-cell the you can use the vertical-align property to align you content vertically center on its parent:
.parent {
border: 1px red solid;
display: table;
overflow: hidden;
}
.parent:after, .parent:before {
content: "";
display: table;
clear: both;
}
.left-child {
width: 40vw;
height: 40vw;
border: 1px red solid;
float: left;
}
.right-child {
display: table-cell; vertical-align: middle;
}
<div class="parent">
<div class="left-child"></div>
<div class="right-child">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
I'm having two divs with the same height but different content. This content is dynamic made with a CMS. However I want to make the image and button to always be at the bottom of the div. How can I accomplish this? because I only get it to work if I use a fixed height, I never works with height: auto;
here is my HTML/CSS snippet
.box:nth-of-type(2n+1) {
margin-right: 10%;
}
.box {
width: 45%;
height: auto;
background-color: #ffffff;
box-shadow: 0 15px 14px -3px #d1daeb;
}
.box a {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: #602b96;
padding: 15px 50px;
text-decoration: none;
}
.box a:hover {
color: #ffffff;
}
.box div {
padding: 35px 40px 0px 40px;
}
.box img {
padding-top: 35px;
width: 100%;
}
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
This is how it looks now:
How sould i do this?
You can do this by flex. These are the styles that I added
body {
margin:0;
display: flex;
}
.box {
display: flex;
flex-direction: column;
}
.box img {
margin-top: auto;
padding-top: 35px;
width: 100%;
}
body {
margin:0;
display: flex;
}
.box:nth-of-type(2n+1) {
margin-right: 10%;
}
.box {
display: flex;
flex-direction: column;
width: 45%;
height: auto;
background-color: #ffffff;
box-shadow: 0 15px 14px -3px #d1daeb;
}
.box a {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: #602b96;
padding: 15px 50px;
text-decoration: none;
}
.box a:hover {
color: #ffffff;
}
.box div {
padding: 35px 40px 0px 40px;
}
.box img {
margin-top: auto;
padding-top: 35px;
width: 100%;
}
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="buttonArticle" href="#">VIEW</a>
</div>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
You can achieve this with flex and change some html
.box-wrapper {
display: flex;
align-items: stretch;
}
.box:nth-of-type(2n+1) {
margin-right: 10%;
}
.box {
width: 45%;
height: auto;
background-color: #ffffff;
box-shadow: 0 15px 14px -3px #d1daeb;
align-items: start;
display: flex;
flex-direction: column;
}
.box a {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.2px;
color: #602b96;
padding: 15px 50px;
text-decoration: none;
}
.box a:hover {
color: #ffffff;
}
.box div {
padding: 35px 40px 0px 40px;
}
.box img {
padding-top: 35px;
width: 100%;
}
.mt-auto {
margin-top: auto;
}
.p-0 {
padding: 0 !important;
}
<div class="box-wrapper">
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mt-auto p-0">
<a class="buttonArticle" href="#">VIEW</a>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
</div>
<div class="box">
<div>
<h2>Tittle of my div</h2>
<hr>
<span class="clearfix"></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mt-auto">
<a class="buttonArticle" href="#">VIEW</a>
<img src="http://gbchope.com/wp-content/uploads/2016/10/events-placeholder.jpg" alt="" class="">
</div>
</div>
</div>
I've got a flex setup of list items to display information. I have a background image attached to these list items but I would like to create a zoom in effect when hovered or focused by a mouse. I think i'm partly on the way there, however my current setup makes it so that they are stretched out on mobile screens. I'm wondering if there's a way to achieve what i'm trying to do that is responsive.
I've searched for similar posts and I find that a lot of people use overflow: hidden; with a transform scale, I can't seem to get that to work with flex. Any help would be greatly appreciated!
body {
font-family: sans-serif;
}
h2 {
color: #3CAD5D;
padding-bottom: 0px;
margin-bottom: 0px;
}
ul {
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 1500px;
width: 100%;
}
li {
display: flex;
width: calc(33.333333% - 10px);
}
a {
flex-grow: 1;
box-sizing: border-box;
text-decoration: none;
color: #000;
box-shadow: 3px 3px 5px #888888;
padding: 20px;
}
a:hover {
color: #fff;
}
/*** MEDIA QUERIES ***/
#media screen and (max-width: 800px) {
ul {
flex-direction: column;
/* change direction of flex for mobile */
margin: 0 auto;
}
li {
width: 97%;
}
}
/*** BG WITH ZOOM ***/
.bg1 {
background: url('https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781');
margin: 5px;
}
.bg2 {
background: url('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg');
margin: 5px;
}
.bg3 {
background: url('https://ichef.bbci.co.uk/images/ic/560x315/p0517py6.jpg');
margin: 5px;
}
.bg1,
.bg2,
.bg3 {
background-size: 100% 100%;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.bg1:hover,
.bg2:hover,
.bg3:hover {
background-size: 130% 130%;
}
<ul>
<li class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
</ul>
Update
For the first 3 images:
Added a <div> to each <li> then removed .bg* .classes from the <li> and gave them to the new inner <div>. Then added overflow:hidden to <li>.
Added transform: scale(1.3) to the *:hover rulesets.
Changed background-size:100% 100% to background-size:cover
Demo
body {
font-family: sans-serif;
}
h2 {
color: #3CAD5D;
padding-bottom: 0px;
margin-bottom: 0px;
}
ul {
margin: 0 auto;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
max-width: 1500px;
width: 100%;
}
li {
display: flex;
width: calc(33.333333% - 10px);
overflow: hidden;
}
a {
flex-grow: 1;
box-sizing: border-box;
text-decoration: none;
color: #000;
box-shadow: 3px 3px 5px #888888;
padding: 20px;
}
a:hover {
color: #fff;
}
/*** MEDIA QUERIES ***/
#media screen and (max-width: 800px) {
ul {
flex-direction: column;
/* change direction of flex for mobile */
margin: 0 auto;
}
li {
width: 97%;
}
}
/*** BG WITH ZOOM ***/
.bg1 {
background: url('https://cmeimg-a.akamaihd.net/640/clsd/getty/c64f76dc20c246ca88ee180fe4b4b781');
margin: 5px;
}
.bg2 {
background: url('http://www.petmd.com/sites/default/files/hypoallergenic-cat-breeds.jpg');
margin: 5px;
}
.bg3 {
background: url('https://ichef.bbci.co.uk/images/ic/560x315/p0517py6.jpg');
margin: 5px;
}
.bg1,
.bg2,
.bg3 {
background-size: cover;
/* Changed to cover */
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.bg1:hover,
.bg2:hover,
.bg3:hover {
transform: scale(1.3);
/* Changed to transform:scale() */
}
<ul>
<li>
<div class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</li>
<li>
<div class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</li>
<li>
<div class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</div>
</li>
<li class="bg1">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg2">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
<li class="bg3">
<a href="#">
<h2>References</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem
ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</a>
</li>
</ul>
I have a problem with taking a triangle on a bottom of div, as you can see in image below. This three div's are in flexbox.
HTML code:
<section class="main_content">
<div class="1st_class">
<div class="features">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="triangle"></div>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
If you want a flexible solution I would recommend using an SVG background image of a triangle and then stretching it across the bottom of the box.
I have created a jsFiddle to show what I mean.
.active:after {
content: '';
position: absolute;
bottom: -15px;
left: 0;
width: 100%;
height: 15px;
background-size: 100% 100%;
background-image: url(triangle.svg);
}
Unable to figure this out. Which style is correct based on the css? Should each 'lorem' line up in it's own row as it is shown in firefox? or split like in chrome? How can I fix it so both browsers look the same?
Here is what I have currently
<body>
<header>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</header>
<section>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</section>
<article>article Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</article>
<aside>aside Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</aside>
<footer>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</footer>
</body>
http://jsfiddle.net/nKHkg/
body {
width: 960px;
margin: 100px auto;
text-align: center;
}
header {
margin: 5px;
padding: 20px;
}
section {
margin: 5px;
padding: 100px;
}
article {
float: left;
margin: 5px;
padding: 20px;
}
aside {
float: right;
margin: 0 5px;
padding: 20px;
}
footer {
margin: 5px;
padding: 5px;
}
The above looks the same with Firefox
In Chrome, the article and aside is divided into two columns and looks uneven.
All you needed to do was apply good site architecture. When creating sections throughout the site you need to set your containers appropriately by using margin, float, display, and clear:both
See the difference now in your FIDDLE