Floating / wrapping around an absolutely positioned element? - html

I have a content box (#left-home-content), with a series of paragraphs, and at the end, a link in a <span> (.read-more-link), and then a <div> (#left-home-spread) that I want positioned absolutely from the bottom of the box. That's easy enough. The trick is that I want the have the paragraphs wrap around this <div>. Code is below, CSS first:
/* #group Left upper home content */
#left-home-content-container {
background-image: url(/dev/images/bg-primary-content.png);
height: 273px;
padding-top: 30px;
margin-top: -15px;
margin-left: 31px;
position: relative;
float: left;
}
#left-home-content {
width: 590px;
height: 240px;
}
#left-home-content h3 {
font: normal 20px/1.2 AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
color: #e2876a;
margin-bottom: 6px;
font-size-adjust: 0.47;
}
#left-home-content p {
line-height: 1.6;
margin-bottom: .6em;
}
.read-more-link {
display: block;
font-family: AvenirLTStd65Medium, "Helvetica Neue", HelveticaNeue, Helvetica-Neue, Helvetica, Arial, Verdana, sans-serif;
font-size-adjust: 0.47;
font-weight: normal;
font-style: normal;
margin-top: 12px;
}
#left-home-content .read-more-link {
margin-top: 12px;
}
#left-home-spread {
position: absolute;
bottom: 34px;
right: 34px;
}
/* #group Spread the word */
.spread-the-word {
background: url(/dev/images/bg-spread.png) no-repeat;
width: 260px;
height: 31px;
padding-top: 17px;
padding-left: 15px;
-moz-border-radius: 10px; /* FF1+ */
-webkit-border-radius: 10px; /* Saf3-4 */
border-radius: 10px; /* Opera 10.5, IE 9, Saf5, Chrome */
box-shadow: 0 0 5px rgba(86,86,86,0.25);
-moz-box-shadow: 0 0 5px rgba(86,86,86,0.25);
-webkit-box-shadow: 0 0 5px rgba(86,86,86,0.25);
}
.spread-the-word ul {
float: left;
margin: -7px 0 0 8px;
width: 115px;
}
.spread-the-word li {
float: left;
list-style: none;
width: 28px;
height: 28px;
margin: 0 12px 0 0;
}
.spread-the-word .last-item {
margin-right: 0;
}
#left-home-content .spread-the-word h3 {
color: white;
font-size: 16px;
float: left;
font-size-adjust: 0.47;
width: 129px; /* Specified to correct for MobileSafari oddness re: SVG fonts*/
text-shadow: #627C39 0 0 10px;
text-shadow: rgba(98,124,57,0.5) 0 0 10px;
}
#left-home-content .addthis_32x32_style .at300bs,
#left-home-content .addthis_32x32_style .at15t {
background: url(/dev/images/spread-the-word/spread-the-word-icons.png) no-repeat left;
overflow: hidden;
display: block;
background-position: 0 0;
height: 28px;
width: 28px;
line-height: 28px!important;
}
#left-home-content .at300bs:hover {
opacity: 1;
box-shadow: 0 0 15px #fff;
-moz-box-shadow: 0 0 15px #fff;
-webkit-box-shadow: 0 0 15px #fff;
}
#left-home-content .addthis_default_style .at300b,.addthis_default_style .at300m { padding: 0; }
#left-home-content .addthis_32x32_style .at15t_compact { background-position: 0 0; width: 28px; height: 28px; margin-right: 0; }
#left-home-content .addthis_32x32_style .at15t_facebook { background-position: 0 -78px; width: 28px; height: 28px; }
#left-home-content .addthis_32x32_style .at15t_linkedin { background-position: 0 -156px; width: 28px; height: 28px; }
/* #end */
/* #end */
And the HTML to go with it.
<section id="left-home-content-container" class="left-col">
<div id="left-home-content">
<h3>Now Let’s Make a Difference</h3>
<div class="spread-the-word" id="left-home-spread">
<h3>Spread the Word</h3>
<ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
<li><a class="addthis_button_linkedin"></a></li>
<li><a class="addthis_button_facebook"></a></li>
<li class="last-item"><a class="addthis_button_compact"></a></li>
</ul>
</div>
<p>Donec non sapien quis sapien vehicula pellentesque sed eu lacus. In at eros nec mi imperdiet tempor at non dolor. Morbi porta pretium sollicitudin. Proin blandit consequat turpis at pulvinar. Aliquam eros lectus, dictum sed consequat a, congue sed leo. In in eros at lacus laoreet feugiat. Ut pellentesque dolor eget sem vulputate bibendum. Ut pellentesque dolor eget sem vulputate biben dum biben.</p>
<p>Nulla vehicula lobortis ullamcorper. Aliquam pellentesque, nulla non condimentum vulputate.</p>
<span class="read-more-link">Read More</span>
</div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->
And here's a screenshot, to illustrate what I'd like my final result to be like (the .read-more-link will take it's position from the text above, it doesn't have to be aligned to #left-home-spread).
Any ideas? position:absolute; and float don't mix, position:relative; just has the "Spread" <div> (aka #left-home-spread) positioning itself relative to the text content above it. Placing #left-home-spread above the content (like it is now), setting it float:right; and then giving it a large margin-top results in a gaping hole on the right side, as the margin counts as part of the floated #left-home-spread.
Ideas, anyone?

Looking at the picture and not reading anything, I suggest putting the spread the word element after all your paragraphs and then floating it right and using a negative top margin. No absolute/fixed positioning.
<section id="left-home-content-container" class="left-col">
<div id="left-home-content">
<h3>Now Let’s Make a Difference</h3>
<p>Donec non sapien quis sapien vehicula pellentesque sed eu lacus. In at eros nec mi imperdiet tempor at non dolor. Morbi porta pretium sollicitudin. Proin blandit consequat turpis at pulvinar. Aliquam eros lectus, dictum sed consequat a, congue sed leo. In in eros at lacus laoreet feugiat. Ut pellentesque dolor eget sem vulputate bibendum. Ut pellentesque dolor eget sem vulputate biben dum biben.</p>
<p>Nulla vehicula lobortis ullamcorper. Aliquam pellentesque, nulla non condimentum vulputate.</p>
<div class="spread-the-word" id="left-home-spread">
<h3>Spread the Word</h3>
<ul class="addthis_toolbox addthis_32x32_style addthis_default_style">
<li><a class="addthis_button_linkedin"></a></li>
<li><a class="addthis_button_facebook"></a></li>
<li class="last-item"><a class="addthis_button_compact"></a></li>
</ul>
</div>
<span class="read-more-link">Read More</span>
</div><!-- end #left-home-content -->
</section><!-- end #left-home-content-container -->
And CSS..
.spread-the-word { float:right; margin-top:-200px; width:200px; }
The top margin can be the height of the entire box. In my mind that works out right. You may or may not need to wrap all the paragraphs and h3 inside another container for it to work properly. But the box has to come afterwards.

Related

Flexbox is not centered at the bottom of the page

This is my issue on code pen:
https://codepen.io/mch-sg/pen/zYaKdNg
The flexbox is centered on flex-start, but when I scroll to the bottom, the box starts to upwards, and I have absolutely no idea what causes this. I thought the sticky parameter had something to do with it, but I see that I need to search for help here.
/* PRIMARY ATTRIBUTES */
:root {
--bgc: #A793FE;
--dim: #939393;
--hrc: rgb(39, 39, 39, 0.1);
--bgswitchmode: #FFFFFF;
--iconbg: #FFFFFF00;
--txtcol: #000000; // #BB3333
}
body.dark-theme {
// body.dark-theme
--hrc: rgb(240, 240, 240, 0.1);
--bgswitchmode: #000000;
--txtcol: #FFFFFF;
--hrc: rgb(200, 200, 200, 0.2);
}
body {
height: 100%;
transition: 0.2s;
background-color: var(--bgswitchmode);
color: var(--txtcol); // #FBFAF9
font-family: 'Inconsolata', monospace;
margin-top: 100px;
margin-left: 100px;
margin-right: 8%;
max-width: 500px;
}
p {
margin: 0;
position: absolute;
top: 50%;
left: 25%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
align-items: center;
}
.top {
position: absolute;
width: 100%;
height: 70px;
text-align: center;
padding-top: 35px;
}
button {
float: left;
width: 0%;
height: 0%;
background-color: red; //var(--iconbg)
color: var(--txtcol);
font-size: 20px;
/* border-radius: 10px; */
border: none;
margin-top: 15px;
cursor: pointer;
}
.d {
background-color: red; //var(--iconbg)
color: var(--txtcol);
font-size: 20px;
/* border-radius: 10px; */
border: none;
/* margin-top: 15px; */
cursor: pointer;
}
.txt {
text-decoration: none;
font-kerning: normal;
font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
font-weight: 400;
line-height: 30px;
}
a {
text-decoration: none;
}
h1 {
font-family: 'Segoe UI', sans-serif; // 'Lato', sans-serif;
font-size: 40px;
font-weight: 500; // 300
letter-spacing: 1px;
}
h2 {
font-family: 'Inconsolata', monospace;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
}
h3 {
font-family: 'Inconsolata', monospace;
font-size: 18px;
font-weight: 500;
letter-spacing: 0px;
text-transform: uppercase;
text-indent: 5%;
}
.head-title {
font-family: 'Segoe UI', sans-serif;
font-size: 30px;
font-weight: 400;
letter-spacing: 1px;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid var(--hrc);
margin: 1em 0;
padding: 0;
}
.overlay {
position: absolute;
height: 100%;
width: 100%;
top: 0;
bottom: 0;
right: 0;
left: 0;
background: white;
opacity: 0;
}
/* TYPOGRAPHY */
.text {
font-family: 'Inconsolata', monospace;
font-size: 17px;
line-height: 1.5;
}
.hlink {
/* color: rgb(175, 175, 175); */
color: var(--bgc); //
text-decoration: none;
transition: 0.2s;
cursor: pointer;
}
.hlink:hover {
/*color: #f5978e; #929da6*/
color: #939393; //
}
a:-webkit-any-link {
text-decoration: none;
}
.link {
/* color: rgb(175, 175, 175); */
font-family: 'Inconsolata', monospace;
color: var(--bgc); // #EE8869
text-decoration: none;
transition: 0.2s;
cursor: pointer;
}
.link:hover {
/*color: #f5978e; #929da6*/
color: #939393; //
}
.navhov {
/* color: rgb(175, 175, 175); */
color: var(--txtcol); // #FBFAF9
text-decoration: none;
/* transition: 0.2s; */
// font-size: 19px;
}
.navhov:hover {
/*color: #ffb086 #f5978e*/
transition: 0.2s;
color: var(--bgc); //
}
.dim {
color: var(--dim);
text-decoration: none;
transition: 0.2s;
}
img:hover {
transition: 0.2s;
color: var(--bgc); //
}
/* SELECTION */
::-moz-selection {
/* Code for Firefox */
color: var(--bgswitchmode);
background: var(--bgc); // #ffb086
}
::selection {
color: var(--bgswitchmode);
background: var(--bgc);
}
/* FLEXBOX */
.flexbox-container {
flex: 1;
overflow: auto;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: fixed;
display: flex;
justify-content: center;
align-items: flex-start;
overflow: auto;
}
.flexbox-item {
width: 100%; // 95%
border: 0.1px solid rgb(39, 39, 39, 0.5);
border-radius: 25px;
padding: 50px;
align-items: center;
justify-content: center;
/* display: flex; */
}
.flexbox-item-1 {
align-items: center;
justify-content: center;
min-height: 100px;
border: 0.1px solid rgb(39, 39, 39, 0.2);
margin: 0px 0px 0px 50px;
/* margin: 150px 75px 150px 150px; */
/* 100px 0px 50px 50px */
display: relative;
overflow: auto;
top: 50%;
transform: translateY(-50%);
}
.flexbox-item-2 {
min-height: 100px;
border: 0.1px solid rgb(39, 39, 39, 0.2);
margin: 100px 50px 100px 50px;
/* 150px 150px 150px 75px */
/* 125px 175px 0px 125px */
display: relative;
overflow: auto;
/* width: 40%; */
}
div.sticky {
position: -webkit-sticky;
position: sticky;
align-items: center;
justify-content: center;
}
.sticky2 {
/* top: 50%; */
/* -ms-transform: translateY(-50%);
transform: translateY(-50%); */
}
.sg {
padding: 50px;
font-size: 20px;
}
.ss {
position: fixed;
}
body {
height: 100%;
overflow-y: hidden;
overflow-x: hidden;
-ms-overflow-style: none;
scrollbar-width: none;
}
html {
overflow-x: hidden;
}
.cent {
font-family: 'Inconsolata', monospace;
font-weight: 500;
text-decoration: none;
margin-left: 40%;
/* 43% */
font-size: 17px;
}
.mb {
margin-bottom: -10px;
}
.mbl {
margin-bottom: 150px;
}
ul.nav {
padding-left: 0px;
text-align: center;
}
ul.nav>li {
display: inline-block;
padding: 0px 50px;
}
ul.nav>li:hover {
background-color: #00000000;
}
ul.nav>li>a {
text-decoration: none;
}
.subhead {
font-size: 22px;
font-weight: 400;
}
.sublink {
font-size: 20px;
font-family: 'Inconsolata', monospace;
font-weight: 500;
}
<div class="flexbox-container">
<div class="flexbox-item flexbox-item-1 sticky sg">
<div class="cent"><a class="navhov" href="/norsa/">Home</a><br></div>
<div class="cent">
<a class="navhov" href="#section1"><br><br>1.0. Getting started</a><br></div>
<div class="cent ">
<a class="navhov" href="#section2"><br><br>2.0. Introduction</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3"><br><br>3.0. Business Strategy</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-1"><br>⠀⠀⠀⠀3.1. Executive Summary</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-2"><br>⠀⠀⠀⠀3.2. Products & Services</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-3"><br>⠀⠀⠀⠀3.3. Market Analysis</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-4"><br>⠀⠀⠀⠀3.4. Marketing & Sales</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-5"><br>⠀⠀⠀⠀3.5. Company Organization</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section3-6"><br>⠀⠀⠀⠀3.6. Financial Projections</a><br></div>
<div class="cent mb">
<a class="navhov" href="#section4"><br><br>4.0. Financial</a><br></div>
<div class="cent">
<a class="navhov dim" href="/norsa/helpme/"><br><br><br><br>Help me</a>
</div>
<div class="cent">
<a class="navhov dim" href="#sectionA"><br>About<br></a><br></div>
<div class="cent pleek"><img class="bi bi-moon d dim pleek" src="" height="0" width="0" onclick="dark()" />
<img class="bi bi-bookmark-heart-fill d dim" src="" style="margin-left: 35px;" height="0" width="0" />
</div>
</div>
<div class="flexbox-item flexbox-item-2 text">
<div id="section1" class="txt">
<h1>Help me</h1>
<h1 class="mb dim subhead">We are a simple website for businesses, providing a wide variety of company templates, from employee agreements to style guides and strategies.</h1><br>
<br> Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc
sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
<br><br> Fusce luctus vestibulum augue ut aliquet. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
<br><br><br>
<hr/>
<br>
</div>
<div id="section2" class="txt">
<h2 class="mb"> 2.0.⠀⠀Introduction</h2> <br>
<a class="head-title">Whatever you do, don't quit.</a>
<br><br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae
massa. Fusce luctus vestibulum augue ut aliquet.
<br><br>
<a class="link" href="/assets/" target="_blank">🡢 Business strategy</a><br>
<a class="link" href="/assets/" target="_blank">🡢 Download 'The Brand Guide'</a>
<br><br> Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor
porta. Cras ac leo purus. Mauris quis diam velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor.
<br><br><br>
<hr/>
<br>
</div>
</div>
I tried messing around with the margins and centering, as well as the sticky parameter, it did not work.
I apologize for the messy file :)
flex items are not supposed to have justify-content and align-items, though they are just ignored. Regarding your question, Remove sticky from the element position. That should solve it.

