I have try to set using flex. please check my demo my code
its possible using flote but my required using flex.
I set it up using Flex but I not found success in it. You help me...
my code
.cg-box-layout-two{display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;align-items: stretch;position: relative;}
.cg-box-layout-two .cg-box-name{flex: 0 0 100%;max-width: 100%;}
.cg-box-layout-two .cg-layout-img{flex: 0 0 36%;max-width:36%;box-sizing: border-box;border-radius: 6px;overflow: hidden;box-shadow:0 0px 10px rgba(0,0,0,0.2);position: relative;}
.cg-box-layout-two .cg-layout-img .cg-our-top-pick{position: absolute;background-color: #77b21d;color: #fff;font-size: 12px;font-weight: 700;text-transform: uppercase;padding: 4px 0px;transform: rotate(45deg);right: -68px;top: -23px;transform-origin: 0 0;width: 153px;box-sizing: border-box;text-align: center;white-space: nowrap;overflow: hidden;box-shadow: 1px 2px 7px rgba(0,0,0,0.2);}
.cg-box-layout-two .cg-layout-img .cg-li-photo{max-height:220px;padding: 32px 4px 16px;box-sizing: border-box;}
.cg-box-layout-two .cg-layout-content{flex: 0 0 calc(64% - 15px);max-width:calc(64% - 15px);box-sizing: border-box;padding:16px;position: relative;box-shadow:0px 0px 6px rgba(0,0,0,0.1);border-radius: 6px;overflow: hidden;margin-left: 15px;}
.cg-box-layout-two .cg-layout-img .cg-li-photo img{max-width: 100%;
display: block;
margin: 0 auto;
max-height: 180px;}
.cg-rate{position: relative;font-size: 20px;color: #0d3153;font-weight: bold;line-height: 20px;text-align: center;display: inline-block;padding: 0 15px;min-width: 100px;}
.cg-rate>span{font-size: 14px;display: block;line-height: 14px;}
.cg-rate:before,
.cg-rate:after{content: "";position: absolute;left: 0px;height: 31px;width: 15px;background-size: 100%;background-repeat: no-repeat;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAfCAMAAAAP3mfjAAAAb1BMVEUAAAANMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVN1VGFuAAAAJHRSTlMA82fJ6LAjEgaim3U93YpINs24V00N4tS9kX9vYFMrHxqolkKuk4aZAAAA40lEQVQY002PiRKDIAxEEw5F8b5q1dYe+//fWBgRmxkGHskmGwqRVq2/Ipbg8z26YwF5ci5fpIH6ZInS6LmI2hl4UCG+JrAA1g7+M0QF6bA7oFh2arJy+oyxeiOq77kJeYDTO1Be47AAsNFqBgX48mi4KR66CpDJfKceyAO7Vuo1ASJwwi4H3JJT3UhwWa18LWQM1ZcgHbbE77+dAwCsM3iwoaGCa8e94vT4eHaqXVIL9PQXH0BkY5BUbyHAFvoQ8NHhDTzJh3Wsaj9pCAIxGPKmdoq2u0m3OuKX4Re90i0gE6If9SsTmsaqO/oAAAAASUVORK5CYII=');}
.cg-rate:after{left: auto;right: 0px;top: 0;transform: rotateY(180deg);}
.cg-box-layout-two .cg-layout-img .cg-li-ratebadge,
.cg-box-layout-one .cg-layout-img .cg-li-ratebadge{margin:12px auto;text-align: center;}
<div class="cg-box-layout-two cg-red">
<div class="cg-layout-img">
<div class="cg-our-top-pick">Our Top Pick</div>
<div class="cg-li-photo">
<a href="https://www.amazon.com/dp/B01AZC3I6U/?tag=10b-gm-20" target="_blank" rel="nofollow" class="cg-aff-link ">
<img src="https://m.media-amazon.com/images/I/41h0H4SCgPL.jpg" class="cg-img-1" alt="Best Projector Under $200">
</a> </div>
<div class="cg-li-ratebadge"><div class="cg-rate"><span>7.8/10</span> <span>Our Score</span></div></div>
</div>
<div class="cg-layout-content">
<div class="cg-text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> </div>
<div class="cg-lc-button">
Check Price
</div>
</div>
</div>
There are a few things I modified.
I used two flex boxes, the first one has a direction of column, which contains tow vertical objects. the second one has a direction of row, which contains two horizontal objects. the image and the upper box are grouped into the second flex box since they have to show at the same row. the first flex box wraps everything.
I assigned a fixed height of the image box, 290px, since I've used JS to rearrange layout meanwhile detecting overflow occasions.
const upperText = document.querySelector('.cg-layout-content');
const lowerText = document.querySelector('.cg-layout-below');
function paragraphAppender(...sentences){
let flag = false;
for(let i = 0; i < sentences.length; i++){
let pNode = document.createTextNode(sentences[i]);
if(flag){
lowerText.appendChild(pNode);
}else{
let beforeAdd = 290;
upperText.appendChild(pNode);
if(upperText.getBoundingClientRect().height > beforeAdd){
flag = true;
upperText.removeChild(pNode);
}
}
}
}
let exp = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. ';
paragraphAppender(exp, exp, exp, exp);
.flex-row{
display: flex;
flex-direction: row;
margin-top: 2vmin;
}
.flex-column{
display: flex;
flex-direction: column;
}
.cg-box-layout-two{
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
align-items: stretch;
position: relative;
}
.cg-box-layout-two .cg-box-name{
flex: 0 0 100%;
max-width: 100%;
}
.cg-box-layout-two .cg-layout-img{
flex: 0 0 36%;
max-width:36%;
box-sizing: border-box;
border-radius: 6px;
overflow: hidden;
box-shadow:0 0px 10px rgba(0,0,0,0.2);
position: relative;
}
.cg-box-layout-two .cg-layout-img .cg-our-top-pick{
position: absolute;
background-color: #77b21d;
color: #fff;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
padding: 4px 0px;
transform: rotate(45deg);
right: -68px;
top: -23px;
transform-origin: 0 0;
width: 153px;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
overflow: hidden;
box-shadow: 1px 2px 7px rgba(0,0,0,0.2);
}
.cg-box-layout-two .cg-layout-img .cg-li-photo{
max-height:220px;
padding: 32px 4px 16px;
box-sizing: border-box;
}
.cg-box-layout-two .cg-layout-content{
flex: 0 0 calc(64% - 15px);
max-width:calc(64% - 15px);
box-sizing: border-box;
padding:16px;
position: relative;
box-shadow:0px 0px 6px rgba(0,0,0,0.1);
border-radius: 6px;
overflow: hidden;
margin-left: 15px;
}
.cg-layout-below{
box-sizing: border-box;
padding:16px;
position: relative;
box-shadow:0px 0px 6px rgba(0,0,0,0.1);
border-radius: 6px;
overflow: hidden;
}
.cg-box-layout-two .cg-layout-img .cg-li-photo img{
max-width: 100%;
display: block;
margin: 0 auto;
max-height: 180px;
}
.cg-rate{
position: relative;
font-size: 20px;
color: #0d3153;
font-weight: bold;
line-height: 20px;
text-align: center;
display: inline-block;
padding: 0 15px;
min-width: 100px;
}
.cg-rate>span{
font-size: 14px;
display: block;
line-height: 14px;
}
.cg-rate:before,
.cg-rate:after{
content: "";
position: absolute;
left: 0px;
height: 31px;
width: 15px;
background-size: 100%;
background-repeat: no-repeat;
background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAfCAMAAAAP3mfjAAAAb1BMVEUAAAANMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVMNMVN1VGFuAAAAJHRSTlMA82fJ6LAjEgaim3U93YpINs24V00N4tS9kX9vYFMrHxqolkKuk4aZAAAA40lEQVQY002PiRKDIAxEEw5F8b5q1dYe+//fWBgRmxkGHskmGwqRVq2/Ipbg8z26YwF5ci5fpIH6ZInS6LmI2hl4UCG+JrAA1g7+M0QF6bA7oFh2arJy+oyxeiOq77kJeYDTO1Be47AAsNFqBgX48mi4KR66CpDJfKceyAO7Vuo1ASJwwi4H3JJT3UhwWa18LWQM1ZcgHbbE77+dAwCsM3iwoaGCa8e94vT4eHaqXVIL9PQXH0BkY5BUbyHAFvoQ8NHhDTzJh3Wsaj9pCAIxGPKmdoq2u0m3OuKX4Re90i0gE6If9SsTmsaqO/oAAAAASUVORK5CYII=');
}
.cg-rate:after{
left: auto;
right: 0px;
top: 0;
transform: rotateY(180deg);
}
.cg-box-layout-two .cg-layout-img .cg-li-ratebadge,
.cg-box-layout-one .cg-layout-img .cg-li-ratebadge{
margin:12px auto;
text-align: center;
}
<div class='flex-column'>
<div class="cg-box-layout-two cg-red">
<div class='flex-row'>
<div class="cg-layout-img">
<div class="cg-our-top-pick">Our Top Pick</div>
<div class="cg-li-photo">
<a href="https://www.amazon.com/dp/B01AZC3I6U/?tag=10b-gm-20" target="_blank" rel="nofollow" class="cg-aff-link ">
<img src="https://m.media-amazon.com/images/I/41h0H4SCgPL.jpg" class="cg-img-1" alt="Best Projector Under $200">
</a> </div>
<div class="cg-li-ratebadge"><div class="cg-rate"><span>7.8/10</span> <span>Our Score</span></div></div>
</div>
<div class="cg-layout-content">
<div class="cg-text">
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> -->
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> -->
</div>
<div class="cg-lc-button">
Check Price
</div>
</div>
</div>
<div class="cg-layout-below">
<div class="cg-text">
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> -->
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> -->
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. </p> -->
</div>
<div class="cg-lc-button">
Check Price
</div>
</div>
</div>
</div>
Here are a few things to notice:
Paragraph contends are directly injected into .cg-layout-content and .cg-layout-below, since .cg-text has no text styling. in addition I don't know how you are going to arrange Check Price.
by using this method, you must make sure there are some context to write in as paragraph, otherwise the layout mess up.
Related
I want to put a quote block over an image, but I don't know how. I tried using absolute positioning but it ends up at the top of the page instead of the section the HTML tag of it is on. I tried (using my basic HTML knowledge) to position it lower but, every time it either doesn't move or it just disappears completely.
quote block
[![enter image description here][1]][1]
image/lower section of website
[![enter image description here][2]][2]
upper section of website
[![enter image description here][3]][3]
Here's my code:
#import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
body {
font-family: 'Playfair Display', serif;
color: white;
background-color: rgb(109, 107, 107);
cursor: default;
}
header {
background-color: rgb(80, 79, 79);
padding: 30px;
margin: -20px -8px -20px -18px;
width: auto;
text-align: center;
}
#title {
font-size: 40px;
}
#image {
border: 2px solid white;
}
#img-caption {
font-style: italic;
}
#img-div {
text-align: center;
}
#accomplishments-section {
background-color: rgb(151, 146, 140);
padding: 50px;
margin: -20px -5px -20px -20px;
}
footer {
text-align: center;
background-color: rgb(228, 219, 209);
margin: -20px -8px -20px -18px;
padding: 15px;
color: rgb(80, 79, 79);
}
#left-picture {
width: 500px;
height: 500px;
position: relative;
border-radius: 3%;
}
h2 {
font-size: 30px;
}
p {
font-weight: 550;
cursor: text;
}
#tribute-info {
font-size: larger;
}
#quote-text {
background-color: rgb(182, 177, 170);
padding: 30px;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
}
a {
color: rgb(80, 79, 79);
}
a:hover {
color: rgb(104, 104, 104);
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8" />
<title>A Malcolm X Tribute Page</title>
</head>
<body>
<header>
<h1 id="title">Malcolm X</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin blandit nec orci quis facilisis. Nulla
molestie aliquam dui non ultrices. </p>
</header>
<!-- <hr /> -->
<section>
<main id="main">
<h2 style="margin-top: 50px;">About Malcolm</h2>
<figure>
<div id="img-div">
<img id="image"
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fanswersafrica.com%2Fwp-content%2Fuploads%2F2016%2F02%2FmalcolmX.jpg&f=1&nofb=1"
alt="Malcolm speaking on a podium" />
<figcaption id="img-caption">Malcolm making a speech.</figcaption>
</div>
</figure>
<p id="tribute-info" style="margin-bottom: 40px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas blandit commodo arcu a maximus. Sed
volutpat imperdiet augue, eu maximus diam malesuada et. Donec ac scelerisque elit. Nunc non ex tempor
felis auctor rhoncus. Nulla viverra ipsum ac volutpat bibendum. Aliquam bibendum lorem quam, nec
convallis sem dictum sed. Suspendisse fermentum, sem eget suscipit rhoncus, metus lorem varius nulla, at
tempor felis sem nec nunc. Morbi velit nulla, mollis a finibus gravida, dignissim eu nisl. Integer
rhoncus orci id volutpat vulputate. Suspendisse semper dui eu vehicula cursus. Praesent lacus est,
fringilla a diam eget, scelerisque dapibus eros. Maecenas velit justo, posuere et lacus id, tempor
auctor turpis. Vestibulum finibus magna eget turpis egestas, sit amet fringilla nibh fermentum. Etiam at
velit dolor. Praesent venenatis non dolor id gravida.
</p>
</main>
</section>
<hr />
<section id="accomplishments-section">
<h2>Notable Accomplishments</h2>
<q id="quote-text"><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em></q>
<img id="left-picture"
src="https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1200%2F1*BlFeXofPFQdHsxa8JWJZBg.jpeg&f=1&nofb=1"
alt="" />
<!-- separation -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<footer>©2021 - To learn more about Malcolm, <a href="#" id="tribute-link" target="_blank"
title="Malcolm X">visit his wiki page</a>.</footer>
</body>
</html>
You need to set position: relative on the parent element that contains the image and the quote. Then set position: absolute on the qoute.
div {
position: relative;
width: 200px;
}
p {
position: absolute;
background-color: lightpink;
padding: 10px;
top: 50%;
left: 0;
right: 0;
margin: 0;
}
<div>
<img src="https://via.placeholder.com/200"/>
<p>Lorem ipsum.</p>
</div>
I have been trying to figure this out ever since earlier. I've managed to figure out how to keep the navbar in place, but now that I did, the content goes over it and it won't shrink whenever I would resize the browser. I'm still learning how to code so any help and feedback would be really appreciated.
I'd like for the transparent background and the text to shrink or follow along whenever I resize the browser with the navbar in place. Here are my codes.
html,
body {
height: 100%;
margin: 0;
font-size: 20px;
background-image: url('bg2.jpg');
background-size: cover;
background-attachment: fixed;
}
img {
width: 200px;
height: 80px;
padding: 20px 20px 20px 0;
margin-left: 10px;
}
* html .clearfix {
height: 1%;
overflow: visible;
}
* html .clearfix {
min-height: 1%;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
ul {
width: 100%;
margin: 0;
padding: 0;
white-space: nowrap;
}
ul li {
list-style: none;
padding-left: 30px;
line-height: 60px;
}
ul li:firstchild {
border-top: 1px solid white;
}
ul li:hover {
background-color: #d88d4c;
}
ul li a {
text-decoration: none;
color: white;
display: block;
line-height: 60px;
padding: 10%;
}
#image {
width: 100%px;
height: 50%;
}
#container {
width: 700px;
text-align: left;
border: none;
padding: 24px;
margin: 5% 25%;
color: #fff;
background: rgba(31, 22, 25, 0.5);
border-radius: 5%;
}
#right {
width: 85%;
height: auto;
position: absolute;
right: 0;
}
#left {
float: left;
width: 15%;
height: 100%;
position: fixed;
}
.club {
width: 150px;
height: 110px;
}
.bacon {
width: 150px;
height: 110px;
}
.pork {
width: 150px;
height: 110px;
}
.section {
margin: 60px 50px;
}
.section h1 {
font: 55px/65px Helvetica, sans-serif;
}
.section p {
font: 15px/25px Helvetica, sans-serif;
}
nav {
z-index: 500;
float: left;
background-color: #1f1619;
height: 100%;
}
.nav li {
display: inline;
}
.nav a {
color: #5a5a5a;
font-size: 20px;
font-weight: bold;
padding: 14px 10px;
}
.nav {
position: absolute;
top: 20px;
right: 0px;
}
.content {
padding: 0 5% 0% 2%;
}
<!DOCTYPE html>
<html>
<head>
<title>The Watershed</title>
<link rel="stylesheet" type="text/css" href="watershed.css">
</head>
<body>
<div id="left">
<nav>
<div class="logo">
<img src="logo.png">
</h4>
</div>
<ul>
<li> HOME</li>
<li> ABOUT</li>
<li> MENU</li>
<li> CONTACT</li>
</ul>
</nav>
</div>
</div>
<div id="right">
<div id="container">
<div class="content">
<div class="section">
<h1><a name="home">HOME</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise
non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros.
Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</p>
</div>
<div class="section">
<h1><a name="about">ABOUT US</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise
non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros.
Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</p>
</div>
<div class="section">
<h1><a name="menu">MENU</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise
non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros.
Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
<div id="image"><img src="be.jpg" class="bacon" alt="bacon and eggs">
<img src="cs.jpg" class="club" alt="club sandwich">
<img src="hu.jpg" class="pork" alt="humba"></div>
</div>
<div class="section">
<h1><a name="contact">CONTACT</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise
non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros.
Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Is this you want
html,
body {
height: 100%;
margin: 0;
font-size: 20px;
background-image: url('bg2.jpg');
background-size: cover;
background-attachment: fixed;
}
img {
width: 200px;
height: 80px;
padding: 20px 20px 20px 0;
margin-left: 10px;
}
* html .clearfix {
height: 1%;
overflow: visible;
}
* html .clearfix {
min-height: 1%;
}
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
font-size: 0;
}
ul {
width: 100%;
margin: 0;
padding: 0;
white-space: nowrap;
}
ul li {
list-style: none;
padding-left: 0;
line-height: 60px;
text-align: center;
}
ul li:firstchild {
border-top: 1px solid white;
}
ul li:hover {
background-color: #d88d4c;
}
ul li a {
text-decoration: none;
color: white;
display: block;
line-height: 60px;
padding: 10%;
}
#image {
width: 100%px;
height: 50%;
}
#container {
width: 63%;
text-align: left;
border: none;
padding: 24px;
margin: 5% auto;
color: #fff;
background: rgba(31, 22, 25, 0.5);
border-radius: 5%;
max-width: 100%;
}
#right {
width: 83%;
height: auto;
position: absolute;
right: 0;
}
#left {
float: left;
width: 17%;
height: 100%;
position: fixed;
}
.club {
width: 150px;
height: 110px;
}
.bacon {
width: 150px;
height: 110px;
}
.pork {
width: 150px;
height: 110px;
}
.section {
margin: 60px 50px;
}
.section h1 {
font: 55px/65px Helvetica, sans-serif;
}
.section p {
font: 15px/25px Helvetica, sans-serif;
}
nav {
z-index: 500;
float: left;
background-color: #1f1619;
height: 100%;
max-width: 100%;
}
.nav li {
display: inline;
}
.nav a {
color: #5a5a5a;
font-size: 20px;
font-weight: bold;
padding: 14px 10px;
}
.nav {
position: absolute;
top: 20px;
right: 0px;
}
.content {
padding: 0 5% 0% 2%;
}
<div id="left">
<nav>
<div class="logo">
<img src="logo.png">
</div>
<ul>
<li> HOME</li>
<li> ABOUT</li>
<li> MENU</li>
<li> CONTACT</li>
</ul>
</nav>
</div>
<div id="right">
<div id="container">
<div class="content">
<div class="section">
<h1><a name="home">HOME</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non
velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam
ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</div>
<div class="section">
<h1><a name="about">ABOUT US</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non
velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam
ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</div>
<div class="section">
<h1><a name="menu">MENU</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non
velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam
ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
<div id="image"><img src="be.jpg" class="bacon" alt="bacon and eggs"> <img src="cs.jpg" class="club" alt="club sandwich"> <img src="hu.jpg" class="pork" alt="humba"></div>
</div>
<div class="section">
<h1><a name="contact">CONTACT</a></h1>
<p>Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non
velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam
ullamcorper lacina mi ac laculis.Lorem ipsum dolor sit amet, consecteture adipscing elit. Sispendise non velit felis. Vestiblum eget orci. Preasent sit amet porta eros. Nam ullamcorper lacina mi ac laculis. </p>
</div>
</div>
</div>
</div>
In the below code, I want all the three boxes to have same height and also the links in the three boxes should be in same line as shown in the screenshot below. I have used flexbox for doing this. Please help.
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>
Remove align-items: flex-start; from the wrapper, give the div display: flex; flex-direction: column;, and set margin-top: auto on the links
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
display: flex; /* added property */
flex-direction: column; /* added property */
}
.wrapper div a { /* added rule */
margin-top: auto;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>
.wrapper {
display: flex;
flex-direction: row;
justify-content: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
display: flex;
flex-basis: 33%;
flex-direction: column;
justify-content: space-between;
text-align: center;
padding: 10px 4%;
}
.wrapper div a {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: flex-end;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>
I'm trying to setup a section of my page with 3 columns using Flexbox.
The 3 columns are set up just fine, the issue I am having is with the section1 div not being as tall as the children elements.
I have tried height: auto, height:100%, overflow: auto, overflow:visible, etc. The only time the section1 div changes height is when I specifically state a pixel height. It seems as though the flexbox items are acting as floats so I tried a clear:both to no avail.
I have searched both stackoverflow and other sites and have not found an answer which leads me to believe it is something I am doing wrong with flexbox.
body {
background: lightgrey;
}
.body {
position: relative;
width: 75% /* 747.75px */;
margin: auto;
top: -3.5em;
background-color: white;
border-top: 3px solid #ff8400;
}
.top-border {
display: block;
position: relative;
top: 2em;
border-top: 1px solid #eef3f0;
width: 95%;
left: 2.5%;
}
.section1 {
position: relative;
display: flex;
justify-content: space-around;
top: 5em;
height: auto;
}
<div class="body">
<div class="top-border"></div>
<div class="section1">
<div class="what-i-do">
<img class="what-i-do-icon" src="images/what-i-do.png" />
<h1 class="what-i-do-title">What I Do</h1>
<p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
<p class="view-more-btn">View More</p>
</div>
<div class="development">
<img class="development-icon" src="images/development.png" />
<h1 class="development-title">Development</h1>
<p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
<div class="design">
<img class="design-icon" src="images/design.png" />
<h1 class="design-title">Design</h1>
<p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
</div>
</div>
See Relative positioning
Once a box has been laid out according to the normal flow or
floated, it may be shifted relative to this position. This is called
relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1
were not offset and B2 is not re-positioned after B1's offset is
applied. This implies that relative positioning may cause boxes to
overlap.
Here you don't want to shift a single box, you want it to push following content too. Then, you should use margins for that.
body {
background: lightgrey;
}
.body {
width: 75% /* 747.75px */;
margin: auto;
margin-top: -3.5em;
background-color: white;
border-top: 3px solid #ff8400;
}
.top-border {
top: 2em;
border-top: 1px solid #eef3f0;
width: 95%;
margin-left: 2.5%;
}
.section1 {
display: flex;
justify-content: space-around;
margin-top: 5em;
}
<div class="body">
<div class="top-border"></div>
<div class="section1">
<div class="what-i-do">
<img class="what-i-do-icon" src="images/what-i-do.png" />
<h1 class="what-i-do-title">What I Do</h1>
<p class="what-i-do-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
<p class="view-more-btn">View More</p>
</div>
<div class="development">
<img class="development-icon" src="images/development.png" />
<h1 class="development-title">Development</h1>
<p class="development-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu,
a consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
<div class="design">
<img class="design-icon" src="images/design.png" />
<h1 class="design-title">Design</h1>
<p class="design-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam semper quam arcu, a
consequat tellus cursus vel. Vivamus lacus massa, feugiat non malesuada sed, efficitur eu elit. </p>
</div>
</div>
</div>
I have created a list of boxes with text inside that are clickable, however IE sets the text above the link, so when hovering over the text it prioritizes it making the link no longer work. Chrome + Firefox work as intended.
Also I would like to see if a fix is possible without the use of javascript or jQuery, if possible. I also need it to support IE8+.
Here is the jsfiddle.
HTML:
<!DOCTYPE html>
<html>
<body>
<ul class="container">
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>CLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
<li class="optionBox"> <i class="reporting"></i>
Lorem ipsum dolor sit amet.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur lobortis
tortor egestas massa dignissim eu auctor turpis rutrum. Morbi suscipit
dictum lacinia.</p>
</li>
</ul>
</body>
</html>
CSS:
.container {
overflow: hidden;
width: 1000px;
list-style: none;
margin: 15px;
padding: 0;
}
.optionBox {
float: left;
overflow: hidden;
width: 400px;
height: 125px;
cursor: pointer;
margin: 0.3em;
padding: 0.5em 0.5em 2em 0.5em;
color: #555;
background: transparent;
border: solid 1px #DDD;
-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .1);
box-shadow: 0 0 4px rgba(0, 0, 0, .1);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.reporting {
position: absolute;
background:url('http://s13.postimage.org/w73u674ur/icon.png') no-repeat;
float: left;
width:30px;
height:30px;
}
a {
position: absolute;
width: 340px;
height: 115px;
font-size: 1.2em;
padding-left: 3.8em;
color: #08C;
text-decoration: none;
}
a:hover{
text-decoration:underline;
}
p {
font-size: 1.2em;
margin: 1.6em 0 0 3.8em;
}
body {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 20px;
color: #333;
}
This is a bug in IE with absolute positioned anchor elements.
The most common workaround is to set a background to the anchor. However, since you obviously don't want the link to hide the text below it, you'll need to set a transparent background image. In order to do that, I usually prefer to set the background to an existing path that would serve as an invalid image.
For example:
a {
position:absolute;
/* ... */
background:url('about:blank');
}
See jsFiddle demo
Alternatively, you can also create an actual transparent image and set it as the background.