Applying style to an id'd <p> element - html

Hi all I'm trying to style the large bit of <p> code in this html
<section id="about">
<div class="container-fluid post-1">
<div class="row">
<h1 class="text-center">Welcome to our Dance-O-Thon for 2016!</h1>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p>Carolyn Glover</p>
<p id="1">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
o Come to raise more funds for ovarian cancer research
o Come if you have ovarian cancer, or wish to support someone who does
o Come if you wish to know more about the disease
o Come to celebrate life!
</p>
But I can't seem to target just the one with the id="1". I've tried
#about p #1 {
font-size: 1.3rem;
}
#about p {
font-size: 1.3rem;
}
#about #1 p {
font-size: 1.3rem;
}

Remove the spacing between p tag and your id name like this. There can not be any space between the tag name and id/class name if the id/class is defined in the specific tag.
#about p#1 {
font-size: 1.3rem;
}
Two suggestions from my side -
Using integer as id is not convenient. Try at least appending a string with it. Like p1 or para1.
As it is an id, it is unique in the whole html document already. You don't need #about p#1, only #1 would have been enough

Just
#1 {
font-size: 1.3rem;
}
Is enough, since if you're doing it correctly there should be only 1 element with the id 1. Or if you need to increase the strength of your style (usually not needed) use
p#1 {
font-size: 1.3rem;
}

This is enough:
#1 {
font-size: 1.3rem;
}

you can try this one:
#about p#1 {
font-size: 1.3rem;
}
#about p {
font-size: 1.3rem;
}
#about #1 p {
font-size: 1.3rem;
}
DEMO HERE

You may just use this:
#1 {
font-size: 1.3rem;
}

As mentioned in my comment, CSS identifiers cannot start with a digit.
According to the W3 CSS specification:
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit...
Even the syntax is correct but because it is a digit identifier, it doesn't apply.
See code snippet:
p#1 {
font-size: 1.3rem;
}
p#one {
font-size: 1.3rem;
}
<div class="container-fluid post-1">
<div class="row">
<h1 class="text-center">Welcome to our Dance-O-Thon for 2016</h1>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p id="1">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
o Come to raise more funds for ovarian cancer research
o Come if you have ovarian cancer, or wish to support someone who does
o Come if you wish to know more about the disease
o Come to celebrate life!
</p>
<p id="one">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
o Come to raise more funds for ovarian cancer research
o Come if you have ovarian cancer, or wish to support someone who does
o Come if you wish to know more about the disease
o Come to celebrate life!
</p>
</div>
</div>
</div>

Related

Whitespace when Resizing Image based on Window Using Only CSS

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.

Positioning columns/text paragraphs?

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">&nbsp 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">&nbsp 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">&nbsp 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>

Why is this html/css/rails template not nesting properly?

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.

How to wrap the contents around an image?

I am trying to create an about page for a personal website. I am wondering how to wrap the text around the picture. I want this kind of effect. http://alexbudak.com/about/
The code I have right now is:
<div class="about_content">
<img src="placeholder.jpg" alt="">
<h2>The Brand</h2>
</p>
The Tailory New York is an appointment only custom clothing company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
</p>
<h2>The Concept </h2>
<p>
Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
</p>
<h2>A Note From the Founder</h2>
<p>
The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
<br> </br>
Sincerely,</br>
Shao Yang, Founder
<br> </br>
</p>
</div>
and the css is:
h2{
margin: 0 0 1.2em 0;
font-family: 'Raleway', 'sans-serif';
font-weight: normal;
}
.about_content{
width: 500px;
overflow: hidden;
}
.about_content img{
margin-right: 15px;
float: left;
}
.about_content p: last-child{
margin-bottom: 0;
}
What you have now will cause the content to wrap around the image. The trick to doing this is applying float: left; to the image, which you have already done.
What I'm suspecting is happening is your image is too wide. If it's 500px or wider, the image will take up the entire width of .about_content, so you need to limit the size of the image. Here's an example utilizing max-width on the image.
h2{
margin: 0 0 1.2em 0;
font-family: 'Raleway', 'sans-serif';
font-weight: normal;
}
.about_content{
width: 500px;
overflow: hidden;
}
.about_content img{
margin-right: 15px;
float: left;
max-width: 250px;
}
.about_content p: last-child{
margin-bottom: 0;
}
<div class="about_content">
<img src="https://static1.squarespace.com/static/541ff355e4b03f1e8815bc58/t/54b43e30e4b0ad2aad39a7f2/1421098552235/budak?format=500w" alt="">
<h2>The Brand</h2>
</p>
The Tailory New York is an appointment only custom clothing company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
</p>
<h2>The Concept </h2>
<p>
Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
</p>
<h2>A Note From the Founder</h2>
<p>
The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
<br> </br>
Sincerely,</br>
Shao Yang, Founder
<br> </br>
</p>
</div>