Centering aside bar with media query

I have an aside section that I'd like to have centered using a media query, so that once it's viewed on a mobile, it'll be at the bottom of the page aligned horizontally. Just like this:
This is what it's currently doing:
I have some images and text I don't want to share so I'll change them for this question...
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.5;
padding: 0;
margin: 0;
background-color: white;
}
/*GLOBAL*/
.container {
width: 80%;
margin: auto;
overflow: hidden;
}
header ul {
padding: 0;
margin: 0;
}
.page-title {
font-size: 20px;
}
.page-title-center {
font-size: 20px;
text-align: center;
}
.subheading-center {
font-size: 15px;
text-align: center;
margin-top: 50px;
}
.dark {
padding: 15px;
background: #1CAC4B;
color: white;
margin-top: 10px;
margin-bottom: 10px;
}
.dark-center {
padding: 15px;
text-align: center;
background: #1CAC4B;
color: white;
margin: 10px;
}
#hyperlink {
color: #FFEE00;
}
#hyperlinkg {
color: #1CAC4B;
}
/*HEADER*/
header {
background: #1CAC4B;
color: #fff;
padding-top: 30px;
min-height: 70px;
border-bottom: #FFEE00 3px solid;
display: flex;
}
header a {
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
}
header li {
float: left;
display: inline;
padding: 0 10px 0 10px;
}
header #branding {
float: left;
}
header #branding-img img {
float: left;
width: 60px;
height: 60px;
padding: 0 20px 20px 0;
}
header #branding h1 {
margin: 0;
}
header nav {
float: right;
margin-top: 14px;
}
header .highlight, header .current a {
color: #FFEE00 /*YELLOW*/;
}
header a:hover {
color: #cccccc;
font-weight: bold;
}
/*SHOWCASE*/
#showcase {
background:url("../img/grass.jpg") no-repeat;
background-size: cover;
min-height: 450px;
text-align: center;
color: white;
}
#showcase h1 { /**/
margin-top: 150px;
font-size: 60px;
margin-bottom: 10px;
}
#showcase p {
font-size: 30px;
}
/* CONTACT INFO */
#contact {
color: white;
background: #1CAC4B;
padding: 25px;
border-bottom: #FFEE00 3px solid;
border-top: #FFEE00 3px solid;
}
#contact h1 {
float: left;
}
#contact p {
font-size: 20px;
margin-top: 22px;
font-weight: bold;
float: right;
}
/*BOXES*/
.boxes {
background: white; /*Background behind 3 circular images are white */
display: flex; /*Makes circles drop if page is squished */
flex-wrap: wrap; /*Makes circles in a horizontal row */
justify-content: center;
}
.boxes figure {
margin: 3.5%; /*makes it line up better */
text-align: center; /*Puts text in center*/
font-size: 20px;
}
.boxes figure img {
border-radius: 25px; /*Makes images circular */
width: 310px; /*Sets image width*/
height: 220px; /*Sets image height - heigh and width must be same to make it a circular */
box-shadow: gray 0 0 15px; /*Adds gray shadow to bottom of images */
}
/*MAIN-COL*/
article#main-col {
float: left;
width: 70%;
}
/*ABOUT PAGE SIDEBAR*/
aside#about-sidebar {
float: right;
margin-top: 50px;
}
aside#about-sidebar img {
width: 230px;
height: 184px;
/*257px*/
}
/*SERVICES*/
ul#services li {
list-style: none;
padding: 20px;
border: green solid 1px;
margin-bottom: 10px;
background: #e6e6e6;
}
/*SERVICES PAGE SIDEBAR*/
aside#service-sidebar {
float: right;
margin-top: 50px;
}
/*GALLERY SLIDESHOW*/
* {box-sizing: border-box}
.mySlides1, .mySlides2 {display: none}
img {vertical-align: middle;}
/* Slideshow container */
.slideshow-container {
max-width: 800px;
position: relative;
margin: auto;
padding: 10px;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
/*FOOTER*/
footer {
padding: 20px;
margin-top: 20px;
color: white;
background-color: #1CAC4B;
text-align: center;
}
/*MEDIA QUERIES*/
#media(max-width: 768px){
header #branding,
header nav,
header nav li,
#boxes .box,
article#main-col,
aside#sidebar {
float: none;
align-content: center;
text-align: center;
width: 100%;
}
header {
padding-bottom: 20px;
}
#showcase h1 {
margin-top: 40px;
}
}
<body>
<main>
<header>
<div class="container">
<div id="branding-img">
<a href="index.html"><img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
</div>
<div id="branding">
<h1><span class="highlight">NAME SHORT</span>NAME</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li class="current">About</li>
<li>Services</li>
<li>Gallery</li>
</ul>
</nav>
</div>
</header>
<section id="main">
<div class="container">
<article id="main-col">
<h1 class="page-title">About The Company</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
</p>
<h1 class="page-title">About Me</h1>
<p class="dark">
Curabitur non accumsan tortor. Nulla aliquet risus ac velit consequat pretium. Duis vulputate congue commodo. Proin id mauris velit. Curabitur vel neque congue turpis dictum tristique. Vestibulum sit amet placerat quam. Sed sodales, lacus fermentum condimentum congue, leo mi congue nibh, sit amet aliquam risus sapien ut tellus.
<br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet sapien quis felis imperdiet scelerisque. Maecenas vulputate, nisl quis laoreet efficitur, urna nunc viverra massa, placerat commodo ligula tellus vel lacus. Ut molestie, purus id gravida sollicitudin, ipsum ipsum scelerisque diam, quis hendrerit mauris massa vitae quam. Donec maximus, felis sit amet tincidunt pretium, justo tellus cursus ex, quis vestibulum felis risus sed velit. Vivamus varius sapien sit amet nisl iaculis, et aliquet risus lobortis. In eget ullamcorper augue. If you are interested you can call me using my email or phone number displayed on the <a id="hyperlink" href="index.html">Home</a> page.
</p>
</article>
<aside id="about-sidebar">
<div class="dark">
<img src="https://cdn3.iconfinder.com/data/icons/business-avatar-1/512/10_avatar-512.png">
<p>
PERSON NAME
</p>
</div>
</aside>
</div>
</section>
<footer>
<p>COMPANY</p>
</footer>
</main>
</body>
Of course, as soon as I spent 10 minutes making this question I figured out my problem within literally 10 seconds lol.
I doubt anyone else would have this problem but you never know, so I'll answer it and leave it here for anyone who needs it.
In the CSS file in the media queries section, I removed '#sidebar' from 'aside#sidebar {'

