I am trying to do columns for text paragraphs, and I have found a way to do it using position: absolute, but with larger/smaller screen sizes it moves around rather, unfortunately. What is the best way to do columns? And why won't they line up in this case?
.italic2{font-family: serif; color: #cc9900; font-size:18px; width: 150px;}
.header3{font-family: helvetica; font-size:17px; letter-spacing: 3px;}
#column{
text-align:left;
line-height: 1.5;
width: 35%;
position: absolute;
float: left;
left: 12%;
}
#column1{
text-align:left;
line-height: 1.5;
width: 35%;
float: left;
position: absolute;
left: 62%;
}
<div id="header">
<p><span class="italic"><i>the</i></span><span class="header1">  ENGLISH CLASS WEBSITE</span><br><br><div id="header2"> <span class="italic2"><i> Welcome to the English Class Website, English Students <img src="assets/img/smilingheart.png" height="20px" width="20px"> They say that the road to hell is paved with good intentions & if you ever feel like a lot of things are missing on this site, that it is never updated or you would rather go watch paint dry, well at least I tried. For a while. (It's in hell)</i></span></p>
</div>
<div id="column"><span class="textfont"><p>The English Class Website aims to assemble some of all the exciting subjects, information and materials, be it literature, films, music, TV-series, video games etc., that we already have been working with, or potentially could be working with, during our many English lessons together. It also provides tips and tricks on how to analyse different genres and types of texts as well as information on how to write essays yourself. Hopefully, it will be of use when you are getting ready for the exams. </div><div id="column1">If you are not a student and have stumbled upon this site by accident, you are of course more than welcome to browse through the contents, but please keep in mind that The English Class Website is only intended to make life easier for students and, well at least one teacher. Furthermore, if you represent any copyright institutions and feel that any, unintentional I must add, copyright infringement occurs I would much prefer to be contacted at aaa#aaa.com rather than sued.
</div></div>
Argh. Why is this jsfiddle thing never working for me?
You can use column-width to set the basic column size on the container element and allow the width + the viewport width to determine how many columns the screen will show. If you want a fixed number of columns (only 2), you can set column-count to set a specific number of columns and allow the width to change dynamically.
Here's an example of how to use both of them.
Use the codepen to play with the viewport's width
https://codepen.io/neilkalman/pen/OZyvRK/left
.italic2 {
font-family: serif;
color: #cc9900;
font-size: 18px;
width: 150px;
}
.header3 {
font-family: helvetica;
font-size: 17px;
letter-spacing: 3px;
}
#column {
column-width: 150px;
text-align: left;
line-height: 1.5;
}
#column-2 {
column-count: 2;
text-align: left;
line-height: 1.5;
}
.container {
max-width: 70vw;
margin: 20px auto;
}
<div id="header">
<span class="italic">
<em>the</em>
</span>
<span class="header1">  ENGLISH CLASS WEBSITE</span>
<br><br>
<div id="header2">
<span class="italic2">
<em>
Welcome to the English Class Website, English Students
<img src="assets/img/smilingheart.png" height="20px" width="20px">
They say that the road to hell is paved with good intentions & if you ever feel like a lot of things are missing on this site,
that it is never updated or you would rather go watch paint dry, well at least I tried. For a while. (It's in hell)
</em>
</span>
</div>
</div>
<div class="container">
<div id="column">
<span class="textfont">
The English Class Website aims to assemble some of all the exciting subjects,
information and materials, be it literature, films, music, TV-series, video games etc.
That we already have been working with, or potentially could be working with,
during our many English lessons together. It also provides tips and tricks on how to
analyse different genres and types of texts as well as information on how to write essays
yourself. Hopefully, it will be of use when you are getting ready for the exams.
If you are not a student and have stumbled upon this site by accident, you are of
course more than welcome to browse through the contents, but please keep in mind that
The English Class Website is only intended to make life easier for students and,
well at least one teacher. Furthermore, if you represent any copyright institutions and
feel that any, unintentional I must add, copyright infringement occurs I would much prefer
to be contacted at aaa#aaa.com rather than sued.
</span>
</div>
</div>
<div class="container">
<div id="column-2">
<span class="textfont">
The English Class Website aims to assemble some of all the exciting subjects,
information and materials, be it literature, films, music, TV-series, video games etc.
That we already have been working with, or potentially could be working with,
during our many English lessons together. It also provides tips and tricks on how to
analyse different genres and types of texts as well as information on how to write essays
yourself. Hopefully, it will be of use when you are getting ready for the exams.
If you are not a student and have stumbled upon this site by accident, you are of
course more than welcome to browse through the contents, but please keep in mind that
The English Class Website is only intended to make life easier for students and,
well at least one teacher. Furthermore, if you represent any copyright institutions and
feel that any, unintentional I must add, copyright infringement occurs I would much prefer
to be contacted at aaa#aaa.com rather than sued.
</span>
</div>
</div>
column-width and column-count have good browser compatibility as of writing this answer :-)
https://caniuse.com/#search=column-width
The reason the columns won't line up is your random use of tags. Surrounding the text in each column with proper opening and closing p tags will straighten them out.
<div id="header">
<p><span class="italic"><i>the</i></span><span class="header1">  ENGLISH CLASS WEBSITE</span><br><br><div id="header2"> <span class="italic2"><i> Welcome to the English Class Website, English Students <img src="assets/img/smilingheart.png" height="20px" width="20px"> They say that the road to hell is paved with good intentions & if you ever feel like a lot of things are missing on this site, that it is never updated or you would rather go watch paint dry, well at least I tried. For a while. (It's in hell)</i></span></p>
</div>
<div id="column"><span class="textfont"><p>The English Class Website aims to assemble some of all the exciting subjects, information and materials, be it literature, films, music, TV-series, video games etc., that we already have been working with, or potentially could be working with, during our many English lessons together. It also provides tips and tricks on how to analyse different genres and types of texts as well as information on how to write essays yourself. Hopefully, it will be of use when you are getting ready for the exams.</p></div>
<div id="column1">
<p>If you are not a student and have stumbled upon this site by accident, you are of course more than welcome to browse through the contents, but please keep in mind that The English Class Website is only intended to make life easier for students and, well at least one teacher. Furthermore, if you represent any copyright institutions and feel that any, unintentional I must add, copyright infringement occurs I would much prefer to be contacted at aaa#aaa.com rather than sued.</p>
</div>
</div>
Related
I am making a sticky menu on the side of an article and want the section I am on to be highlighted in the menu as I scroll, my instructor and I are stuck on how to make :target work.
Using Jquery will not work due to this navigation being purely on one page, so I wanted to try to use target in css, however no matter what I try it does not work.
I included the HTML and css I currently have.
#import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght#0,300;0,400;0,600;0,700;1,400;1,700&display=swap');
/* Typography */
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
line-height: 2.4rem;
font-family: 'Montserrat', sans-serif;
}
a {
text-decoration: none;
color: #7F1818;
}
a:hover,
a:focus {
text-decoration: none;
}
a:active {
color: #7F1818;
}
h1, h2, h3 {
font-weight: 700;
padding-bottom: 2.4rem;
text-decoration: none;
}
h1 {
font-size: 4.8rem;
line-height: 6rem;
margin-top: 20px;
}
h2 {
color: #7F1818;
font-size: 3.6rem;
line-height: 4.8rem;
border-bottom: 1px solid grey;
}
h2 + p {
padding-top: 2.4rem;
}
h2 + h3 {
padding-top: 2.4rem;
}
h3 {
font-size: 2.4rem;
line-height: 3.6rem;
}
p, ul, ol, blockquote {
padding-bottom: 2.4rem;
max-width: 45em;
}
ul {
padding-left: 4.8rem;
padding-right: 2.4rem;
}
ul li {
list-style: none;
}
div ul {
margin: 2px 2px 2px 2px;
}
.row {
float: left;
display: inline;
padding-left: 2.4rem;
}
blockquote {
padding-top: 2.4rem;
font-weight: 600;
font-size: 2.4rem;
line-height: 3.6rem;
color: #7F1818 ;
}
abbr {
font-weight: 700;
text-decoration: underline red dotted;
color: #7F1818;
}
/* Menu */
nav ul {
padding-left: 0;
padding-bottom: 0;
}
nav li {
list-style: none;
border-bottom: 1px solid grey;
}
nav li a {
color: black;
font-weight: 600;
display: block;
padding: 8px 16px;
}
nav li a:hover,
nav li a:focus {
color: #A21F1F;
}
nav li a:target {
font-weight: 700;
color: #7F1818;
}
.menu {
position: sticky;
top: 0;
}
header:target {
background-color: green;
}
/* Images */
img {
float: left;
margin: 0px 20px 12px 0px;
border: 1px solid #ddd;
padding: 5px;
}
.author {
border-radius: 250px;
}
/* When page shrinks width */
#media (max-width: 800px) {
body {
font-size: 1.2rem;
line-height: 2.4rem;
}
.row {
float: left;
margin-right: 50%;
}
abbr[title]::after {
content: ' (' attr(title) ')';
}
abbr {
text-decoration: none;
}
h1 {
font-size: 3.6rem;
line-height: 4.8rem;
margin-top: 10px;
}
h2 {
font-size: 2.4rem;
line-height: 3.6rem;
}
blockquote {
font-size: 1.2rem;
line-height: 2.4rem;
}
}
/* Grid */
#media (min-width: 800px) {
.grid {
display: grid;
grid-gap: 2rem;
grid-template-columns: [left] 25% [right] 74%;
grid-template-rows: [top] 1fr [bottom] auto;
}
}
header, main, footer {
padding-left: 2rem;
padding-right: 2rem;
}
header {
grid-column: left;
background-color: whitesmoke;
}
main {
grid-column: right;
}
footer {
grid-row: bottom;
grid-column: left / span 2;
color: grey;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Caitlyn Gass">
<meta name="description" content="Assignment 3">
<title>Assignment 3</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="grid">
<header>
<nav class="menu">
<ul>
<li>Introduction</li>
<li>Background Information</li>
<li>Accessibility</li>
<li>User Research & Testing</li>
<li>Endless Abbreviations</li>
<li>What I Learned</li>
<li>Standout Articles</li>
<li>Problems In The Industry</li>
<li>Conclusion</li>
<li>About the Author</li>
</ul>
</nav>
</header>
<main>
<h1>Onboarding: A College Student Discovers A List Apart</h1>
<p><strong>By: Samantha Lynn | May 22, 2018</strong></p>
<h2><a id="Introduction">Introduction</a></h2>
<blockquote>"What would you say if I told you I just read and analyzed over 350 articles from A List Apart in less than six weeks? “You’re crazy!” might have passed through your lips. In that case, what would you say if I was doing it for a grade? Well, you might say that makes sense.”</blockquote>
<img src="images/image1.jpg" alt="Drawing of girl shining flashlight at words in black and white">
<p>As a part of an Independent Research Study for my undergraduate degree, I wanted to fill in some of the gaps I had when it came to working with the World Wide Web. I wanted to know more about user experience and user interface design, however, I needed the most help getting to know the industry in general. Naturally, my professor directed me to A List Apart.</p>
<p>At first I wasn’t sure what I was going to get out of the assignment other than the credit I needed to graduate. What could one website really tell me? As I read article after article, I realized that I wasn’t just looking at a website — I was looking at a community. A community with history in which people have struggled to build the right way. One that is constantly working to be open to all. One that is always learning, always evolving, and sometimes hard to keep up with. A community that, without my realizing it, I had become a part of. For me, the web has pretty much always been there, but now that I am better acquainted with its past, I am energized to be a part of its future. Take a look at some of the articles that inspired this change in me.</p>
<h2><a id="Background">Background Information</a></h2>
<p>I started in the Business section and went back as far as November 1999. What a whirlwind that was! I had no idea what people went through and the battles that they fought to make the web what it is today. Now, I don’t mean to date any of you lovely readers, but I would have been three years old when the first business article on A List Apart was published, so everything I read until about 2010 was news to me.</p>
<p>For instance, when I came across <strong>Jeffrey Zeldman’s <em>“Survivor! (How Your Peers Are Coping with the Dotcom Crisis)”</em></strong> that was published in 2001, I had no idea what he was talking about! The literal note I wrote for that article was: “Some sh** went down in the late 1990s???” I was in the dark until I had the chance to Google it and sheepishly ask my parents.</p>
<p>I had the same problem with the term Web 2.0. It wasn’t until I looked it up that I realized I didn’t know what it was, because I never experienced Web 1.0 (having not had access to the internet until 2004). In that short time, the industry had completely reinvented itself before I ever had a chance to log on!</p>
<p>The other bit of history that surprised me was how long and hard people had to fight to get web standards and accessibility in line. In school I’ve always been taught to make my sites accessible, and that just seemed like common sense to me. I guess I now understand why I have mixed feelings about Flash.</p>
<h2><a id="Accessibility">Accessibility</a></h2>
<p>Accessibility is one of the topics I took a lot of notes on. I was glad to see that although a lot of progress had been made in this area, people were still taking the time to write about and constant-ly make improvements to it. In <strong>Beth Raduenzel’s <em>“A DIY Web Accessibility Blueprint,”</em></strong> she explains the fundamentals to remember when designing for accessibility, including considering:</p>
<ul>
<li>Keyboard Users</li>
<li>Blind Users</li>
<li>Color-blind users</li>
<li>Low-vision users</li>
<li>Deaf and hard-of-hearing users</li>
<li>Users with learning disabilities and cognitive limitations</li>
<li>Mobility-impaired users</li>
<li>Users with speech disabilities</li>
<li>Users with seizure disorders</li>
</ul>
<p>It was nice to have someone clearly spell it out. However, the term “user” was used a lot. This dis-tances us from the people we are supposed to be designing for. <strong>Anne Gibson feels the same way; in her article, she states that <em>“[web] accessibility means that people can use the web.”</em> All people.</strong></p>
<p><strong>In <em>“My Accessibility Journey: What I’ve Learned So Far,”</em> Manuel Matuzović gives exact examples of this:</strong></p>
<ul>
<li><strong>If your site takes ten seconds to load on a mobile connection, it’s not accessible.</strong></li>
<li><strong>If your site is only optimized for one browser, it’s not accessible.</strong></li>
<li><strong>If the content on your site is difficult to understand, your site isn’t accessible.</strong></li>
<li><strong>It goes beyond just people with disabilities (although they are certainly not to be discounted).</strong></li>
</ul>
<p>I learned a lot of tips for designing with specific people in mind. Like including WAI-ARIA in my code to benefit visually-impaired users, and checking the color contrast of my site for people with color blindness and low-vision problems. One article even inspired me to download a Sketch plugin to easily check the contrast of my designs in the future. I’m more than willing to do what I can to allow my website to be accessible to all, but I also understand that it’s not an easy feat, and I will never get it totally right.</p>
<h2><a id="User">User Research & Testing</a></h2>
<p>Another topic on A List Apart I desperately wanted to absorb was the countless research, testing, and development methods I came across in my readings. Every time I turn around, someone else has come up with another way of working, and I’m always trying to keep my finger in the pie.</p>
<img src="images/image2.jpg" alt="Graph showing the Kano Model">
<p>I’m happy to report that the majority of the methods I read about I already knew about and have used in my own projects at school. I’ve been doing open interview techniques, personas, style tiles, and element collages all along, but I was surprised by how many new practices I’d come across.<p>
<p>The Kano Model, the Core Model, Wizard of Oz prototyping, and think-alouds were some of the methods that piqued my curiosity. Others like brand architecture research, call center log analysis, clickstream analysis, search analytics, and stakeholder reviews I’ve heard of before, but have never been given the opportunity to try.</p>
<p>Unattended qualitative research, A/B testing and fake-door testing are those that stood out to me. I liked that they allow you to conduct research even if you don’t have any users in front of you. I learned a lot of new terms and did a lot of research in this section. After all, it’s easy to get lost in all the jargon.</p>
<h2><a id="Endless">Endless Abbreviations</a></h2>
<p>I spent a lot of my time Googling terms during this project—especially with the older articles that mentioned programs like Fireworks that aren’t really used anymore. One of my greatest fears in working with web design is that someone will ask me something and I will have no idea what they are talking about. When I was reading all the articles, I had the hardest time with the substantial amount of abbreviations I came across:</p>
<div>
<ul class="row">
<li><abbr title="Asynchronous JavaScript And XML">AJAX</abbr></li>
<li><abbr title="Application Programming Interface">API</abbr></li>
<li><abbr title="Accessible Rich Internet Applications">ARIA</abbr></li>
<li><abbr title="American Standard Code For Information Interchange">ASCII</abbr></li>
</ul>
<ul class="row">
<li><abbr title="Business to Business">B2B</abbr></li>
<li><abbr title="Business to Consumer.">B2C</abbr></li>
<li><abbr title="Content Management System">CMS</abbr></li>
<li><abbr title="Customer Relationship Management">CRM</abbr></li>
</ul>
<ul class="row">
<li><abbr title="Cascading Style Sheets">CSS</abbr></li>
<li><abbr title="Electrical Engineering">EE</abbr></li>
<li><abbr title="Graphical User Interface">GUI</abbr></li>
<li><abbr title="Hypertext Markup Language">HTML</abbr></li>
</ul>
<ul class="row">
<li><abbr title="Internet Information Services">IIS</abbr></li>
<li><abbr title="Initial Public Offering">IPO</abbr></li>
<li><abbr title="Java Server Page">JSP</abbr></li>
<li><abbr title="Master Service Agreement">MSA</abbr></li>
</ul>
<ul class="row">
<li><abbr title="Request for Proposal">RFP</abbr></li>
<li><abbr title="Return on Investment">ROI</abbr></li>
<li><abbr title="Really Simple Syndication">RSS</abbr></li>
<li><abbr title="Syntactically Awesome Style Sheets">SASS</abbr></li>
</ul>
<ul class="row">
<li><abbr title="Search-Engine Marketing">SEM</abbr></li>
<li><abbr title="Search Engine Optimization">SEO</abbr></li>
<li><abbr title="Standard Generalized Markup Language">SGML</abbr></li>
<li><abbr title="Store Operating Software">SOS</abbr></li>
</ul>
<ul class="row">
<li><abbr title="Statement of Work">SOW</abbr></li>
<li><abbr title="Subversion">SVN</abbr></li>
<li><abbr title="What You See Is What You Get">WYSIWYG</abbr></li><br>
</ul>
</div>
<p>Just to name a few.<br>
Did you manage to get them all? Probably not.</p>
<p>We don’t use abbreviations in school because they aren’t always clear and the professors know we won’t know what they mean. To a newbie like me, these abbreviations feel like a barrier. A wall that divides the veterans of the industry and those trying to enter it. I can’t imagine how the clients must feel.</p>
<p>It seems as if I am not alone in my frustrations. <strong>Inayaili de León says in her article <em>“Becoming Better Communicators,” “We want people to care about design as much as we do, but how can they if we speak to them in a foreign language?”</em></strong> </p>
<p>I’m training to be a designer, I’m in Design, and I had to look up almost every abbreviation listed above.</p>
<h2><a id="What">What I learned</a></h2>
<p>Prior to taking on this assignment, I would have been very hesitant to declare myself capable of creating digital design. To my surprise, I’m not alone. <strong>Matt Griffin thinks, <em>“… the constant change and adjustments that come with living on the internet can feel overwhelming.”</em></strong></p>
<p><strong>Kendra Skeene admits, <em>“It’s a lot to keep track of, whether you’ve been working on the web for [twenty] years or only [twenty] months.”</em></strong></p>
<p>My fear of not knowing all the fancy lingo was lessened when I read <strong>Lyza Danger Gardner’s <em>“Never Heard of It.”</em></strong> She is a seasoned professional who admits to not knowing it all, so I, a soon-to-be-grad, can too. I have good foundations and Google on my side for those pesky abbreviations that keep popping up. As long as I just remember to use my brain as Dave Rupert suggests, when I go to get a job I should do just fine.</p>
<h3>Entering the workplace</h3>
<p>Before starting this assignment, I knew I wanted to work in digital and interaction design, but I didn’t know where. I was worried I didn’t know enough about the web to be able to design for it—that all the jobs out there would require me to know coding languages I’d never heard of before, and I’d have a hard time standing out among the crowd.</p>
<P>The articles I read on A List Apart supplied me with plenty of solid career advice. After reading ar-ticles written by designers, project managers, developers, marketers, writers, and more, I’ve come out with a better understanding of what kind of work I want to do. In the article <strong><em>“80/20 Practi-tioners Make Better Communicators,”</em> Katie Kovalcin</strong> makes a good point about not forcing your-self to learn skills just because you feel the need to.</P>
<p>We’ve all heard the argument that designers need to code. And while that might be ideal in some cases, the point is to expand your personal spectrum of skills to be more useful to your team, whether that manifests itself in the form of design, content strategy, UX, or even project manage-ment. A strong team foundation begins by addressing gaps that need to be filled and the places where people can meet in the middle.</p>
<p>I already have skills that someone desperately needs. I just need to find the right fit and expand my skills from there. Brandon Gregory also feels that hiring isn’t all about technical knowledge. In his article, he says, “personality, fit with the team, communication skills, openness to change, [and] leadership potential” are just as important.</p>
<p>Along with solid technical fundamentals and good soft skills, it seems as if having a voice is also crucial. When I read <strong>Jeffrey Zeldman’s article <em>“The Love You Make,”</em></strong> it became clear to me that if I ever wanted to get anywhere with my career, I was going to have to start writing.</p>
<h2><a id="Standout">Standout Articles</a></h2>
<p>The writers on A List Apart have opened my eyes to many new subjects and perspectives on web design. I particularly enjoyed looking through the game design lens in <strong>Graham Herrli’s <em>“Gaming the System … and Winning.”</em></strong> It was one of the few articles where I copied his diagram on interac-tion personality types and their goals into my notebook. Another article that made me consider a new perspective was <strong><em>“The King vs. Pawn Game of UI Design”</em> by Erik Kennedy</strong>. To start with one simple element and grow from there really made something click in my head.</p>
<p>However, I think that the interview I read between <strong>Mica McPheeters and Sara Wachter-Boettcher</strong> stuck with me the most. I actually caught myself saying “hmm” out loud as I was reading along. Sara’s point about crash-test dummies being sized to the average male completely shifted my understanding about how important user-centered design is. Like, life-or-death important. There is no excuse not to test your products or services on a variety of users if this is what’s at stake! It’s an article I’m glad I read.</p>
<h2><a id="Problems">Problems In the Industry</a></h2>
<p>During the course of my project, I noticed some things about A List Apart that I was spending so much time on. Like, for example, it wasn’t until I got to the articles that were published after 2014 that I really started to understand and relate to the content; funnily enough, that was the year I started my design degree.</p>
<p>I also noticed that it was around this time that female writers became much more prominent on the site. Today there may be many women on A List Apart, but I must point out a lack of women of color. Shoutout to <strong>Aimee Gonzalez-Cameron for her arti-cle <em>“Hello, My Name is <Error>,”</em></strong> a beautiful assertion for cultural inclusion on the web through user-centered design.</p>
<img src="images/image3.jpg" alt="Sketch of a woman trying to fit her name into a box">
<p>Despite the lack of representation of women of color, I was very happy to see many writers acknowledge their privilege in the industry. Thanks to Cennydd Bowles, Matt Griffin, and Rian van der Merwe for their articles. My only qualm is that the topic of privilege has only appeared on A List Apart in the last five years. Because isn’t it kinda ironic? As creators of the web we aim to allow everyone access to our content, but not everyone has access to the industry itself. Sara Wachter-Boettcher wrote an interesting article that expands on this idea, which you should read if you haven’t already. However, I won’t hold it against any of you. That’s why we are here anyway: to learn.</p>
<h2><a id="Conclusion">Conclusion</a></h2>
<p>Looking back at this assignment, I’m happy to say that I did it. It was worth every second (even with the possible eye damage from reading off my computer screen for hours on end). It was worth it because I learned more than I had ever anticipated.</p>
<p>I received an unexpected history lesson of the recent internet past. I was bombarded by an explosion of new terms and abbreviations. I learned a lot about myself and how I can possibly fit into this community. Most importantly, I came out on the other end with more confidence in myself and my abilities which is probably the greatest graduation gift I could receive from a final project in my last year of university. Thanks for reading, and wish me luck!</p>
<h3>Thanks</h3>
<p>Thanks to my Interactive Design professor Michael LeBlanc for giving me this assignment and pushing me to take it further.</p>
<h2><a id="About">About the Author</a></h2>
<h3>Samantha Lynn</h3>
<img class="author" src="images/image4.jpg" alt="Samantha Lynns portrait, who has red curly hair">
<p>Samantha Lynn, or better known as just “Sam,” is a recent graduate from the Interdisciplinary Design Program at NSCAD University in Halifax, Canada. She has just returned from a semester of exchange in Germany with a specific focus on Interaction Design. Currently done with school, Sam is on the hunt for a job in UI/UX.</p>
</main>
<footer>
<p>© Copyright 2018 | Samantha Lynn</p>
</footer>
</div>
</body>
</html>
Welcome to SO! Just a couple of pointers, when submitting code (HTML, CSS, Javascript, etc), keep it as minimal as you can be. Meaning, posting the entire <html> element isn't needed, just a few elements under <main> and <header> would be sufficient. Same goes for the CSS (only list pertaining styles, not the entire file).
As far as your question is concerned, w/o using Javascript, you cannot change the background and/or text of the "menu" element that you've scrolled to. :target works solely the ID of the element that matches the current URL (meaning you'd either have to use anchor links w/ the href="#someID", or use Javascript/jQuery to call a click event on another type of element.
The :target pseudo-class is used to select an element when that element’s ID matches part of the current URL.
https://www.digitalocean.com/community/tutorials/css-css-only-click-handler
The above blog will not help your cause, it only describes how the :target pseudo class works.
Additionally, the CSS for:
nav li a:target and header:target will not work, as when clicking the anchor element that has href="#someID", the target pseudo-class points to the element that HAS the ID of someID.
<h2><a id="someID">Some Text Here</a></h2>
If you add CSS to what you already have, such as h2 a:target { background-color: green; }, you'll see that the background color of the targeted element w/ ID matching "someID", will then have a green background, once the corresponding anchor element w/ the href="someID" is clicked
Another note, you shouldn't ever have anchor elements that do not have an href. Meaning, inside your <h2> elements, there's no point in having an anchor element as a child, as it does nothing. The HTML would be invalid (it'll still render in a browser/device, but it's still invalid HTML.
The only way to have the menu item that was clicked, and change the "style" of that clicked element, is by using Javascript, to my knowledge (relating to your question and requirement).
There are over the top plugins that can do this for you, such as waypoints http://imakewebthings.com/waypoints/
Or, you could write your own Javascript, to determine where the id of whatever element (or class[es]) is compared to a "point" on the page (scrollTop).
i create a letter template with every page header/footer
but when content is too long it not breaking page before footer section how i can do it ?
in my now the content overriding to the footer section in printing media
please any suggestion or help how i can repeat a header and footer every page then print the
.mmm div that contains content section without override
.my-footer {
bottom: 0;
position: fixed;
right: 0;
width:50%
}
.my-header {
top: 0;
right: -150;
position: fixed;
width:100%;
}
.date-number-div {
margin-top:12%;
position: relative;
padding-left:50;
font-size:14;
padding-top:1%;
}
.for-subject-div{
margin-top:3%;padding-right:50px;padding-left:65px;
}
.content-div{
position: relative;
padding-bottom:350px;padding-right:50px;padding-left:65px;float: right;
page-break-after: always;
}
.regard-div{
margin-top:9%;font-size:16px;
}
.cpp-div{
position: relative;
margin-top:0%;padding-right:0px;font-size:9px;
}
.signature-img {
position: static;
bottom: -60%;
padding-left:60px;
}
<div id="answerContent" class="border" style="width:870px; margin: 0 auto; ">
<div class="my-header">header section</div>
<div class="mmm">
<div class="col-sm-12 col-md-12 col-lg-12 text-left date-number-div" >
<span class="a-letter-c-number" name="a-letter-c-number">112233</span>
<span class="a-letter-c-date" name="a-letter-c-date">2020-20-02</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-right for-subject-div" >
<span dir="rtl" class="a-letter-c-from" name="a-letter-c-from">from</span>
<span dir="rtl" class="a-letter-c-subject" name="a-letter-c-subject">subject</span>
</div>
<div dir="rtl" class="col-sm-12 col-md-12 col-lg-12 text-right content-div" >
<span dir="rtl" class="a-letter-c-content" name="a-letter-c-content">The toppings you may chose for that TV dinner pizza slice when you forgot to shop for foods, the paint you may slap on your face to impress the new boss is your business. But what about your daily bread? Design comps, layouts, wireframes—will your clients accept that you go about things the facile way? Authorities in our business will tell in no uncertain terms that Lorem Ipsum is that huge, huge no no to forswear forever. Not so fast, I'd say, there are some redeeming factors in favor of greeking text, as its use is merely the symptom of a worse problem to take into consideration.
You begin with a text, you sculpt information, you chisel away what's not needed, you come to the point, make things clear, add value, you're a content person, you like words. Design is no afterthought, far from it, but it comes in a deserved second. Anyway, you still use Lorem Ipsum and rightly so, as it will always have a place in the web workers toolbox, as things happen, not always the way you like it, not always in the preferred order. Even if your less into design and more into content strategy you may find some redeeming value with, wait for it, dummy copy, no less.
Consider this: You made all the required mock ups for commissioned layout, got all the approvals, built a tested code base or had them built, you decided on a content management system, got a license for it or adapted open source software for your client's needs. Then the question arises: where's the content? Not there yet? That's not so bad, there's dummy copy to the rescue. But worse, what if the fish doesn't fit in the can, the foot's to big for the boot? Or to small? To short sentences, to many headings, images too large for the proposed design, or too small, or they fit in but it looks iffy for reasons the folks in the meeting can't quite tell right now, but they're unhappy, somehow. A client that's unhappy for a reason is a problem, a client that's unhappy though he or her can't quite put a finger on it is worse.
But. A big but: Lorem Ipsum is not t the root of the problem, it just shows what's going wrong. Chances are there wasn't collaboration, communication, and checkpoints, there wasn't a process agreed upon or specified with the granularity required. It's content strategy gone awry right from the start. Forswearing the use of Lorem Ipsum wouldn't have helped, won't help now. It's like saying you're a bad designer, use less bold text, don't use italics in every other paragraph. True enough, but that's not all that it takes to get things back on track.
So Lorem Ipsum is bad (not necessarily)
There's lot of hate out there for a text that amounts to little more than garbled words in an old language. The villagers are out there with a vengeance to get that Frankenstein, wielding torches and pitchforks, wanting to tar and feather it at the least, running it out of town in shame.
One of the villagers, Kristina Halvorson from Adaptive Path, holds steadfastly to the notion that design can’t be tested without real content:
I’ve heard the argument that “lorem ipsum” is effective in wireframing or design because it helps people focus on the actual layout, or color scheme, or whatever. What kills me here is that we’re talking about creating a user experience that will (whether we like it or not) be DRIVEN by words. The entire structure of the page or app flow is FOR THE WORDS.
If that's what you think how bout the other way around? How can you evaluate content without design? No typography, no colors, no layout, no styles, all those things that convey the important signals that go beyond the mere textual, hierarchies of information, weight, emphasis, oblique stresses, priorities, all those subtle cues that also have visual and emotional appeal to the reader. Rigid proponents of content strategy may shun the use of dummy copy but then designers might want to ask them to provide style sheets with the copy decks they supply that are in tune with the design direction they require.
Or else, an alternative route: set checkpoints, networks, processes, junctions between content and layout. Depending on the state of affairs it may be fine to concentrate either on design or content, reversing gears when needed.
Or maybe not. How about this: build in appropriate intersections and checkpoints between design and content. Accept that it’s sometimes okay to focus just on the content or just on the design.
Luke Wroblewski, currently a Product Director at Google, holds that fake data can break down in real life:
Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws. A seemingly elegant design can quickly begin to bloat with unexpected content or break under the weight of actual activity. Fake data can ensure a nice looking layout but it doesn’t reflect what a living, breathing application must endure. Real data does.
Websites in professional use templating systems. Commercial publishing platforms and content management systems ensure that you can show different text, different data using the same template. When it's about controlling hundreds of articles, product pages for web shops, or user profiles in social networks, all of them potentially with different sizes, formats, rules for differing elements things can break, designs agreed upon can have unintended consequences and look much different than expected.
This is quite a problem to solve, but just doing without greeking text won't fix it. Using test items of real content and data in designs will help, but there's no guarantee that every oddity will be found and corrected. Do you want to be sure? Then a prototype or beta site with real content published from the real CMS is needed—but you’re not going that far until you go through an initial design cycle.
Lorem Ipsum actually is usefull in the design stage as it focuses our attention on places where the content is a dynamic block coming from the CMS (unlike static content elements that will always stay the same.) Blocks of Lorem Ipsum with a character count range provide a obvious reminder to check and re-check that the design and the content model match up.
Kyle Fiedler from the Design Informer feels that distracting copy is your fault:
If the copy becomes distracting in the design then you are doing something wrong or they are discussing copy changes. It might be a bit annoying but you could tell them that that discussion would be best suited for another time. At worst the discussion is at least working towards the final goal of your site where questions about lorem ipsum don’t.
Summing up, if the copy is diverting attention from the design it’s because it’s not up to task.
Typographers of yore didn't come up with the concept of dummy copy because people thought that content is inconsequential window dressing, only there to be used by designers who can’t be bothered to read. Lorem Ipsum is needed because words matter, a lot. Just fill up a page with draft copy about the client’s business and they will actually read it and comment on it. They will be drawn to it, fiercely. Do it the wrong way and draft copy can derail your design review.
Asking the client to pay no attention Lorem Ipsum isn't hard as it doesn’t make sense in the first place, that will limit any initial interest soon enough. Try telling a client to ignore draft copy however, and you're up to something you can't win. Whenever draft copy comes up in a meeting confused questions about it ensue.
Summing up, really:
Lorem Ipsum is a tool that can be useful, used intentionally it may help solve some problems. If you go about content strategy the wrong way, fix that problem.</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-center regard-div" >
<span dir="rtl" class="a-letter-c-end" name="a-letter-c-end">regards</span><br><br>
</div>
<div id="a-sig" class="col-sm-12 col-md-12 col-lg-12 text-left signature-img" >
signature section
</div>
<div id="a-cp-cover" class="col-sm-12 col-md-12 col-lg-12 text-right cpp-div" >
<span dir="rtl" >
وێنەیەك بۆ/
</span>
<ul class="a-cpfor cpp-div" name="a-cpfor" dir="rtl" >
</ul>
</div>
</div>
<div class="my-footer">footer section</div>
</div>
html code
<div id="answerContent" class="border" style="width:870px; margin: 0 auto; ">
<div class="my-header">header section</div>
<div class="mmm">
<div class="col-sm-12 col-md-12 col-lg-12 text-left date-number-div" >
<span class="a-letter-c-number" name="a-letter-c-number">112233</span>
<span class="a-letter-c-date" name="a-letter-c-date">2020-20-02</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-right for-subject-div" >
<span dir="rtl" class="a-letter-c-from" name="a-letter-c-from">from</span>
<span dir="rtl" class="a-letter-c-subject" name="a-letter-c-subject">subject</span>
</div>
<div dir="rtl" class="col-sm-12 col-md-12 col-lg-12 text-right content-div" >
<span dir="rtl" class="a-letter-c-content" name="a-letter-c-content">content </span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-center regard-div" >
<span dir="rtl" class="a-letter-c-end" name="a-letter-c-end">regards</span><br><br>
</div>
<div id="a-sig" class="col-sm-12 col-md-12 col-lg-12 text-left signature-img" >
signature section
</div>
<div id="a-cp-cover" class="col-sm-12 col-md-12 col-lg-12 text-right cpp-div" >
<span dir="rtl" >
وێنەیەك بۆ/
</span>
<ul class="a-cpfor cpp-div" name="a-cpfor" dir="rtl" >
</ul>
</div>
</div>
<div class="my-footer">footer section</div>
</div>
CSS Code
#media print{
.my-footer {
bottom: 0;
position: fixed;
right: 0;
width:50%
}
.my-header {
top: 0;
right: -150;
position: fixed;
width:100%;
}
.date-number-div {
margin-top:12%;
position: relative;
padding-left:50;
font-size:14;
padding-top:1%;
}
.for-subject-div{
margin-top:3%;padding-right:50px;padding-left:65px;
}
.content-div{
position: relative;
padding-bottom:350px;padding-right:50px;padding-left:65px;float: right;
page-break-after: always;
}
.regard-div{
margin-top:9%;font-size:16px;
}
.cpp-div{
position: relative;
margin-top:0%;padding-right:0px;font-size:9px;
}
.signature-img {
position: static;
bottom: -60%;
padding-left:60px;
}
}
add a width of 100% to the footer section and give it a non-transparent background.See in the snippet, works then fine.
.my-footer {
bottom: 0;
position: fixed;
right: 0;
width: 100%;
background-color: white;
text-align: center;
margin: 0;
}
.my-header {
top: 0;
right: 0;
position: fixed;
width:100%;
background-color: white;
text-align: center;
margin: 0;
z-index: 2;
}
.date-number-div {
margin-top:12%;
position: relative;
padding-left:50;
font-size:14;
padding-top:1%;
}
.for-subject-div{
margin-top:3%;padding-right:50px;padding-left:65px;
}
.content-div{
position: relative;
padding-bottom:350px;padding-right:50px;padding-left:65px;float: right;
page-break-after: always;
}
.regard-div{
margin-top:9%;font-size:16px;
}
.cpp-div{
position: relative;
margin-top:0%;padding-right:0px;font-size:9px;
}
.signature-img {
position: static;
bottom: -60%;
padding-left:60px;
}
<div id="answerContent" class="border" style="width:870px; margin: 0 auto; ">
<div class="my-header">header section</div>
<div class="mmm">
<div class="col-sm-12 col-md-12 col-lg-12 text-left date-number-div" >
<span class="a-letter-c-number" name="a-letter-c-number">112233</span>
<span class="a-letter-c-date" name="a-letter-c-date">2020-20-02</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-right for-subject-div" >
<span dir="rtl" class="a-letter-c-from" name="a-letter-c-from">from</span>
<span dir="rtl" class="a-letter-c-subject" name="a-letter-c-subject">subject</span>
</div>
<div dir="rtl" class="col-sm-12 col-md-12 col-lg-12 text-right content-div" >
<span dir="rtl" class="a-letter-c-content" name="a-letter-c-content">The toppings you may chose for that TV dinner pizza slice when you forgot to shop for foods, the paint you may slap on your face to impress the new boss is your business. But what about your daily bread? Design comps, layouts, wireframes—will your clients accept that you go about things the facile way? Authorities in our business will tell in no uncertain terms that Lorem Ipsum is that huge, huge no no to forswear forever. Not so fast, I'd say, there are some redeeming factors in favor of greeking text, as its use is merely the symptom of a worse problem to take into consideration.
You begin with a text, you sculpt information, you chisel away what's not needed, you come to the point, make things clear, add value, you're a content person, you like words. Design is no afterthought, far from it, but it comes in a deserved second. Anyway, you still use Lorem Ipsum and rightly so, as it will always have a place in the web workers toolbox, as things happen, not always the way you like it, not always in the preferred order. Even if your less into design and more into content strategy you may find some redeeming value with, wait for it, dummy copy, no less.
Consider this: You made all the required mock ups for commissioned layout, got all the approvals, built a tested code base or had them built, you decided on a content management system, got a license for it or adapted open source software for your client's needs. Then the question arises: where's the content? Not there yet? That's not so bad, there's dummy copy to the rescue. But worse, what if the fish doesn't fit in the can, the foot's to big for the boot? Or to small? To short sentences, to many headings, images too large for the proposed design, or too small, or they fit in but it looks iffy for reasons the folks in the meeting can't quite tell right now, but they're unhappy, somehow. A client that's unhappy for a reason is a problem, a client that's unhappy though he or her can't quite put a finger on it is worse.
But. A big but: Lorem Ipsum is not t the root of the problem, it just shows what's going wrong. Chances are there wasn't collaboration, communication, and checkpoints, there wasn't a process agreed upon or specified with the granularity required. It's content strategy gone awry right from the start. Forswearing the use of Lorem Ipsum wouldn't have helped, won't help now. It's like saying you're a bad designer, use less bold text, don't use italics in every other paragraph. True enough, but that's not all that it takes to get things back on track.
So Lorem Ipsum is bad (not necessarily)
There's lot of hate out there for a text that amounts to little more than garbled words in an old language. The villagers are out there with a vengeance to get that Frankenstein, wielding torches and pitchforks, wanting to tar and feather it at the least, running it out of town in shame.
One of the villagers, Kristina Halvorson from Adaptive Path, holds steadfastly to the notion that design can’t be tested without real content:
I’ve heard the argument that “lorem ipsum” is effective in wireframing or design because it helps people focus on the actual layout, or color scheme, or whatever. What kills me here is that we’re talking about creating a user experience that will (whether we like it or not) be DRIVEN by words. The entire structure of the page or app flow is FOR THE WORDS.
If that's what you think how bout the other way around? How can you evaluate content without design? No typography, no colors, no layout, no styles, all those things that convey the important signals that go beyond the mere textual, hierarchies of information, weight, emphasis, oblique stresses, priorities, all those subtle cues that also have visual and emotional appeal to the reader. Rigid proponents of content strategy may shun the use of dummy copy but then designers might want to ask them to provide style sheets with the copy decks they supply that are in tune with the design direction they require.
Or else, an alternative route: set checkpoints, networks, processes, junctions between content and layout. Depending on the state of affairs it may be fine to concentrate either on design or content, reversing gears when needed.
Or maybe not. How about this: build in appropriate intersections and checkpoints between design and content. Accept that it’s sometimes okay to focus just on the content or just on the design.
Luke Wroblewski, currently a Product Director at Google, holds that fake data can break down in real life:
Using dummy content or fake information in the Web design process can result in products with unrealistic assumptions and potentially serious design flaws. A seemingly elegant design can quickly begin to bloat with unexpected content or break under the weight of actual activity. Fake data can ensure a nice looking layout but it doesn’t reflect what a living, breathing application must endure. Real data does.
Websites in professional use templating systems. Commercial publishing platforms and content management systems ensure that you can show different text, different data using the same template. When it's about controlling hundreds of articles, product pages for web shops, or user profiles in social networks, all of them potentially with different sizes, formats, rules for differing elements things can break, designs agreed upon can have unintended consequences and look much different than expected.
This is quite a problem to solve, but just doing without greeking text won't fix it. Using test items of real content and data in designs will help, but there's no guarantee that every oddity will be found and corrected. Do you want to be sure? Then a prototype or beta site with real content published from the real CMS is needed—but you’re not going that far until you go through an initial design cycle.
Lorem Ipsum actually is usefull in the design stage as it focuses our attention on places where the content is a dynamic block coming from the CMS (unlike static content elements that will always stay the same.) Blocks of Lorem Ipsum with a character count range provide a obvious reminder to check and re-check that the design and the content model match up.
Kyle Fiedler from the Design Informer feels that distracting copy is your fault:
If the copy becomes distracting in the design then you are doing something wrong or they are discussing copy changes. It might be a bit annoying but you could tell them that that discussion would be best suited for another time. At worst the discussion is at least working towards the final goal of your site where questions about lorem ipsum don’t.
Summing up, if the copy is diverting attention from the design it’s because it’s not up to task.
Typographers of yore didn't come up with the concept of dummy copy because people thought that content is inconsequential window dressing, only there to be used by designers who can’t be bothered to read. Lorem Ipsum is needed because words matter, a lot. Just fill up a page with draft copy about the client’s business and they will actually read it and comment on it. They will be drawn to it, fiercely. Do it the wrong way and draft copy can derail your design review.
Asking the client to pay no attention Lorem Ipsum isn't hard as it doesn’t make sense in the first place, that will limit any initial interest soon enough. Try telling a client to ignore draft copy however, and you're up to something you can't win. Whenever draft copy comes up in a meeting confused questions about it ensue.
Summing up, really:
Lorem Ipsum is a tool that can be useful, used intentionally it may help solve some problems. If you go about content strategy the wrong way, fix that problem.</span>
</div>
<div class="col-sm-12 col-md-12 col-lg-12 text-center regard-div" >
<span dir="rtl" class="a-letter-c-end" name="a-letter-c-end">regards</span><br><br>
</div>
<div id="a-sig" class="col-sm-12 col-md-12 col-lg-12 text-left signature-img" >
signature section
</div>
<div id="a-cp-cover" class="col-sm-12 col-md-12 col-lg-12 text-right cpp-div" >
<span dir="rtl" >
وێنەیەك بۆ/
</span>
<ul class="a-cpfor cpp-div" name="a-cpfor" dir="rtl" >
</ul>
</div>
</div>
<div class="my-footer">footer section</div>
</div>
When building my site, I visited the Resizing Image Based on Browser Width/Height page to attempt to create an image that would resize itself based on the size of the window. It currently works on most displays, but a large portion of whitespace appears on the right when the display goes beyond approximately 16 inches.
How would I eliminate this whitespace?
Here is my HTML/CSS:
* {
font-family: "Big Caslon","Book Antiqua","Palatino Linotype",Georgia,serif;
}
p {
padding: 1em 2em;
font-size: 1.3rem;
}
h2 {
font-size: 3em;
margin-left: 1em !important;
}
.main-title h1 {
font-size: 4em;
}
.main-title h3 {
font-size: 2em;
}
.post-hero-image {
max-width: 100%;
height: auto;
width: auto; /* Internet Explorer */
}
.content img {
max-width: 50%;
height: auto;
width: auto;
margin: 2em 25%;
}
.main-title {
font-size: 120%;
text-align: center;
font-weight: 800;
margin: 2em 5em;
}
ol li {
font-size: 1.5em;
margin-left: 2em;
}
.content div {
margin-left: 3em;
}
<!DOCTYPE html>
<html>
<head>
<link href="header+footer.css" rel = "stylesheet" type="text/css" />
<link href="the-10x-rule-style.css" rel = "stylesheet" type="text/css" media="screen"/>
<meta charset="utf-8">
<title> The 10X Rule - The Novel Column </title>
</head>
<body>
<nav>
<h1> The Novel Column </h1>
<ul>
<li> Resources
<ul>
<li> Book Reviews </li>
<li> Quotes and Principles </li>
<li> Community Aid </li>
</ul>
</li>
<li> About Us </li>
</ul>
</nav>
<img src="https://thenovelcolumn.com/wp-content/uploads/2019/04/The-10X-Rule-Image-2-e1555476700855.jpg" alt="The 10X Rule" class="post-hero-image">
<div class="main-title">
<h1> The 10X Rule</h1>
<h3 class="author"> Grant Cardone</h3>
</div>
<div class="content">
<p> I first heard about Grant Cardone and his work on Youtube. In one of his videos, he briefly talked about how one of his books, <span style="text-decoration: underline;">The 10X Rule</span>, caused him to organize one of the largest personal growth and business conferences in the entire world. As I picked up this primer to massive action, I thought, <i> “This must be interesting!” </i> </p>
<img class="infographic" src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-10X-Rule-Infographic.png">
<h2>What is the 10X Rule?</h2>
<div class="about-book">
<ol>
<li><b> Set goals and targets that are 10X higher than what you believe you can achieve.</b></li>
<p class="goals_intro"> Grant believes that it is imperative for us to set goals higher than what you believe you can achieve. If your goal is to close 5 customers every week, convince 50 customers that your product provides them the best value. If you want to get one article written every week, try getting one polished article every day. Your 10X goal doesn’t necessarily need to be exactly 10 times more than what you expect; 4, 3, or even 2 times more is acceptable. The main idea is to attempt to maximize your potential.</p>
<p class="goals_why">Why should we do this? If we don’t set high goals for ourselves, we actually work below our expected level of work ethic (since not high goal = easy to achieve). However, when we set a challenging goal for ourselves, we know that our standard work level is not high enough for success. Due to the difficulty of the target, we will naturally raise our level of work habits to a higher standard than before. This in turn allows us to reach our original goal or even exceed it.</p>
<p class="goals_example">I absolutely agree with this principle. When reading the section of The 10X Rule regarding this topic, I was preparing for a computing contest (similar to a hackathon). The average score was in the 40 – 50 range with the highest score being 75 (a perfect score). At first, I told myself that getting a 60/75, a fairly competitive score, was enough. However, I remembered Grant’s advice and raised my goal to 70 or more. Reflecting back on that decision, I realized that raising my goal motivated me to wake up early in the morning to complete a practice contest every day (each one took approximately 3 hours).</p>
<p class="goals_conflict">During this process, there were times where difficult problems caused me to ask myself, “Is this truly necessary?” “Do I really need a 70?” In this situation, Grant would list his goals out on a notepad so that he put his main focus on the end goal he wants to achieve, not so much in the problem at hand. This is exactly what I did. I grabbed my journal and wrote, “I have a score of 70 or more on the CCC contest” (it is important to write your goal as if you already accomplished it). I then added some further detail on the steps I would take to achieve this objective.</p>
<p class="goals_conclusion">Even though I ended up with a score of 60 in the end, the 10X actions that came as a result of the revised goal were what got me to my original target. If I stuck to my original goal, I may have got an even lower score!</p>
<li><b>Take actions that are 10X greater than what you expect you need to take.</b></li>
<p class="10x_actions">Not doing this plays a key part in why many people give up on completing a certain task. Since this is my first review, take creating a website as an example. Before setting up The Novel Column, I was fairly overconfident and only listed out two possible problems I would encounter. As I was designing my pages and creating the content, I found more than 20 problems that needed to be dealt with. As I spent three hours trying to find an answer in vain, I remembered this part of the rule and how I directly violated it by not spending enough time pondering the possible problems I would encounter and how I would tackle them. Due to this, I went back to the drawing board, thought about 30 design and content problems I may encounter, and found a detailed and specific answer to each one of them. By doing so, I mentally prepared myself for more problems along the way and will therefore be less susceptible to quitting when encountering them.</p>
</ol>
</div>
<a data-cp-link="1" href="#" target="_self" rel="noopener noreferrer"><img class="good-size" src="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/6692944548b24ec5a2dfd3d09c1ca97-e1555886155678.jpg?zoom=2.5&w=3840&ssl=1" "="" i1.wp.com="" thenovelcolumn.com="" wp-content="" uploads="" 2019="" 04="" 6692944548b24ec5a2dfd3d09c1ca97-e1555886155678.jpg?zoom="2&w=3840&ssl=1"" width="563" height="393" src-orig="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/6692944548b24ec5a2dfd3d09c1ca97-e1555886155678.jpg?w=3840&ssl=1" scale="2.5"></a>
<h2> The ONE Takeaway:</h2>
<div id="one-message">
<p class="the-takeaway"> Massive success is only achieved through massive action.</p>
</div>
<h2>Main Takeaways</h2>
<div id="takeaways">
<ol>
<li><b>Don’t Compete With Others</b></li>
<p class="dont_compete"> When you compete with others, you are restricting yourself from achieving massive results. Think about it: you are telling yourself that you simply need to be better than your competition. In other words, your competition dictates your work ethic. Thus, the 10X Rule is directly violated since you are not even attempting to achieve your full potential. For example, what if the competition is offering sub-par services? Based on Grant’s analysis, you simply have to develop your product or service until yours is at their level or a little bit better to beat them. This means that your service is also sub-par (or maybe a little bit better). Are you making an effort to reach your (company’s) potential? Definitely not. Instead, Grant suggests delivering so much value to your clients through your product and service that you will obliterate all competition. This will help you dominate the sector you are in.</p>
<li><b>Successful People take Massive Action</b></li>
<p class="massive_action_focus">Grant tells us that ordinary people approach a task and simply quit when it gets too difficult (or when they realize that the difficulty of completing the task is higher than what they expected). Even then, they are self-satisfied and tell themselves that the attempt is good enough. However, Grant tells us that an attempt without an intended result is the exact same thing as not accomplishing anything at all. If you meet hardships, the author suggests persisting and continuing to take massive action to overcome them and reach the end result (focusing on the goal and not the process).</p>
<p class="massive_action_four_degrees">There are four degrees of actions. Many average people fit inside the first three. They aren’t happy with their 9-5 job but don’t find a way to change for the better. However, successful people take the last degree: massive action. They do everything then can to improving their skill, dominate their sector (instead of competing with others), and reach their maximum potential. This is done by reading an average of 60 books and attending an average of 3 seminars and/or webinars every year.</p>
<p class="massive_action_no_bounds">The successful also know that their energy, creativity, and effort have no bounds. Take one of Aesop’s fables, <u>The Tortoise and the Hare</u>, for example. In this short parable, the hare is portrayed as a fast but cocky individual and the tortoise as slow but steadfast. Due to the hare’s lack of action, the tortoise wins in end, causing most readers to infer that the slow and perseverant will always beat the skilled but arrogant. However, if there was an individual who had the speed of the hare and the steadfastness of the tortoise, it would crush both animals and have no competition. Grant’s advice here is to take attributes from both animals; we not only want to take massive actions and maintain motivation but also posess continued persistence. This helps us become the best in whatever sector we are in.</p>
<li><b>Average is a Failing Formula</b></li>
<p class="average_failing_intro"> Ordinary, standard, and usual. These are the first three words that come up when we google synonyms for the word “average”. Thinking and doing the typical way will stop many dreams from becoming a reality. This is due to two reasons: average thoughts and average actions.</p>
<p class:="average_failing_starbucks">During the troubling economic times in 2008, Starbucks could be seen as the best example for anything but average action. Not only were they doing what other companies in their and sector were (cutting expenses and removing unprofitable locations), Starbucks CEO Howard Schultz would travel to different locations around the US and ask customers on how his company could better serve them. It was most likely these massive actions and improvements to the company that got the attention of investors and customers and caused Starbucks to be one of the biggest coffee companies in the world.</p>
<p class="average_failing_company">Average also assumes that everything will work as intended. These consequences can be seen in many startup companies. For example, members of a startup decide to “play it safe” and present their product to 5 people (potential buyer or investor). They think that 10 calls is simply enough. However, what if none of the 10 people they called have time or interest in learning about your product? Even the most successful products may need 100 calls to gather 10 people. Along with other negative setbacks (competition dominating the startup’s sector, a key member in an accident), these average thoughts and actions this startup took will cause many members may be overwhelmed (since these possibilities were never considered) and even result in the majority of them leaving.</p>
<p class="average_failing_conclusion"> Will ordinary results appeal to potential clients? Will standard results help us dominate our sector? Will typical actions and thoughts propel your product or service to high levels of success? Definitely not! It is due to these reasons that Grant finds it critical to eliminate the notion of average in our minds if we want massive results.</p>
</ol>
</div>
<img class="good-size" src="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/cd45503f6ff3529bfcfc10e3924f18a-e1555886172469.jpg?zoom=2.5&w=3840&ssl=1" alt="" title="Highlighted Page" width="563" height="393" src-orig="https://i1.wp.com/thenovelcolumn.com/wp-content/uploads/2019/04/cd45503f6ff3529bfcfc10e3924f18a-e1555886172469.jpg?w=3840&ssl=1" scale="2.5">
<h2> Personal Opinions</h2>
<div class="opinions">
<p class="opinions-intro">For starters, this book is very easy to understand. I love how Grant only focuses on <b>one or two</b> important points of information in each chapter, use multiple examples in the real world, and repeating his idea and his supporting points multiple times in the chapter. These small things allowed me to clearly understand what his points and principles are and why they are true while the reiterations allowed the information to stick in my head.</p>
<p class="successful-vs-unsuccessful">I especially love the <u> Successful or Unsuccessful</u> section of the book. It is here where Grant talks about his findings on the common traits of successful people. There are some examples which can be found in other books, such as persistence, having a “can-do” attitude, and being goal oriented. However, there are also many that are unique to <u> The 10X Rule </u> itself, such as being highly ethical, being uncomfortable, and committing first – figure out later (my personal favorite). To me, this section is worth more than the price of the book itself!</p>
<p class="minor-issues">Even with these important facts, there are some minor issues I have with <u> The 10X Rule</u>. First, the repetition of an idea over and over again through 7 – 10 pages. If I was not highlighting important points in the book (which was something not done for the first 100 pages), it was easy for me to doze off and lose engagement in Grant’s information. It would have also been better if there were some sort of pictures or diagrams instead of simply a page filled with words. This would have allowed Grant to elaborate on his points without using so much text, giving any reader’s attention span some leeway.</p>
</div>
<div class="conclusion">
<p>Along with many important non-conventional principles successful people abide by, <u> The 10X Rule </u> showed me why many habits of the majority of society don’t allow for massive success and what high achievers do to get the success they have.</p>
<p> Due to this, I give this book a <b> 7.5 </b>.</p>
</div>
<img class="infographic" src="https://thenovelcolumn.com/wp-content/uploads/2019/05/The-10X-Rule-Infographic.png">
</div>
</div>
</body>
</html>
Thanks for your help in advance!
Try adding min-width: 100%; to the .post-hero-image class in your CSS. That will allow it to fill the full width of the page even if the image resolution is smaller than the window width.
anchor does not work, but if a move the anchor to the top it works. I don't understand whats going on. this is my first time asking a question in StackOverflow. thanks in advanced.here is the full html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Salvador Portfolio</title>
<link href="index.css" rel="stylesheet" >
</head>
<body>
<!--this is for the introduction in portfolio-->
<section>
<div class="section_text">
<h1>Welcome to my portfolio</h1>
</div>
</section>
<!--aside where my info and some nav links-->
<div class="aside">
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
Send me an email
<form></form>
<h3>Hello! My name is Salvador
Sandoval, I'm a programmer on this website I will show you projects a did in college, also some of my personal projects and programming concepts I learn in college. visiting.</h3>
</div>
<!--this is where all show explanation & code -->
<div class="content">
<h3>7 reasons why trainers like our books</h3>
<h2>Modular book organization</h2>
<p>In the first section or two of all our books, we present the core content
for the book, which includes a complete subset of usable skills. After the core
content, each section of the book is designed as an independent module. This
means that these sections don't have to be taught in sequence. As a result, you
can customize your courses by assigning just those sections that you want to
teach.</p>
<p>Whenever possible, each of the chapters is also designed as an independent
module. When this is true, you can assign just those chapters that are right
for your courses. This approach also makes the chapters better for on-the-job
reference later on.</p>
<h2>Top-down chapter design</h2>
<p>Unlike many competing books and products, most chapters in our books have a
unique top-down design that moves from the simple to complex. This makes it
easier for trainees to learn. It also means that you can present the topics at
the start of a chapter to make sure everyone understands the essential details,
without presenting all of the topics in a chapter. Then, your trainees can
learn the other topics on their own or as they're needed on the job.</p>
<h2>Paired-pages format</h2>
<p>If you page through one of our books, you'll see that all of the information
is presented in "paired pages." In each pair, the right page is a
figure that contains the syntax, guidelines, and examples, and the left page is
text that contains the perspective and extra explanation.</p>
<p>One benefit of this format is that it lets trainees learn at their own pace.
If, for example, you're a novice, you'll probably want to read the text on the
left as you refer to the figure on the right. But if you have experience, you
may be able to get all the information you need from the figure. Either way,
our customers tell us that they love this presentation method because it helps
them learn faster and better.</p>
<h2>Performance on the job</h2>
<p>On-the-job performance is the measure of a successful course. And our
paired-pages format makes it easy for your trainees to access all the
information you've covered long after the course is over. </p>
<p>Instead of having to dig through the text or handouts, they can use the
expanded table of contents or the index to find the topic they're looking for.
Then, the figure on the righthand page will give them the details they need to
apply what they learned in your course.</p>
<p>This type of quick reference is absolutely essential when you're working
with the hundreds of classes, methods, and properties of an OO language like
Java, Visual Basic, or C#...and yet no other books offer this unique format.</p>
<h2>More practice in less time</h2>
<p>The exercises for our books give trainees a chance to get valuable, hands-on
experience without wasting any time. That's because we provide the starting
code, either from our web site or the Instructor's CD, so that trainees don't
have to enter routine code that they already know.</p>
<p>Sometimes, these exercises guide the trainees through the application of
what they've just learned. Sometimes, they challenge the trainees to apply what
they've learned in new ways. And you can assign the exercises so your trainees
do them in class or on their own.</p>
<p>Incidentally, unlike other books, <i>our exercises never present new skills
or information</i>. As we see it, this is the only sensible approach to text
and exercise design. Curiously, though, the exercises in some books do present
new skills. Unfortunately, this means that (1) trainees who don't do the
exercises don't learn the new skills, and (2) there's no easy way for trainees
to find the information they need if they're having trouble since the skills
haven't been covered yet.</p>
<h2>Complete, real-world applications</h2>
<p>From the first book we published in 1974 to the present, all of our books
teach by presenting complete, real-world applications that include design,
code, and all related components. These applications help your trainees get
started quickly and also help them reach new skill levels. As we see it,
studying applications like these is the best way to learn how all of the parts
of an application work together, so this is an essential part of the learning
process.</p>
<h2>Complete instructor's materials</h2>
<p>If you review the instructor's materials that come with the Instructor's CD
for one of our books, you'll see that our CDs provide everything else you need
for an effective course...except the busywork. That's why you should be able to
plan and implement a course that's based on one of our books in record time.
Once that's done, our books and instructional materials will help ensure the
success of your course.</p>
</div>
</body>
</html>
here is the full css
section{
height: 100vh;
vertical-align: middle;
background-color:#f794f2;
}
.section_text {
color:#f7eb94;
font-size:15vh;
display: table-cell;
vertical-align: middle;
font-weight: 700;
text-align: center;
}
.aside {
width: 240px;
float: left;
/*relative to it would move to the side*/
position:relative;
/* background-color:#5bde47; */
}
.image_myself{
margin-left: 25%;
}
.anchor_Send_Email{
margin-left: 25%;
}
.content{
display:inline;
/*relative so it would move to the left*/
position:relative;
}
--------here is where I have the trouble
<div class="aside">
<!--if a move anchor here it works-->
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
<!--here it does not work-->
Send me an email
<form></form>
<h3>Hello! My name is Salvador
Sandoval, I'm a programmer on this website I will show you projects a did
in college, also some of my personal projects and programming concepts I
learn in college. visiting.</h3>
</div>
This is the css the use this part of html
.aside {
width: 240px;
float: left;
/*relative to it would move to the side*/
position:relative;
/* background-color:#5bde47; */
}
.image_myself{
margin-left: 25%;
}
.anchor_Send_Email{
margin-left: 25%;
}
By using position relative on the content and sidebar you were overriding some of the features of float, so the content div was actually over the sidebar even though the contents looked to be positioned correctly. I just removed the position: relative; rules and it seems fine now. To see what was happening, right click and inspect the link in your code and you'll see .content is actually being selected.
section {
height: 100vh;
vertical-align: middle;
background-color: #f794f2;
}
.section_text {
color: #f7eb94;
font-size: 15vh;
display: table-cell;
vertical-align: middle;
font-weight: 700;
text-align: center;
}
.aside {
width: 240px;
float: left;
/* background-color:#5bde47; */
}
.image_myself {
margin-left: 25%;
display: block;
}
.anchor_Send_Email {
margin-left: 25%;
}
.content {
display: inline;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Salvador Portfolio</title>
<link href="index.css" rel="stylesheet">
</head>
<body>
<!--this is for the introduction in portfolio-->
<section>
<div class="section_text">
<h1>Welcome to my portfolio</h1>
</div>
</section>
<!--aside where my info and some nav links-->
<div class="aside">
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
Send me an email
<form></form>
<h3>Hello! My name is Salvador Sandoval, I'm a programmer on this website I will show you projects a did in college, also some of my personal projects and programming concepts I learn in college. visiting.</h3>
</div>
<!--this is where all show explanation & code -->
<div class="content">
<h3>7 reasons why trainers like our books</h3>
<h2>Modular book organization</h2>
<p>In the first section or two of all our books, we present the core content for the book, which includes a complete subset of usable skills. After the core content, each section of the book is designed as an independent module. This means that these
sections don't have to be taught in sequence. As a result, you can customize your courses by assigning just those sections that you want to teach.
</p>
<p>Whenever possible, each of the chapters is also designed as an independent module. When this is true, you can assign just those chapters that are right for your courses. This approach also makes the chapters better for on-the-job reference later on.</p>
<h2>Top-down chapter design</h2>
<p>Unlike many competing books and products, most chapters in our books have a unique top-down design that moves from the simple to complex. This makes it easier for trainees to learn. It also means that you can present the topics at the start of a chapter
to make sure everyone understands the essential details, without presenting all of the topics in a chapter. Then, your trainees can learn the other topics on their own or as they're needed on the job.</p>
<h2>Paired-pages format</h2>
<p>If you page through one of our books, you'll see that all of the information is presented in "paired pages." In each pair, the right page is a figure that contains the syntax, guidelines, and examples, and the left page is text that contains
the perspective and extra explanation.</p>
<p>One benefit of this format is that it lets trainees learn at their own pace. If, for example, you're a novice, you'll probably want to read the text on the left as you refer to the figure on the right. But if you have experience, you may be able to
get all the information you need from the figure. Either way, our customers tell us that they love this presentation method because it helps them learn faster and better.</p>
<h2>Performance on the job</h2>
<p>On-the-job performance is the measure of a successful course. And our paired-pages format makes it easy for your trainees to access all the information you've covered long after the course is over. </p>
<p>Instead of having to dig through the text or handouts, they can use the expanded table of contents or the index to find the topic they're looking for. Then, the figure on the righthand page will give them the details they need to apply what they learned
in your course.</p>
<p>This type of quick reference is absolutely essential when you're working with the hundreds of classes, methods, and properties of an OO language like Java, Visual Basic, or C#...and yet no other books offer this unique format.</p>
<h2>More practice in less time</h2>
<p>The exercises for our books give trainees a chance to get valuable, hands-on experience without wasting any time. That's because we provide the starting code, either from our web site or the Instructor's CD, so that trainees don't have to enter routine
code that they already know.</p>
<p>Sometimes, these exercises guide the trainees through the application of what they've just learned. Sometimes, they challenge the trainees to apply what they've learned in new ways. And you can assign the exercises so your trainees do them in class
or on their own.</p>
<p>Incidentally, unlike other books, <i>our exercises never present new skills
or information</i>. As we see it, this is the only sensible approach to text and exercise design. Curiously, though, the exercises in some books do present new skills. Unfortunately, this means that (1) trainees who don't do the exercises
don't learn the new skills, and (2) there's no easy way for trainees to find the information they need if they're having trouble since the skills haven't been covered yet.</p>
<h2>Complete, real-world applications</h2>
<p>From the first book we published in 1974 to the present, all of our books teach by presenting complete, real-world applications that include design, code, and all related components. These applications help your trainees get started quickly and also
help them reach new skill levels. As we see it, studying applications like these is the best way to learn how all of the parts of an application work together, so this is an essential part of the learning process.
</p>
<h2>Complete instructor's materials</h2>
<p>If you review the instructor's materials that come with the Instructor's CD for one of our books, you'll see that our CDs provide everything else you need for an effective course...except the busywork. That's why you should be able to plan and implement
a course that's based on one of our books in record time. Once that's done, our books and instructional materials will help ensure the success of your course.</p>
</div>
</body>
</html>
I have created a page of text and nested it within a container div. All was fine until I added a couple of divs labelled 'left-column and 'right-column'. Now the text is no-longer nested inside the container div as I expected, but is instead displayed at the bottom, below what should be the containing div.
I tried changing the divs to spans but the same thing keeps happening. I looked over the code and from everything I can tell these sections should be nested, but they are not.
The code:
index.html.erb
<div class="container">
<h1>Fanfic/Poetry</h1>
<h2>Fanfic and poetry about or related to Alisa Esage Shevchenko</h2>
<h3>Whichever contact details you're using for us and whatever email you're sending to PLEASE be respectful! Some sexual content sure, we're all human beings and publication will be considered on a case by case basis, but nothing sick or gross! Or particularly, nothing harmful. We won't put it up so there's no point sending it. So far out of the works I've had sent in the general quality and level of dialogue is <em>not at all</em> close to expectations -- only two came anywhere near the mark in terms of tone and quality, and one needed extensive cleaning and editing. So <em>up</em> the standard! THANK YOU!</h3>
<span class="left-column">
<h2>Poetry</h2>
<h4><strong>Alisa Shevchenko Hacked My Computer</strong> by <em>AnonHacker3</em></h4>
<p>Last night I hacked your computer.<br>
Well, when I said "I" I actually mean you,<br>
but I'm pretending the other way around<br>
because it confuses the security protocols.<br></p>
<p>At first you were writing a function in C++<br>
I think, and it was actually pretty fun<br>
to see someone so obviously naive<br>
still thinking like they're going to be<br></p>
<p>some sort of secret agent or something<br>
on the cover of the Guardian,<br>
or Forbes magazine. But anyway,<br>
I'm pretty sure you shouldn't have<br></p>
<p>registered alisaesage.com<br>
as a domain name if you weren't willing<br>
to take a little heat from a girl<br>
hopping onto your Ubuntu core<br></p>
<p>via a little known, though much publicised<br>
single kernel function hook,<br>
and leaving you a message, coz you were<br>
for some fucking ridiculous reason<br></p>
<p>CODING THE THING IN FUCKING<br>
RUBY ON RAILS VERSION 4!<br>
Like what the actual fuck, so I wrote<br>
"nuhuh" on your command line<br></p>
<p>and pretty much left you to it.</p>
<h4><strong>I Bet Alisa Shevchenko's Mouth Tastes Nice</strong> by <em>A Pirate Giraffe</em></h4>
<p>I was watching Blade Runner last night,<br>
As well as Ghost in the Shell,<br>
Which totally made me think of hot spies<br>
With robot bodies hacking computers.<br>
So I thought about touching Alisa Shevchenko<br></p>
<p>In her *mouth*, with my fingers,<br>
And how it feels<br>
Inside her body<br>
As she moves about just<br>
As slowly as she wants to<br>
Over my fingers, how she'll taste...<br>
When I put my fingers in my own mouth after.<br></p>
<h4><strong>Timelines</strong> by <em>Gray Lizard 564</em></h4>
<p>The thought of you laying<br>
your body bridged just a little<br>
toward the small of your back<br>
at the quivering soft tip of your breast<br>
the question: is this mine<br>
to touch, by this point<br>
has been answered<br></p>
<p>in the positive future timeline<br>
where I am lain just above<br>
the feel of my tongue lingering<br>
at this, the point of most possibility.<br></p>
</span>
<span class="right-column">
<h2>Fanfic</h2>
<h4><strong>The Curious Case of Alisa Shevchenko</strong>: Sherlock Holmes and AeS crossover by <em>andcarpenoctem</em></h4>
<p>"I have never made a secret of my distaste for forks" said Sherlock, with a complex sort of smile.</p>
<p>"What in the hells are you talking about Holmes?" said Watson, in an uncouth way.</p>
<p>"I'm talking about forks, Watson," Sherlock lied, "and the quote is from Hemingway. Though ghost-written, I believe."</p>
<p>"Oh," said Watson. "Then I suppose it's probably a good quote."</p>
<p>"Oh certainly," said Holmes. "A very good quote indeed. One of the finest in the English language."</p>
<p>Holmes tapped out the contents of his pipe into his hand and then poured the ash into Watson's upward facing palm. Watson looked at him, aghast. Holmes continued,</p>
<p>"You mean Alisa Esage" Watson said with a look of a proud dog who's just finished pooing. Holmes ignored the smell.</p>
<p>"Now, if you'll excuse me I really need to talk about Alisa Shevchenko."</p>
<p>"The Russian spy?"</p>
<p>Sherlock gave Watson a look of loving disdain.</p>
<p>"Yes yes, whatever you say Watson. The problem is I'm not entirely sure if the person who runs her Twitter account really is her anymore. And we need to find out where she is."</p>
<p>"I see." replied Watson. "How will we do that? I suppose I could put out a trace on her IP address and maybe set her webcam to switch on remotely..."</p>
<p>"Oh, no Watson." Said Holmes. "That won't work at all. We'll need to start with her grammar."</p>
<p>"Or," continued Watson, deep in thought, "we could go onto her Instagram and cross-reference any new pictures with one of those location triangulators they have at the MET. The ones that use the image information to figure out weather, air pressure, things like that."</p>
<p>"Nope. Because I got most of London banned from her Instragram."</p>
<p>"How did you manage that, Holmes?"</p>
<p>"Quite simple really, I tried to install her as head of Шалтай Болтай."</p>
<p>"Humpty Dumpty?" said Watson, instinctively translating the Russia outloud.</p>
<p>Holmes paused a little while to let the information sink in.</p>
<p>"Yes, quite."</p>
<p>"Pardon?"</p>
<p>"I have a flight booked to Twitter HQ and we have to be there in and hour, so you're coming with me."</p>
<p>"Shaltai Boltai, are you certain?"</p>
<p>"Yes."</p>
<p>"Then I suppose I am. Coming with you, I mean. Yes, I suppose I am."</p>
</span>
</div>
default.css
.container {
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
border: 10px solid black;
background-color: #CB0E0E;
}
a {
color: lightgrey;
}
p {
font-family: Arial;
}
.left-column {
float: left;
width: 45%;
}
.right-column {
float: right;
width: 45%;
}
I know this isn't very MCV but since I can't locate the source of the issue at present, I've just included everything that seems like it might be relevant. Again, I would like all text to be nested within the .container div if poss. Probably something simple I'm looking straight past? Thanks :).
From looking like your code, it looks like this is a css-floating issue and not directly related to rails. With your left and right float within the unfloated container div, you have issues with positioning. The quickest solution is to include a clear:both inside the container div.
Here's an example of how I would format the html to fix the problem.
<style>
div.container {
padding-left: 25px;
padding-right: 25px;
padding-bottom: 25px;
border: 10px solid black;
background-color: #CB0E0E;
}
a {
color: lightgrey;
}
p {
font-family: Arial;
}
div.left-column {
float: left;
width: 45%;
}
div.right-column {
float: right;
width: 45%;
}
div.position_fix {
clear:both;
}
</style>
<div class="container">
<h1>Fanfic/Poetry</h1>
<h2>Fanfic and poetry about or related to Alisa Esage Shevchenko</h2>
<h3>Whichever contact details you're using for us and whatever email you're sending to PLEASE be respectful! Some sexual content sure, we're all human beings and publication will be considered on a case by case basis, but nothing sick or gross! Or particularly, nothing harmful. We won't put it up so there's no point sending it. So far out of the works I've had sent in the general quality and level of dialogue is <em>not at all</em> close to expectations -- only two came anywhere near the mark in terms of tone and quality, and one needed extensive cleaning and editing. So <em>up</em> the standard! THANK YOU!</h3>
<div class="left-column">
<h2>Poetry</h2>
<h4><strong>Alisa Shevchenko Hacked My Computer</strong> by <em>AnonHacker3</em></h4>
<p>Last night I hacked your computer.<br>
Well, when I said "I" I actually mean you,<br>
but I'm pretending the other way around<br>
because it confuses the security protocols.<br></p>
<p>At first you were writing a function in C++<br>
I think, and it was actually pretty fun<br>
to see someone so obviously naive<br>
still thinking like they're going to be<br></p>
<p>some sort of secret agent or something<br>
on the cover of the Guardian,<br>
or Forbes magazine. But anyway,<br>
I'm pretty sure you shouldn't have<br></p>
<p>registered alisaesage.com<br>
as a domain name if you weren't willing<br>
to take a little heat from a girl<br>
hopping onto your Ubuntu core<br></p>
<p>via a little known, though much publicised<br>
single kernel function hook,<br>
and leaving you a message, coz you were<br>
for some fucking ridiculous reason<br></p>
<p>CODING THE THING IN FUCKING<br>
RUBY ON RAILS VERSION 4!<br>
Like what the actual fuck, so I wrote<br>
"nuhuh" on your command line<br></p>
<p>and pretty much left you to it.</p>
<h4><strong>I Bet Alisa Shevchenko's Mouth Tastes Nice</strong> by <em>A Pirate Giraffe</em></h4>
<p>I was watching Blade Runner last night,<br>
As well as Ghost in the Shell,<br>
Which totally made me think of hot spies<br>
With robot bodies hacking computers.<br>
So I thought about touching Alisa Shevchenko<br></p>
<p>In her *mouth*, with my fingers,<br>
And how it feels<br>
Inside her body<br>
As she moves about just<br>
As slowly as she wants to<br>
Over my fingers, how she'll taste...<br>
When I put my fingers in my own mouth after.<br></p>
<h4><strong>Timelines</strong> by <em>Gray Lizard 564</em></h4>
<p>The thought of you laying<br>
your body bridged just a little<br>
toward the small of your back<br>
at the quivering soft tip of your breast<br>
the question: is this mine<br>
to touch, by this point<br>
has been answered<br></p>
<p>in the positive future timeline<br>
where I am lain just above<br>
the feel of my tongue lingering<br>
at this, the point of most possibility.<br></p>
</div>
<div class="right-column">
<h2>Fanfic</h2>
<h4><strong>The Curious Case of Alisa Shevchenko</strong>: Sherlock Holmes and AeS crossover by <em>andcarpenoctem</em></h4>
<p>"I have never made a secret of my distaste for forks" said Sherlock, with a complex sort of smile.</p>
<p>"What in the hells are you talking about Holmes?" said Watson, in an uncouth way.</p>
<p>"I'm talking about forks, Watson," Sherlock lied, "and the quote is from Hemingway. Though ghost-written, I believe."</p>
<p>"Oh," said Watson. "Then I suppose it's probably a good quote."</p>
<p>"Oh certainly," said Holmes. "A very good quote indeed. One of the finest in the English language."</p>
<p>Holmes tapped out the contents of his pipe into his hand and then poured the ash into Watson's upward facing palm. Watson looked at him, aghast. Holmes continued,</p>
<p>"You mean Alisa Esage" Watson said with a look of a proud dog who's just finished pooing. Holmes ignored the smell.</p>
<p>"Now, if you'll excuse me I really need to talk about Alisa Shevchenko."</p>
<p>"The Russian spy?"</p>
<p>Sherlock gave Watson a look of loving disdain.</p>
<p>"Yes yes, whatever you say Watson. The problem is I'm not entirely sure if the person who runs her Twitter account really is her anymore. And we need to find out where she is."</p>
<p>"I see." replied Watson. "How will we do that? I suppose I could put out a trace on her IP address and maybe set her webcam to switch on remotely..."</p>
<p>"Oh, no Watson." Said Holmes. "That won't work at all. We'll need to start with her grammar."</p>
<p>"Or," continued Watson, deep in thought, "we could go onto her Instagram and cross-reference any new pictures with one of those location triangulators they have at the MET. The ones that use the image information to figure out weather, air pressure, things like that."</p>
<p>"Nope. Because I got most of London banned from her Instragram."</p>
<p>"How did you manage that, Holmes?"</p>
<p>"Quite simple really, I tried to install her as head of ?????? ??????."</p>
<p>"Humpty Dumpty?" said Watson, instinctively translating the Russia outloud.</p>
<p>Holmes paused a little while to let the information sink in.</p>
<p>"Yes, quite."</p>
<p>"Pardon?"</p>
<p>"I have a flight booked to Twitter HQ and we have to be there in and hour, so you're coming with me."</p>
<p>"Shaltai Boltai, are you certain?"</p>
<p>"Yes."</p>
<p>"Then I suppose I am. Coming with you, I mean. Yes, I suppose I am."</p>
</div>
<div class="position_fix"></div>
</div>
Note, the clear:both is on the 'position_fix' div just above the end of the container.
There are much better "clearfix" solutions to the problem that floating elements do not affect the height of the parent element.
.clearfix:after {
content: "";
display: table;
clear: both;
}
.container {
border: 1px gray dotted;
}
.left, .right {
width: 49%;
}
.left {
background-color: red;
height: 200px;
float: left;
}
.right {
background-color: blue;
height: 150px;
float: right;
}
<div class="container clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
This pure CSS solution uses a psuedo element to force a new rendering context - this makes the element adjust its height after the children. Littering your markup with a bunch of empty <div> tags has been obsolete for many years.