How to place a text next to an image? - html

I'm trying to place the text that's currently below the picture next to the image but I can't seem to figure it out. I tried a bunch of things but it screwed it up. I'm pretty sure this is an easy fix but I'm a noob. :D
http://jsfiddle.net/NmUaX/5/
HTML
<li class="post" >
<article class="in-column" style="height:300px;"> <p class="article-title" style="font-size:20px; padding-bottom:10px;">Grumpy Cat</p><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0"; height="200" width="300">
<p class="excerpt" style="float:left;">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. <b>[READ MORE]</b></p>
<p class="excerpt">Born: April 4, 2012, Morristown, AZ</p>
</article>
</li>
</section>
</section>
CSS
article.in-column {
border-bottom: 1px solid #dddddd;
text-align: left;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
}
article.in-column .excerpt {
color: #2f2f2f;
font-size: 11px;
margin: 0px;
padding-bottom: 5px;
}
p.article-title{
line-height: 19px;
margin: 5px 0px;
color: #151515;
font-weight:bold;
font-size:16px;
}

Use style="float:left;" on your image, not on your text.
Also, remove the stray semicolon in your img tag.
As shown here:
<img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0"; height="200" width="300">
JSFiddle

I think you need something like this:
<ul style="list-style:none; width:700px">
<li style="float:left; margin:5px;width:310px;">
<ul style="list-style:none">
<li>
<span style="font-size:20px; padding-bottom:10px;">Grumpy Cat</span>
</li>
<li>
<a href="http://yahoo.com" style="float:left;margin-right:5px">
</li>
<li style="float:left;width:380px;">
<ul style="list-style:none">
<li>
<span style="font-weight:700" >Born: April 4, 2012, Morristown, AZ</span>
</li>
<li>
Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. <b>[READ MORE]</b>
</li>
</ul>
</li>
</ul>
see http://jsfiddle.net/NmUaX/15/

Related

Removing space between heading and div

this part has been bothering me for half an hour, and I dont know how to solve. So, how do I remove the lightgrey space between heading and div? Should I be using margin and padding to do it?
Below is my code:
<!-- Description -->
<h3 style="background-color:white; font-size:20px;">
Within three years, production area had more than tripled to meet growing demands. The year
1999 marked the completion of our current plant of 65,000
square feet, fully equipped with state-of-the-art technology, as well as the start of our
Surface Mount Technology process. Implementation of new
lead-free production lines began in early 2003. Our success is the result of the joint-efforts
of our innovative and quality-focused engineering team,
whose expertise range from design to debugging, and the dedication of the rest of our staff.
</h3>
<!-- ------------------------------ -->
<div style="width: 100%; display: table;margin:0px; padding:0px; background-color:#D6EAF8 ">
<div style="display: table-row">
<!-- ------------------------------------------------------------------ -->
<!-- Why Us -->
<div style="margin:0px; padding:0px; display: table-cell">
<h3 style="padding-left:620px">Why Us?</h3>
<ul style="padding-left:640px">
<li><a href="http://www.scope.com.my/2014/SMSB2014/qpolicy.htm" style="background-
color:#D6EAF8 ; color:black">Policy</a></li>
<li><a href="http://www.scope.com.my/2014/SMSB2014/manufacturing_capability.htm"
style="background-color:#D6EAF8 ; color:black">Capability</a></li>
<li><a href="https://www.scope.com.my/career.html" style="background-color:#D6EAF8 ;
color:black">Careers</a></li>
</ul>
</div>
<!-- Follow Us -->
<div style="margin:0px; padding:0px; display: table-cell">
<h3 style="padding-right:500px">Follow Us</h3>
<ul style="padding-left:20px">
<li><a href="https://www.facebook.com/pages/SCOPE-Manufacturers-M-Sdn-Bhd/304477286279886"
style="background-color:#D6EAF8 ; color:black">
<img src="icon1.jpg" alt=""> Facebook</a></li>
<li><img src="icon2.jpg" alt=""> Twitter</li>
<li><img src="icon3.jpg" alt=""> Linkedin</li>
</ul>
</div>
<!-- ------------------------------------------------------------------- -->
</div>
</div>
It's margin-bottom of h3, make it as h3 {margin-bottom: 0}
you should remove margin bottom: h3
<h3 style="background-color:white; font-size:20px;margin-bottom:0;">
All you really need is to apply margin-bottom:0; to the first h3:
<h3 style="background-color:white; font-size:20px; margin-bottom:0;">
Although, I'd like to offer you a solution without so much inline-CSS as well. Read more on What's so bad about in-line CSS?.
I've effectively moved duplicate styling into classes and included some id's to define your styling. All styling is included in pure CSS and could be included as an external style sheet.
See the JSFiddle
.h3_Summary {
background-color: white;
font-size: 20px;
margin-bottom: 0;
}
.div_outer {
width: 100%;
display: table;
margin: 0px;
padding: 0px;
background-color: #D6EAF8;
}
.div_inner {
display: table-row;
}
.div_container {
margin: 0px;
padding: 0px;
display: table-cell;
}
#h3_whyUs {
padding-left: 620px;
}
.ul_first {
padding-left: 640px;
}
ul li a {
background-color: #D6EAF8;
color: black;
}
#h3_followUs {
padding-right: 500px;
}
.ul_second {
padding-left: 20px;
}
<!-- Description -->
<h3 class="h3_Summary">
Within three years, production area had more than tripled to meet growing demands. The year
1999 marked the completion of our current plant of 65,000
square feet, fully equipped with state-of-the-art technology, as well as the start of our
Surface Mount Technology process. Implementation of new
lead-free production lines began in early 2003. Our success is the result of the joint-efforts
of our innovative and quality-focused engineering team,
whose expertise range from design to debugging, and the dedication of the rest of our staff.
</h3>
<!-- ------------------------------ -->
<div class="div_outer">
<div class="div_inner">
<!-- ------------------------------------------------------------------ -->
<!-- Why Us -->
<div class="div_container">
<h3 id="h3_whyUs">Why Us?</h3>
<ul class="ul_first">
<li>Policy</li>
<li>Capability</li>
<li>Careers</li>
</ul>
</div>
<!-- Follow Us -->
<div class="div_container">
<h3 id="h3_followUs">Follow Us</h3>
<ul class="ul_second">
<li><a href="https://www.facebook.com/pages/SCOPE-Manufacturers-M-Sdn-Bhd/304477286279886">
<img src="icon1.jpg" alt=""> Facebook</a></li>
<li><img src="icon2.jpg" alt=""> Twitter</li>
<li><img src="icon3.jpg" alt=""> Linkedin</li>
</ul>
</div>
<!-- ------------------------------------------------------------------- -->
</div>
</div>
Let me know if you want any clarification! Goodluck with it! :)
Add following css lines to your style sheet.
h3 { margin-bottom: 0; }