CSS Tabs>Div hidden behind Container Div

I'm struggling to get my head around what is causing the "tabbed" div to be hidden from view. I can't work out whether it is the content or container div causing this issue.
If you change the ".tabs > div" position from absolute to relative then div class="tabbed" appears as I would like but it causes the content of the tabs stack on top of one another.
Is this a position/z-index or overflow issue?
Any help would be appreciated.
Here is the code:
* {
box-sizing: border-box;
}
body {
background: #fff;
color: #262626;
font: 1em 'PT Sans', sans-serif;
}
::selection {
background-color: #4EC6DE;
}
#content {
padding: 5px 0 5px 0;
position: relative;
overflow: hidden;
}
.container {
position: relative;
clear: both;
width: 100%;
min-height: 350px;
max-width: 1200px;
padding: 5px 0px 5px 0px;
overflow: hidden;
background-color: #ffffff;
}
.pCV {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
line-height: 1.6;
padding: 0;
}
.cvheader {
font-family: 'Libre Baskerville', serif;
font-size: 16px;
font-weight: bold;
}
#textbox {
width: 100%;
border: 1px solid #ccc
}
/* Style buttons */
#downloadbtn {
background-color: #ffffff;
border: 2px solid #262626;
color: #262626;
padding: 12px 12px;
cursor: pointer;
font-size: 20px;
float: right;
margin-top: -50px;
}
/* Darker background on mouse-over */
#downloadbtn:hover {
background-color: #888888;
color: #ffffff;
border: 2px solid #888;
transition: all .8s ease-in-out;
}
.tabbed {
width: 1000px;
margin: 50px auto;
}
.tabbed>input {
display: none;
}
.tabbed>label {
display: block;
float: left;
padding: 12px 20px;
margin-right: 10px;
cursor: pointer;
transition: background-color .3s;
}
.tabbed>label:hover,
.tabbed>input:checked+label {
background: #4EC6DE;
}
.tabs {
clear: both;
perspective: 600px;
}
.tabs>div {
width: 1000px;
position: absolute;
border: 2px solid #4EC6DE;
padding: 10px 30px 40px;
line-height: 1.4em;
opacity: 0;
transform: rotateX(-20deg);
transform-origin: top center;
transition: opacity .3s, transform 1s;
z-index: 0;
}
#tab-nav-1:checked~.tabs>div:nth-of-type(1),
#tab-nav-2:checked~.tabs>div:nth-of-type(2) {
transform: rotateX(0);
opacity: 1;
z-index: 1;
}
#media screen and (max-width: 700px) {
.tabbed {
width: 400px
}
.tabbed>label {
display: none
}
.tabs>div {
width: 400px;
border: none;
padding: 0;
opacity: 1;
position: relative;
transform: none;
margin-bottom: 60px;
}
.tabs>div h2 {
border-bottom: 2px solid #4EC6DE;
padding-bottom: .5em;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.6/prefixfree.min.js"></script>
<div id="content">
<div class="container">
<div class="tabbed">
<input type="radio" name="tabs" id="tab-nav-1" checked>
<label for="tab-nav-1">CV 1</label>
<input type="radio" name="tabs" id="tab-nav-2">
<label for="tab-nav-2">CV 2</label>
<div class="tabs">
<div>
<div id="textbox">
<h2 class="cvheader">EDUCATION</h2>
<a href="ArtistCV.pdf" download>
<button id="downloadbtn"><i class="fa fa-download fa-fw"></i> Download</button></a>
<div style="clear: both;"></div>
</div>
<p class="pCV">Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. </p>
</div>
<div><h2>CSS</h2><p>Maecenas dictum, urna ut consequat condimentum, est dui commodo diam, ac pretium dui ante eu quam. Curabitur posuere metus nec tellus venenatis placerat. Ut egestas neque in odio vulputate gravida. In at justo ac est laoreet eleifend vel quis arcu. Aliquam erat volutpat. Proin vitae vehicula neque. Nam tempus erat ac ante tincidunt tincidunt. Pellentesque eu nibh sapien. Nunc augue magna, lacinia eget congue eget, mattis id tortor. Fusce id vestibulum neque. Proin tincidunt tellus ut risus lobortis cursus. Duis sit amet urna vel sapien ullamcorper varius.</p></div>
</div>
</div>
</div>
</div>
I'm struggling to get my head around what is causing the "tabbed" div to be hidden from view.
You have mistake in your HTML markup. Change this:
Download</button</a>
To this:
Download</button></a>
And add this to your CSS:
.container {
min-height: 350px;
}
If you don't want to set min-height manually, then you'll need to use JS to calculate it dynamically. Hardly imagine doing this with pure CSS.

Sticky position not working for overlapping scrolling effect

I'm trying to make an overlapping effect when the user scrolls using the sticky position and giving each div (section) a new background colour. However, even after setting top to 0 for the sticky position, the divs scroll out of the viewport. Any help would be great!
$(document).ready(function(){
$('#about').click(function(){
$('#aboutcontainer').slideToggle('slow');
});
});
html, body {
margin: 0 auto;
font-size: 22px;
width: 100%;
height: 100%;
}
h3 {
margin: 0;
}
ul, li {
margin: 0 auto;
}
span {
font-weight: 400;
}
.container {
height:102vh;
}
.contentcontainer {
display: flex;
justify-content: center;
align-items: center;
height: auto;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
#navbar {
width: 100%;
position: sticky;
top: 0px;
background-color: #ffffff;
font-family: Abel;
height: 100px;
}
#desktop-nav-wrapper {
padding: 0 45px;
height: inherit;
position: relative;
}
#logo {
font-size: 200%;
width: auto;
float: left;
letter-spacing: 3px;
}
#desktop-nav-wrapper ul {
margin-top: 6.5vh;
float: right;
}
#desktop-nav-wrapper li {
position: relative;
display: inline-block;
padding-left: 25px;
font-weight: 300;
color: #000000;
font-family: Abel;
}
#desktop-nav-wrapper li:nth-child(even):hover {
cursor: default;
}
#desktop-nav-wrapper li:nth-child(odd):hover {
cursor: pointer;
}
#aboutcontainer {
display: none;
background-color: #ffffff;
}
#aboutcontainer p {
margin-bottom: 0;
padding-left: 45px;
text-align: left;
width: 80%;
font-family: Lato;
font-weight: 300;
font-size: 92%;
}
#one {
background-color: #ffd700;
position: sticky;
top: 0;
}
#two {
background-color: #468499;
position: sticky;
top: 0;
}
#three {
background-color: #468499;
position: sticky;
top: 0;
}
#media only screen and (max-width: 768px) {
#logo {
margin-top: -1vh;
}
#desktop-nav-wrapper {
padding: 0 15px;
height: inherit;
}
#desktop-nav-wrapper ul {
float: left;
padding-left: 0;
width: 100%;
margin-top: 11vh;
}
#desktop-nav-wrapper li {
position: relative;
display: inline-block;
padding-left: 0;
margin-right: 2%;
font-weight: 300;
color: #000000;
font-family: Abel;
}
#aboutcontainer p {
margin-bottom: 0;
padding-left: 15px;
text-align: left;
width: 90%;
font-family: Lato;
font-weight: 300;
font-size: 80%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar">
<div id="desktop-nav-wrapper">
<h3 id="logo" class="vertical-center">Test Header</h3>
<ul>
<li id="about" class="desktop-items">about</li>
</ul>
</div>
</div>
<div id="aboutcontainer" style="display: none;">
<p>
Phasellus vitae semper risus. Quisque in finibus nisi. Sed non rhoncus purus, eu luctus orci. Vestibulum massa nisi, bibendum eget libero ut, tempor mattis metus. Maecenas placerat nisl non mauris fringilla ultricies. Phasellus dignissim velit vitae tellus sodales luctus. Nullam tempus turpis vitae nunc lacinia faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget volutpat nunc. Cras et libero et ligula suscipit finibus et id dui. Duis odio enim, interdum vitae ullamcorper ut, sagittis vitae metus. Phasellus feugiat libero metus, sed tempor erat porttitor ut. Integer vel libero eu ante sollicitudin fermentum non quis nisl. Aliquam blandit dignissim sem, et malesuada risus venenatis eget. Nulla pretium ornare dui fermentum cursus.
</p>
</div>
<div class="container" id="one">
<div class="contentcontainer">
<h3>One</h3>
</div>
</div>
<div class="container" id="two">
<div class="contentcontainer">
<h3>Two</h3>
</div>
</div>
<div class="container" id="three">
<div class="contentcontainer">
<h3>Three</h3>
</div>
</div>
Figured it out... Turns out position: sticky isn't a fan of HTML and body having their height set to 100%. I removed it and it now works fine.