Blank line added at top of first CSS multi-column

I'm using CSS columns, but seem to have an issue where the beginning of the text has an extra space at the top, making the subsequent second and third columns appear higher than the first column.
I thought I had it all pretty basic. I did already try removing the margin-bottom for the h2, but that didn't seem to affect the columns. So I put the h2 into its own div, but that also didn't affect them. Oddly, it looks fine in DreamWeaver, just not when live on the server.
It seems to do this in Safari, FireFox, and Opera. I do not have Chrome or IE.
Here is the link to the site so you can see it: www.jordanmiller.newbedesign.com/coast/academics.html
Below is the CSS that is used with the columns:
h2 {
font-weight: 300;
margin-bottom: -.5%;
font-color: #003;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
div.text {
margin: 2% auto;
max-width: 900px;
}
div.texthead {
margin: 0 auto;
}
div.col {
-webkit-column-count: 3;
-webkit-column-gap: 1%; /* Saf3, Chrome*/
-moz-column-count: 3;
-moz-column-gap: 1%; /* FF3.5+ */
column-count: 3;
column-gap: 1%; /* Opera 11+*/
text-align: left;
}
And below here is the HTML for the content:
<div class="texthead">
<h2>Academics: Not Just Books</h2>
</div>
<div class="text">
<div class="col"><p>Coast Middle School is a community of active learners working in concert for the development of individual success and self-esteem. It employs a comprehensive curriculum that seeks to develop the whole child--intellectually, physically, spiritually, socially, aesthetically, and emotionally. Teachers and students in Coast Middle School hold themselves and each other to the highest expectations. The Middle School academically challenges its students in foreign language, math, social studies, language arts, and science, while at the same nurturing emotional and creative development through our acclaimed fine arts and athletic programs.</p>
<p>Coast Middle School is developmentally responsive to the needs of its students. The Middle School provides the students with teachers and specialized professionals who are readily available to offer the assistance students need in negotiating their lives, both in and out of school. As a complement to their academic classes, students discuss issues relevant to their lives through our comprehensive character education and guidance curriculum. The student-led vestry program allows the students to develop a sense of leadership and responsibility as they aid the chaplain in the development of chapel messages.</p>
<p>Coast Middle School seeks to conceptualize and promote the healthy growth of young adolescents as ethical citizens and increasingly competent, self-sufficient young people who are optimistic about the future. To achieve these goals the Middle School is structured on a team concept. Each grade level is split into two teams--blue and white, representing our school colors--consisting of four academic core classes. Coast Middle School believes academic success and personal growth increase markedly when young adolescents' affective needs are met. Therefore, all adults in the Middle School are advocates, advisors, and mentors for each student. Each team works together on service-learning activities and experiential learning opportunities.</p>
<p>Coast Middle School feels strongly that the most successful learning strategies are ones that involve each student personally. Therefore, we offer after-school tutorials so students can get personalized help with homework or as preparation for a test or quiz. Other after-school possibilities include intramurals, clubs, and an Extended Day Program, which runs until 6:00 p.m. Students are also encouraged to participate on school athletic teams. Students in both grades can participate in drama performances.</p>
<p>Coast Middle School is also actively invested in the impact media and digital activities have on our students’ lives. Students in both grades participate in a Digital Citizenship curriculum provided by Common Sense Media, which encourages them to be safe, responsible, and savvy citizens of the digital world.</p>
<p><strong>Seventh Grade:</strong> While enjoying a similar daily schedule in seventh grade, the students make a choice from four languages (Chinese, French, Latin, or Spanish) for daily study. Additionally they choose one elective (see course descriptions). The seventh grade takes a class trip to Washington, D.C. Each of the three sports seasons includes at least one no-cut sport.</p>
<p><strong>Eighth Grade:</strong> The daily class schedule includes civics, physical science, algebra or geometry, and English. Interdisciplinary activities include Mock Congress and a social issues research project. All classes emphasize critical and creative thinking. The focus of this grade is leadership training and service learning, as well as preparation to move successfully into the Upper School. The eighth grade travels to New York City in the spring.</p>
<p>Students in both grades have a morning fruit break and break for a brief recess to socialize and develop friendships that are vital in the development of a young adolescent. Band, chorus, and orchestra are offered in bith grades, along with visual and theater arts opportunities.</p>
</div>
I think adding this to your css solves the problem:
div.col p{
margin-top:0px;
}

Categories