Why doesnt my custom font load even though works in local?

Im trying to use a Raleway font family for my heading in my website. In local testing it works fine but when pushed to git and run on git pages it doesnt work. I have even specified the text font TTF file in directory but still doesnt work. What am I doing wrong?
The website
https://codesniper99.github.io/Portfolio/
my html index file
<!DOCTYPE html>
<!-- copyright akhil vaid if anybody copies this my code is here so good luck 2017UCO1521 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body style="color:black"></body>
<div class="container text-pri" style="font-family:Open-sans; padding: 0%;margin-right: 0%; ">
<!-- Header -->
<div class="parallax">
<span class="topbar" > ABOUT</span>
<span class="topbar" > SKILLS</span>
<span class="topbar" > EXPERIENCE</span>
<span class="topbar" > ACHIEVEMENTS</span>
<span class="topbar" > CONTACT ME</span>
<span class="center rcorners2 " style="font-family:Raleway ;font-size: 4.0em;">
<span style="color: #E04343;">A</span><span >KHIL</span>
<span style="color: #FFE800;">V</span><span>AID</span>
</span>
</div>
<!-- Introduction -->
<div class="intro rcorners1">
<h3 style="text-align: center;">ABOUT ME</h3><br>
<p>
I'm a second year Under-graduate student currently pursuing Computer Science and Engineering at
NSIT, New Delhi, India. I'm new to the industry and keen to expand my skill set.<br> <br> I have a curiosity in
the field of Web Development and Competitive Programming and using it to solve real world
problems and am willing to take up opportunities to delve into it.
<br>
<br>
</p>
</div>
<!-- Skills -->
<h5><b>
Skills and Technologies
</b>
</h5>
<ul>
<li>C++ (GNU 14.2), C
</li>
<br>
<li>
Java
</li>
<br>
<li>
Python 3.1
</li>
<br>
<li>
HTML (HTML -5, Canvas)
</li>
<br>
<li>
CSS3 (Boot-Strap, Materialize CSS Frameworks)
</li>
<br>
<li>
JavaScript (Learning)
</li>
<br>
<li>
ExpressJS (Learning)
</li><br>
<li>
Experience with Django Framework
</li><br>
<li>
Knowledge of Git and VCS
</li><br>
</ul>
<br>
<!-- Experience -->
<h5><b>
Experience
</b>
</h5>
<p>
<ul>
<li> Currently working as Lead Back-end Developer at ICTS (IntuiComp TeraScience) under
guidance of IIT-Delhi and Dr. Arpan Kar. Developing a Learning Management system for
machine learning students and professionals alike to take part in and avail lectures and
conduct hackathons globally. Has been successfully launched in Afghanistan, Hong-Kong,
France. [www.icts-learninganalytics.com] (2018-present)
</li>
<br>
<li>
Working as Lead-developer for a trading firm in creating proprietary software using MQL4
on MT4 and Uniglobe platform(2017-present)
</li>
<br>
<li>
Created RESTful API and website for an Android application focusing on decreasing Smoking
Addiction in individuals by positive reinforcement. It used Django framework and we created
our own local server.
</li>
<br>
<li>
Made a working Hospital-Management DBMS (Database Management system) for 3rd
Semester project. It was created using JDBC in Netbeans IDE.
</li>
<br>
<li>
Made an Android application to maintain attendance for college students. Developed in
native android
</li>
<br>
<li>
Came in top 100 teams in SE- Asia region in ACM-ICPC online qualifier round.
</li>
</ul>
</p>
<!-- Academics -->
<h5><b>
Academic Achievements
</b>
</h5>
<ul>
<li>Qualified for ACM-ICPC Regionals 2018-19 at IIT Kharagpur and Kanpur
</li>
<br>
<li>
Secured AIR- 2412 rank in JEE Mains.
</li>
<br>
<li>
Top 10% of College Department (COE)
</li>
<br>
<li>
Top 10% in CBSE class 12th result
</li>
<br>
<li>
10 CGPA in class 10th
</li>
<br>
<li>
Secured and qualified as a JSTSE scholar from State of New Delhi
</li>
</ul>
</div>
</body>
</html>
my main.css
.intro
{
background-color: #f5d7f8;
margin-left: 64px;
margin-right: 64px;
font-size: 23px;
margin-top: 50px;
padding-left: 64px;
padding-right: 64px;
padding-bottom: 30px;
padding-top:35px;
}
.rcorners1 {
border-radius: 25px;
padding: 20px;
}
.rcorners2 {
border-radius: 12px;
padding: 15px;
}
#font-face { font-family: Raleway; src: url('text/Raleway/Raleway-Light.TTF'); }
#font-face { font-family: Open-sans; src: url('text/open-sans/OpenSans-Regular.TTF'); }
.parallax {
background-image: url("images/laptop.jpg"); opacity: 0.75;
min-height: 650px;
background-attachment: fixed;
background-position: center;
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: cover;
}
.text-pri{
background-color:whitesmoke;
}
body {
margin: 0 !important;
padding: 0 !important;
}
.center {
position: absolute;
left:30%;
top: 40%;
width: 40%;
min-width: 300px;
text-align: center;
background-color: black;
color: white;
opacity: 0.85;
font-size: 48px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.topbar{
color:white;position: relative;
padding-top: 30px;
margin-top:30px;
margin-left:30px;
font-size: 20px;
}
my git repo if needed
https://github.com/codesniper99/Portfolio
use Raleway google font I have import Raleway font into css so you not need to call from anywhere. and use this as font-family: 'Raleway', sans-serif;
Online font using is good for your site.
also use font-wight css for making font bold light as font-weight:200 , font-weight:300 , font-weight:600 same as imported css.
#import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
.intro
{
background-color: #f5d7f8;
margin-left: 64px;
margin-right: 64px;
font-size: 23px;
margin-top: 50px;
padding-left: 64px;
padding-right: 64px;
padding-bottom: 30px;
padding-top:35px;
}
.rcorners1 {
border-radius: 25px;
padding: 20px;
}
.rcorners2 {
border-radius: 12px;
padding: 15px;
}
/* #font-face { font-family: Raleway; src: url('text/Raleway/Raleway-Light.TTF'); }
#font-face { font-family: Open-sans; src: url('text/open-sans/OpenSans-Regular.TTF'); } */
.parallax {
background-image: url("https://codesniper99.github.io/Portfolio/images/laptop.jpg"); opacity: 0.75;
min-height: 650px;
background-attachment: fixed;
background-position: center;
width:100%;
height:100%;
background-repeat: no-repeat;
background-size: cover;
}
.text-pri{
background-color:whitesmoke;
}
body {
margin: 0 !important;
padding: 0 !important;
}
.center {
position: absolute;
left:30%;
top: 40%;
width: 40%;
min-width: 300px;
text-align: center;
background-color: black;
color: white;
opacity: 0.85;
font-size: 48px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.topbar{
color:white;position: relative;
padding-top: 30px;
margin-top:30px;
margin-left:30px;
font-size: 20px;
}
<!DOCTYPE html>
<!-- copyright akhil vaid if anybody copies this my code is here so good luck 2017UCO1521 -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body style="color:black"></body>
<div class="container text-pri" style="font-family:Open-sans; padding: 0%;margin-right: 0%; ">
<!-- Header -->
<div class="parallax">
<span class="topbar" > ABOUT</span>
<span class="topbar" > SKILLS</span>
<span class="topbar" > EXPERIENCE</span>
<span class="topbar" > ACHIEVEMENTS</span>
<span class="topbar" > CONTACT ME</span>
<span class="center rcorners2 " style="font-family: 'Raleway', sans-serif;font-size: 4.0em;">
<span style="color: #E04343;">A</span><span >KHIL</span>
<span style="color: #FFE800;">V</span><span>AID</span>
</span>
</div>
<!-- Introduction -->
<div class="intro rcorners1">
<h3 style="text-align: center;">ABOUT ME</h3><br>
<p>
I'm a second year Under-graduate student currently pursuing Computer Science and Engineering at
NSIT, New Delhi, India. I'm new to the industry and keen to expand my skill set.<br> <br> I have a curiosity in
the field of Web Development and Competitive Programming and using it to solve real world
problems and am willing to take up opportunities to delve into it.
<br>
<br>
</p>
</div>
<!-- Skills -->
<h5><b>
Skills and Technologies
</b>
</h5>
<ul>
<li>C++ (GNU 14.2), C
</li>
<br>
<li>
Java
</li>
<br>
<li>
Python 3.1
</li>
<br>
<li>
HTML (HTML -5, Canvas)
</li>
<br>
<li>
CSS3 (Boot-Strap, Materialize CSS Frameworks)
</li>
<br>
<li>
JavaScript (Learning)
</li>
<br>
<li>
ExpressJS (Learning)
</li><br>
<li>
Experience with Django Framework
</li><br>
<li>
Knowledge of Git and VCS
</li><br>
</ul>
<br>
<!-- Experience -->
<h5><b>
Experience
</b>
</h5>
<p>
<ul>
<li> Currently working as Lead Back-end Developer at ICTS (IntuiComp TeraScience) under
guidance of IIT-Delhi and Dr. Arpan Kar. Developing a Learning Management system for
machine learning students and professionals alike to take part in and avail lectures and
conduct hackathons globally. Has been successfully launched in Afghanistan, Hong-Kong,
France. [www.icts-learninganalytics.com] (2018-present)
</li>
<br>
<li>
Working as Lead-developer for a trading firm in creating proprietary software using MQL4
on MT4 and Uniglobe platform(2017-present)
</li>
<br>
<li>
Created RESTful API and website for an Android application focusing on decreasing Smoking
Addiction in individuals by positive reinforcement. It used Django framework and we created
our own local server.
</li>
<br>
<li>
Made a working Hospital-Management DBMS (Database Management system) for 3rd
Semester project. It was created using JDBC in Netbeans IDE.
</li>
<br>
<li>
Made an Android application to maintain attendance for college students. Developed in
native android
</li>
<br>
<li>
Came in top 100 teams in SE- Asia region in ACM-ICPC online qualifier round.
</li>
</ul>
</p>
<!-- Academics -->
<h5><b>
Academic Achievements
</b>
</h5>
<ul>
<li>Qualified for ACM-ICPC Regionals 2018-19 at IIT Kharagpur and Kanpur
</li>
<br>
<li>
Secured AIR- 2412 rank in JEE Mains.
</li>
<br>
<li>
Top 10% of College Department (COE)
</li>
<br>
<li>
Top 10% in CBSE class 12th result
</li>
<br>
<li>
10 CGPA in class 10th
</li>
<br>
<li>
Secured and qualified as a JSTSE scholar from State of New Delhi
</li>
</ul>
</div>
</body>
</html>
Hey root of the your local directory and your github page might be different can you try with relative path starting with ./
src: url('./text/Raleway/Raleway-Light.TTF')

Some hyperlinks in list aren't clickable

I am new to html so please don't mind the terrible coding..
I've created a list of links on my page in wordpress, but for some reason the first few aren't clickable. They seem to be fine here, but on my page they suddenly stop working
Here's the part of my HTML having issues:
.parent {
text-align: left;
}
.parent > ul {
display: inline-block;
}
<div class="parent" style="text-align: left; margin-left:0 auto; margin-right:0 auto; position: relative; top: +0px; right: 10px;">
<ul style= "font-size: 20px;">Public Open Sessions:
<li style="font-size: 16px;"><a href="http://shopkts.com/collections/training/products/3-day-uem-public-open-session-april-11" target="_blank" !important>April 11-13, Mississauga, Canada</a></li>
<li style="font-size: 16px;">April 18-20, Atlanta, USA</li>
<li style="font-size: 16px;">April 25-27, Calgary, Canada</li>
<li style="font-size: 16px;">May 2-4, Vancouver, Canada</li>
<li style="font-size: 16px;">May 9-11, Philadelphia, USA</li>
<li style="font-size: 16px;">May 16-18, Washington, DC, USA</li>
<li = style="font-size: 16px;">May 23-25, Dallas, USA</li>
</ul>
</div>
What's strange is the the first 3 links won't work, while the next 4 do. But if I move it to another part of the page, it suddenly works. Is it due to something else on the page?
Here is the full html incase it's needed:
.parent {
text-align: left;
}
.parent > ul {
display: inline-block;
}
<p style="text-align: center; font-size: 40px; color: black"> BlackBerry Open Sessions</p>
<p style="text-align: left;"><img class="alignnone size-full wp-image-1950" src="http://www.ktsglobal.ca/wp-content/uploads/2016/06/ps-1-e1478718264230.png" alt="ps" width="1766" height="569" /></p>
<p style="text-align: left; line-height:2px">Our public open sessions consists of instructor-led training and hands-on virtual labs. Participants will learn to Plan, Deploy and Manage BlackBerry UEM or BES12</p>
<p style="text-align: left; line-height:2px">with one of our certified instructors. Make sure to check back regularily to see our updated list of events.</p>
<hr />
<p style="text-align: center; font-size: 24px;"><img class="wp-image-1922 alignleft" src="http://www.ktsglobal.ca/wp-content/uploads/2016/11/shutterstock_196196186-e1478532776565.jpg" alt="shutterstock_196196186" width="505" height="346" /> Upcoming Public / Virtual Events:</p>
<p style="text-align: center; font-size: 18px;"></p>
<div class="parent" style="text-align: left; margin-left:0 auto; margin-right:0 auto; position: relative; top: +0px; right: 10px;">
<ul style= "font-size: 20px;">Public Open Sessions:
<li style="font-size: 16px;"><a href="http://shopkts.com/collections/training/products/3-day-uem-public-open-session-april-11" target="_blank" !important>April 11-13, Mississauga, Canada</a></li>
<li style="font-size: 16px;">April 18-20, Atlanta, USA</li>
<li style="font-size: 16px;">April 25-27, Calgary, Canada</li>
<li style="font-size: 16px;">May 2-4, Vancouver, Canada</li>
<li style="font-size: 16px;">May 9-11, Philadelphia, USA</li>
<li style="font-size: 16px;">May 16-18, Washington, DC, USA</li>
<li = style="font-size: 16px;">May 23-25, Dallas, USA</li>
</ul>
</div>
<div class="parent" style="margin-left:0 auto; margin-right:0 auto;position: relative; top: -238px; right: -380px;">
<ul style= "font-size: 20px;">Virtual Sessions:
<li style="font-size: 16px;">March 29-31</li>
<li style="font-size: 16px;">April 12-14</li>
<li style="font-size: 16px;">April 26-28</li>
</ul>
</div>
<p style="text-align: right; font-size: 20px; position: relative; top: +0px; right: 10px;">Click the training session you'd like to join to see more and sign up.<p/>
<hr style="position: relative; top: -30px;"/>
<img class="wp-image-1949 alignright" src="http://www.ktsglobal.ca/wp-content/uploads/2016/06/las-vegas-signs-clouds-blue-sky-1920x1080-e1478718166731.jpg" alt="las-vegas-signs-clouds-blue-sky-1920x1080" width="486" height="392" />
<p style="text-align: center; font-size: 24px;">Coming Soon</p>
<p style="font-size: 18px;">We are planning a special 3-day BlackBerry UEM training event in Las Vegas.</p>
<p style="font-size: 18px;">The training will focus on some new and exciting features of BlackBerry UEM.</p>
<p style="font-size: 18px;">Feel free to contact our team for more information. We hope to see you there!</p>
<hr style="position: relative; top: 20px; width:100%;"/>
<p style="text-align: center;font-size: 20px"><strong><span style="color: #0020c2;">Contact us for more info</span></strong></h4></p>
It looks like a mess but trust me, it works on the page.
Here's a link to the page
Any help would be great, thank you in advance!
Think I found it.
Try this:
.parent {
overflow: auto;
}
Your second "parent" div is covering up your links. Your code is actually really basic, so this probably isn't the best way to solve it, but it will work for you at this point.
I tried it and it worked fine, even in your webpaged link above. I don't see any problem. However, I found a typo (?) in the last <li>
<li = style="font-size: 16px;">
It should be:
<li style="font-size: 16px;">

CSS Float Left Inconsistencies Elements Randomly Jump Row

I've been trying to write custom CSS for styling of related posts which appear under each article of my website. Each related post consists of 1 thumbnail and 1 text headline.
There are 8 in total under each page grouped in a UL list, and the LI elements are floated to the Left so they display in 2 rows.
Problem is for some reason occasionally I have LI items which jump row for now apparent reason.
Here is an example:
Screenshot
This is the html part of the code:
<div class="crp_related ">
<h3>Related Stories:</h3>
<ul>
<li style="padding-top: 10px">
<a href="./document-reveals-isis-plot-for-world-domination-in-chilling-detail-full-translation-below/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Document reveals ISIS plot for world domination in chilling detail: Full translation below" alt="Document reveals ISIS plot for world domination in chilling detail: Full translation below"
src="./wp-content/uploads/2015/12/Screen-Shot-2015-12-07-at-12.45.19-PM-150x150.png">
</a>
<br>
<a class="crp_title" href="./document-reveals-isis-plot-for-world-domination-in-chilling-detail-full-translation-below/">Document reveals ISIS plot for world domination in chilling…</a>
</li>
<li style="padding-top: 10px">
<a href="./devout-us-muslim-and-his-saudi-wife-left-their-baby-at-home-to-storm-back-to-office-christmas-party-with-automatic-weapons-and-slaughter-14-of-his-colleagues-before-dying-in-police-shoot-out/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Devout’ US Muslim and his Saudi wife left their baby at home to storm back to office Christmas party with automatic weapons and slaughter 14 of his colleagues before dying in police shoot-out"
alt="‘Devout’ US Muslim and his Saudi wife left their baby at home to storm back to office Christmas party with automatic weapons and slaughter 14 of his colleagues before dying in police shoot-out" src="./wp-content/uploads/2015/12/farook1-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./devout-us-muslim-and-his-saudi-wife-left-their-baby-at-home-to-storm-back-to-office-christmas-party-with-automatic-weapons-and-slaughter-14-of-his-colleagues-before-dying-in-police-shoot-out/">‘Devout’ US Muslim and his Saudi wife left their</a>
</li>
<li style="padding-top: 10px">
<a href="./obama-we-lose-when-america-scrutinizes-muslims-betrayal-of-our-values/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Obama: ‘We Lose’ When America Scrutinizes Muslims… ‘Betrayal of Our Values’" alt="Obama: ‘We Lose’ When America Scrutinizes Muslims… ‘Betrayal of Our Values’"
src="./wp-content/uploads/2015/12/Obama126-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./obama-we-lose-when-america-scrutinizes-muslims-betrayal-of-our-values/">Obama: ‘We Lose’ When America Scrutinizes…</a>
</li>
<li style="padding-top: 10px">
<a href="./great-partners-pentagon-rejects-russian-evidence-of-turkey-aiding-isis/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Great partners’: Pentagon rejects Russian evidence of Turkey aiding ISIS" alt="‘Great partners’: Pentagon rejects Russian evidence of Turkey aiding ISIS"
src="./wp-content/uploads/2015/12/565f3967c461884a3d8b4627-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./great-partners-pentagon-rejects-russian-evidence-of-turkey-aiding-isis/">‘Great partners’: Pentagon rejects Russian…</a>
</li>
<li style="padding-top: 10px">
<a href="./7-isis-facts-every-american-must-know/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="7 ISIS Facts Every American Must Know" alt="7 ISIS Facts Every American Must Know" src="./wp-content/uploads/2015/12/ISIS-Genocide-in-Iraq-AP-Photo-640x480.jpg">
</a>
<br>
<a class="crp_title" href="./7-isis-facts-every-american-must-know/">7 ISIS Facts Every American Must Know</a>
</li>
<li style="padding-top: 10px">
<a href="./will-your-city-or-state-be-the-next-san-bernardino-at-least-22-verified-islamic-terror-training-camps-in-us-all-under-the-watchful-eye-of-the-fbi/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Will Your City or State be the Next San Bernardino? At Least 22 Verified Islamic Terror Training Camps in US – All Under the Watchful Eye of the FBI"
alt="Will Your City or State be the Next San Bernardino? At Least 22 Verified Islamic Terror Training Camps in US – All Under the Watchful Eye of the FBI" src="./wp-content/uploads/2015/12/120515_2259_WillYourCit1-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./will-your-city-or-state-be-the-next-san-bernardino-at-least-22-verified-islamic-terror-training-camps-in-us-all-under-the-watchful-eye-of-the-fbi/">Will Your City or State be the Next San Bernardino? At Least</a>
</li>
<li style="padding-top: 10px">
<a href="./allah-took-their-sanity-putin-accuses-turkish-leadership-of-aiding-terror/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Allah took their sanity’: Putin accuses Turkish leadership of ‘aiding terror’" alt="‘Allah took their sanity’: Putin accuses Turkish leadership of ‘aiding terror’"
src="./wp-content/uploads/2015/12/56600a0dc46188c3078b45e7-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./allah-took-their-sanity-putin-accuses-turkish-leadership-of-aiding-terror/">‘Allah took their sanity’: Putin accuses Turkish…</a>
</li>
<li style="padding-top: 10px">
<a href="./russian-warplanes-hit-1458-terrorist-targets-in-syria-over-past-week/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over Past Week" alt="Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over Past Week"
src="./wp-content/uploads/2015/12/1028392998-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./russian-warplanes-hit-1458-terrorist-targets-in-syria-over-past-week/">Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over…</a>
</li>
</ul>
<div class="crp_clear">
</div>
</div>
And this is the CSS part:
div.crp_related {
clear: both;
margin: 10px 0;
}
div.crp_related h3 {
margin: 0 !important;
}
div.crp_related ul {
list-style: none;
float: left;
margin: 0 !important;
padding: 0 !important;
}
div.crp_related li, div.crp_related a {
float: left;
overflow: hidden;
position: relative;
text-align: left;
display: table-cell;
}
div.crp_related li {
margin: 5px !important;
padding: 6px;
}
div.crp_related li:hover {
background: #eee;
}
div.crp_related a:hover {
text-decoration: none;
}
div.crp_related img {
max-width: 150px;
max-height: 150px;
min-height: 150px;
min-width: 150px;
margin: auto;
display: block;
overflow: hidden;
}
div.crp_related .crp_title {
position: relative;
max-width: 150px;
height: 100%;
padding-left: 0px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
color: #dc291e;
font-size: 12pt;
font-weight: bold;
}
div.crp_related .crp_thumb, div.crp_related li, div.crp_related .crp_title {
vertical-align: bottom;
}
.crp_clear {
clear: both;
}
Why is this happening?
What am I doing wrong?
Add following div after every four records.
<div style='clear:both'></div>
Please post a snippet of code with both CSS and HTML together.
1)
Probably the problem is due to the fact that in the first row the first 2 articles have a longer crp_title and it spans 4 rows, but in the other 2 articles crp_title spans 3 rows.
A floating element going in a new line tries to go up, and the reason why the second articles' row goes right is that the 3rd and 4th articles of the first row have a smaller height.
You can easily check it with your browser inspector.
2)clear:both after the last element of each row
A quick fix can be setting a fixed height in px of your .crp_title
This should do the trick:
div.crp_related > ul > li:nth-child(4):after {
content: '';
clear: both;
display: block;
visibility: hidden;
height: 0px;
}
This issue is due to unequal height of floated content, so you need to clear float and get next element on new row. You can do that using nth-child selectors.
div.crp_related {
clear: both;
margin: 10px 0;
}
div.crp_related h3 {
margin: 0 !important;
}
div.crp_related ul {
list-style: none;
float: left;
margin: 0 !important;
padding: 0 !important;
}
div.crp_related li,
div.crp_related a {
float: left;
overflow: hidden;
position: relative;
text-align: left;
display: table-cell;
}
div.crp_related li {
margin: 5px !important;
padding: 6px;
}
div.crp_related li:hover {
background: #eee;
}
div.crp_related a:hover {
text-decoration: none;
}
div.crp_related img {
max-width: 150px;
max-height: 150px;
min-height: 150px;
min-width: 150px;
margin: auto;
display: block;
overflow: hidden;
}
div.crp_related .crp_title {
position: relative;
max-width: 150px;
height: 100%;
padding-left: 0px;
padding-right: 3px;
padding-top: 3px;
padding-bottom: 3px;
color: #dc291e;
font-size: 12pt;
font-weight: bold;
}
div.crp_related .crp_thumb,
div.crp_related li,
div.crp_related .crp_title {
vertical-align: bottom;
}
.crp_clear {
clear: both;
}
/* THIS IS DUE TO UNEQUAL HEIGHT OF FLOATED CONTENT, so Clear Float on every 5th element */
#media (min-width: 768px) {
div.crp_related li:nth-child(4n+1) {
clear: both;
}
}
#media (max-width: 767px) {
div.crp_related li:nth-child(3n+1) {
clear: both;
}
<div class="crp_related ">
<h3>Related Stories:</h3>
<ul>
<li style="padding-top: 10px">
<a href="./document-reveals-isis-plot-for-world-domination-in-chilling-detail-full-translation-below/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Document reveals ISIS plot for world domination in chilling detail: Full translation below" alt="Document reveals ISIS plot for world domination in chilling detail: Full translation below"
src="./wp-content/uploads/2015/12/Screen-Shot-2015-12-07-at-12.45.19-PM-150x150.png">
</a>
<br>
<a class="crp_title" href="./document-reveals-isis-plot-for-world-domination-in-chilling-detail-full-translation-below/">Document reveals ISIS plot for world domination in chilling…</a>
</li>
<li style="padding-top: 10px">
<a href="./devout-us-muslim-and-his-saudi-wife-left-their-baby-at-home-to-storm-back-to-office-christmas-party-with-automatic-weapons-and-slaughter-14-of-his-colleagues-before-dying-in-police-shoot-out/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Devout’ US Muslim and his Saudi wife left their baby at home to storm back to office Christmas party with automatic weapons and slaughter 14 of his colleagues before dying in police shoot-out"
alt="‘Devout’ US Muslim and his Saudi wife left their baby at home to storm back to office Christmas party with automatic weapons and slaughter 14 of his colleagues before dying in police shoot-out" src="./wp-content/uploads/2015/12/farook1-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./devout-us-muslim-and-his-saudi-wife-left-their-baby-at-home-to-storm-back-to-office-christmas-party-with-automatic-weapons-and-slaughter-14-of-his-colleagues-before-dying-in-police-shoot-out/">‘Devout’ US Muslim and his Saudi wife left their</a>
</li>
<li style="padding-top: 10px">
<a href="./obama-we-lose-when-america-scrutinizes-muslims-betrayal-of-our-values/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Obama: ‘We Lose’ When America Scrutinizes Muslims… ‘Betrayal of Our Values’" alt="Obama: ‘We Lose’ When America Scrutinizes Muslims… ‘Betrayal of Our Values’"
src="./wp-content/uploads/2015/12/Obama126-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./obama-we-lose-when-america-scrutinizes-muslims-betrayal-of-our-values/">Obama: ‘We Lose’ When America Scrutinizes…</a>
</li>
<li style="padding-top: 10px">
<a href="./great-partners-pentagon-rejects-russian-evidence-of-turkey-aiding-isis/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Great partners’: Pentagon rejects Russian evidence of Turkey aiding ISIS" alt="‘Great partners’: Pentagon rejects Russian evidence of Turkey aiding ISIS"
src="./wp-content/uploads/2015/12/565f3967c461884a3d8b4627-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./great-partners-pentagon-rejects-russian-evidence-of-turkey-aiding-isis/">‘Great partners’: Pentagon rejects Russian…</a>
</li>
<li style="padding-top: 10px">
<a href="./7-isis-facts-every-american-must-know/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="7 ISIS Facts Every American Must Know" alt="7 ISIS Facts Every American Must Know" src="./wp-content/uploads/2015/12/ISIS-Genocide-in-Iraq-AP-Photo-640x480.jpg">
</a>
<br>
<a class="crp_title" href="./7-isis-facts-every-american-must-know/">7 ISIS Facts Every American Must Know</a>
</li>
<li style="padding-top: 10px">
<a href="./will-your-city-or-state-be-the-next-san-bernardino-at-least-22-verified-islamic-terror-training-camps-in-us-all-under-the-watchful-eye-of-the-fbi/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Will Your City or State be the Next San Bernardino? At Least 22 Verified Islamic Terror Training Camps in US – All Under the Watchful Eye of the FBI"
alt="Will Your City or State be the Next San Bernardino? At Least 22 Verified Islamic Terror Training Camps in US – All Under the Watchful Eye of the FBI" src="./wp-content/uploads/2015/12/120515_2259_WillYourCit1-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./will-your-city-or-state-be-the-next-san-bernardino-at-least-22-verified-islamic-terror-training-camps-in-us-all-under-the-watchful-eye-of-the-fbi/">Will Your City or State be the Next San Bernardino? At Least</a>
</li>
<li style="padding-top: 10px">
<a href="./allah-took-their-sanity-putin-accuses-turkish-leadership-of-aiding-terror/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="‘Allah took their sanity’: Putin accuses Turkish leadership of ‘aiding terror’" alt="‘Allah took their sanity’: Putin accuses Turkish leadership of ‘aiding terror’"
src="./wp-content/uploads/2015/12/56600a0dc46188c3078b45e7-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./allah-took-their-sanity-putin-accuses-turkish-leadership-of-aiding-terror/">‘Allah took their sanity’: Putin accuses Turkish…</a>
</li>
<li style="padding-top: 10px">
<a href="./russian-warplanes-hit-1458-terrorist-targets-in-syria-over-past-week/">
<img width="150" height="150" onerror="this.onerror=null;this.src='./no-thumbnail.jpg';" class="crp_thumb crp_correctfirst" title="Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over Past Week" alt="Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over Past Week"
src="./wp-content/uploads/2015/12/1028392998-150x150.jpg">
</a>
<br>
<a class="crp_title" href="./russian-warplanes-hit-1458-terrorist-targets-in-syria-over-past-week/">Russian Warplanes Hit 1,458 Terrorist Targets in Syria Over…</a>
</li>
</ul>
<div class="crp_clear">
</div>
</div>
I think the coding it's pretty much simpler. Take a look at this snippet:
ul li {
width: 200px;
height: 200px;
border: 1px solid #000;
float: left;
list-style: none;
margin-top: 40px;
margin-right: 40px;
}
ul li:last-child {
margin-right: 0;
}
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
This is the base, now you can add the image and description. This ul will fit to container's width.
Hope it helps