Padding of a child doesn't work, image always stay middle

There's a problem in my code attached below:
The img with id listItemProfile stays always in middle no matter what padding I set, I though it might due to there's some padding in its parent, but I couldn't find any, any thoughts?
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
.accordionOm {
position: relative;
padding: 10px 0 10px 30px;
margin: 0;
font: 300 18px 'Oswald', Arial, Helvetica, sans-serif;
cursor: pointer;
}
.accordionOm:hover {
color: #000;
}
.accordionOm:before,
.accordionOm:after {
content: "";
position: absolute;
background: #333;
display: inline-block;
}
.accordionOm:before {
width: 20px;
height: 2px;
left: 0;
top: 22px;
}
.accordionOm:after {
width: 2px;
height: 20px;
left: 9px;
top: 13px;
transition: transform .5s;
transform: rotate(0);
}
.accordionOm.opened:after {
transform: rotate(90deg);
}
.accordionOm + div {
border-left: 4px solid #999;
padding: 0 15px;
margin-left: 8px;
font: 13px 'Open Sans', Arial, Helvetica, sans-serif;
color: #666;
}
* {
font-family: Arial, Verdana, sans-serif;
color: #665544;
text-align: center;}
body {
width: 100%;
margin: 0 auto;
}
#trailBar{
margin-left: 35px;
margin-right: 35px;
margin-top: 25px;
margin-bottom: 25px;
height: 180px;
background: -webkit-linear-gradient(right, #31a7de, #31a7de 35px, white 35px, white);
border: transparent;
border-radius:0.25em;
}
p.trailTextTop{
padding-top: 25px;
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
p.trailTextBot{
padding-left: 25px;
padding-right: 60px;
padding-bottom: 25px;
font-size: large;
}
.left { float: left; }
.right { float: right; }
p { overflow: hidden; }
.panel-group .list-group {
margin-bottom: 0;
}
.panel-group .list-group .list-group-item {
border-radius: 0;
border-left: none;
border-right: none;
}
.panel-group .list-group .list-group-item:last-child {
border-bottom: none;
}
.panel-body{
background: #efefef;
}
#listItem{
position: relative;
height: 200px;
background: #efefef;
}
#listItemProfile{
position: absolute;
height: 80px;
width: 80px;
padding-top: 60px;
padding-bottom: 60px;
padding-left: 35px;
}
#listItemTitle{
}
#listItemSubtitle{
}
#listItemInfo{
}
#listItemArrow{
}
</style>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 class="accordionOm opened">
<div id="listItem">
<img id = "listItemProfile" src="images/Portrait.png">
<div id="listItemTitle">
</div>
<div id="listItemSubtitle">
</div>
<div id="listItemInfo">
</div>
<div id="listItemArrow">
</div>
</div>
</h4>
<div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
<div id="trailBar">
<p class="trailTextTop"><span class='left'>Good morning, I just start my first day trip. Happy pedal!</span></p>
<p class="trailTextBot"><span class='left'>Time 7:20</span><span class='right'>45 Miles</span></p>
</div>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
<h4 class="accordionOm">Accordian heading</h4>
<div>
<p>Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa
quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
</div>
</body>
<script>
$('.accordionOm').next().hide();
$(".opened").next().show();
$('.accordionOm').click(function() {
if ($(this).hasClass("opened") == true) {
$(this).next().slideUp("slow");
$(this).removeClass('opened');
} else {
$(".opened").next().slideUp("slow");
$(".opened").removeClass("opened");
$(this).addClass('opened');
$(this).next().slideDown("slow");
}
});
</script>
</html>
Hi now define this css
#listItemProfile {
position: absolute;
height: 80px;
width: 80px;
/* padding-top: 60px; */
/* padding-bottom: 60px; */
/* padding-left: 35px; */
left: 50%;
top: 50%;
margin-left: -40px; // your total width img / 2
margin-top: -40px; // your total height img /2
}
You can use this css given below :
#listItemProfile {
position: absolute;
height: 80px;
width: 80px;
left: 50%;
top: 50%;
margin-left: -40px;
margin-top: -40px;
}
try with margin-left , margin-right
Example
.class-name{
margin-left:10px;
margin-right:50px;
}