HTML Place text next to another text?

This is kind of hard to explain but I'm trying to place a text next to another text. A picture is worth a thousand words so here's what I'm trying to achieve.
Here's a picture of what it should look like
http://imgur.com/hc3dNJx
http://i39.tinypic.com/24kxft3.jpg
And this what I have so far. As you can see, the text that I want to place next to this text is not where it should be. I'm talking about the bold text that should be on right "9.1, Date, Author".
JSFiddle
http://jsfiddle.net/NmUaX/20/
HTML
<li class="post" >
<article class="in-column" style="height:300px;"> <p class="article-title" style="font-size:26px; padding-bottom:10px;">Grumpy Cat</p><img src="http://cdn.dashburst.com/wp-content/uploads/2013/01/Grumpy-Cat.jpg" border="0" height="200" width="300" style="float:left; padding-right:20px;">
<p class="excerpt" style="width:700px; line-height:20px;">Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism. Grumpy Cat, real name Tardar Sauce, is a female cat and Internet celebrity known for her grumpy facial expression. Her owner Tabatha Bundesen says that her permanently grumpy-looking face is due to feline dwarfism.</p>
<p class="excerpt" style="float:right; font-size:70px; font-family:Segoe UI;"><b>9.1</b></p>
<p class="excerpt" style="float:right; font-size:14px; font-family:Segoe UI;"><b>Date: </b>2 June 2012<br/><b>Author: </b> John Smith</p>
</article>
</li>
</section>
</section>
CSS
article.in-column {
border-bottom: 1px solid #dddddd;
text-align: left;
padding-left: 25px;
padding-right: 25px;
padding-top: 15px;
}
article.in-column .excerpt {
color: #2f2f2f;
font-size: 11px;
margin: 0px;
padding-bottom: 5px;
}
p.article-title{
line-height: 19px;
margin: 5px 0px;
color: #151515;
font-weight:bold;
font-size:16px;
}
that content <p> Element you need to give width:500px; float:left
and the bold text 9.1 you need to give a line-height:50px
Check this fiddle http://jsfiddle.net/NmUaX/21/
I tried replacing your HTML (and some CSS) on the right-floating element:
<div style="float:right;">
<div class="excerpt" style=" font-size:70px; font-family:Segoe UI;">
<b>9.1</b>
</div>
<div class="excerpt" style="font-size:14px; font-family:Segoe UI;">
<b>Date: </b>2 June 2012
<br/><b>Author: </b> John Smith
</div>
</div>
if you want to float an element to the right top, it would be best to place it before the article content. Also, it would be best to wrap both elements (the 9.1 and the date) into one container before floating them to the right.