Jack Man Jack Man - 6 months ago 10
Javascript Question

Why is my link for my div linking to my other content?

I'm creating a div that gives info about a course. By this information, is the price of the course and a button that says "Take Class" that links to the purchase page. However, the link is leaking into the other info.



/* font */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

/* end of font */

/* clear settings */

body {
padding: 0;
margin: 0;
background: white;
}

a {
text-decoration: none;
}

/* end of clear settings */

/* nav */

#nav {
width: 1600px;
height: 50px;
background: #009ACD;
}
/* end of nav */

/* info nav */

#primary_nav_wrap {
width: 1600px;
height: 50px;
background: #1F1F1F;
}
#primary_nav_wrap ul {
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
left: 3%;
top: 5px;
}
#primary_nav_wrap ul a {
display: block;
text-decoration: none;
font-size: 15px;
padding: 10px 15px 10px 15px;
font-family: 'Open Sans', sans-serif;
color: white;
}
#primary_nav_wrap ul a:hover {
background: white;
}
#primary_nav_wrap ul li {
position: relative;
float: left;
margin: 0;
padding: 0;
}
#primary_nav_wrap ul li:hover a {
color: black;
background: white;
}
#primary_nav_wrap ul li a:hover {
background: white;
}
#primary_nav_wrap ul ul li a:hover {
background: #F4F4F4;
}
#primary_nav_wrap ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: #fff;
padding: 0;
margin-top: 0.2px;
border: 1px solid #ccc;
border-top: none;
z-index: 50;
}
#primary_nav_wrap ul ul li {
float: none;
width: 200px;
position: relative;
left: 0px;
}
#primary_nav_wrap ul ul a {
line-height: 120%;
padding: 7.5px 9px;
}
#primary_nav_wrap ul ul ul {
top: 0;
left: 100%
}
#primary_nav_wrap ul li:hover > ul {
display: block
}
/* end of info nav */

/* courses.php */

/* course intro */

#course_body {
background: #F4F4F4;
}

#course_intro {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: 40px;
left: 50px;
}

#intro_title {
width: 562px;
position: relative;
top: 2px;
}

#intro_video {
width: 375px;
height: 210px;
position: relative;
top: -7px;
}

/* end of course intro */

/* course facts */

/* Price Information */

#price_tag {
font-size: 32px;
font-weight: bold;
color: #373737;
position: relative;
top: -15px;
}

#price_div {
background: #17AA1C;
color: white;
text-align: center;
padding: 11px 12px 11px 12px;
font-size: 18px;
width: 116px;
font-weight: normal;
position: relative;
top: 12px;
border-radius: 3px;
}

#price_div:hover {
background: #159D1A;
}

#price_div {
text-decoration: none;
}

/* End of Price Information */

#course_facts {
border: 1px solid #DDDDDD;
background: white;
width: 568px;
font-family: 'Open Sans', sans-serif;
font-size: 25px;
padding: 20px 20px 10px 20px;
position: relative;
top: -311px;
left: 675px;
font-size: 20px;
height: 115px;
}

.Rating {
position: relative;
width: 125px;
height: 25px;
top: -111px;
left: 180px;
}
.Rating svg {
position: absolute;
z-index: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
top: 0;
}
.Rating meter {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: absolute;
z-index: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #B6C2CC;
}
.Rating meter::-moz-meter-bar {
background: #FF7867;
}
.Rating meter::-webkit-meter-optimum-value, .Rating meter::-webkit-meter-suboptimum-value, .Rating meter::-webkit-meter-even-less-good-value {
background: #FF7867;
}

#facts_ratings {
position: relative;
top: -110px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
left: 175px;
}

#course_length {
position: relative;
top: -100px;
left: 185px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}

#course_time {
letter-spacing: 0;
font-weight: bold;
font-size: 18px;
color: #2E3D49;
}

/* end of course facts */

/* skill level */

#course_skillText {
position: relative;
top: -190px;
left: 310px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}

.fillSquare, .emptySquare {
display: inline-block;
position: relative;
left: 80px;
}

.fillSquare {
width: 12px;
height: 12px;
background: #666;
}

.emptySquare {
width: 12px;
height: 12px;
background: #B8B8B8;
}

#skill_level {
position: relative;
left: 85px;
top: -2px;
font-size: 12px;
letter-spacing: 1px;
font-weight: normal;
color: #2E3D49;
}

/* end of skill level */

/* language */

#course_language {
position: relative;
top: -154px;
left: 235px;
text-transform: uppercase;
font-size: 14px;
word-spacing: 0;
font-weight: 600;
letter-spacing: 2px;
}

#language_type {
letter-spacing: 0;
font-weight: bold;
font-size: 18px;
color: #2E3D49;
position: relative;
left: 153px;
}

/* end of language */

/* Wish List button */

#course_wish {
border: 1px solid #ccc;
border-radius: 3px;
font-size: 15px;
position: absolute;
width: 87px;
padding: 5px;
position: relative;
top: -65px;
cursor: pointer;
box-shadow: rgba(0,0,0,0.0980392) 0 2px 3px 0;
border-radius: 3px;
}

#empty_heart {
color: #FF827F;
}

#course_wish_text {
position: relative;
left: 5px;
}

/* End of Wish List button */


/* Teacher div */

#teacher_div {
width: 326px;
border: 1px solid #ddd;
background: white;
position: relative;
left: 1002px;
padding: 15px;
top: -280px;
text-align:center;
}

#teacher_picture {
width: 85px;
height: 85px;
border-radius: 50%;
}

#teacher_name {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
text-align: center;
}

#teacher_div a {
text-decoration: none;
color: #00698C;
}

#teacher_div a:hover {
text-decoration: underline;
}

#teacher_tagLine {
font-family: 'Open Sans', sans-serif;
font-size: 14px;
color: #999;
text-align: center;
width: 325px;
}

#course_line {
width: 325px;
height: 1px;
background: #DDD;
}

#teacher_info {
width: 325px;
font-family: 'Open Sans', sans-serif;
font-size: 15px;
text-align:left;
}

/* End of Teacher div */

/* Course Learn */

#course_learn {
background: white;
border: 1px solid #DDD;
width: 280px;
position: relative;
top: -660px;
left: 674px;
font-family: 'Open Sans', sans-serif;
padding: 15px;
max-height: 240px;
font-size: 18px;
overflow: hidden;
background-image: rgba(244,244,244,0);
}

#course_learn li {
font-size: 15px;
color: #353535;
padding: 5px;
text-align: left;
}

/* End of Course Learn */

/* end of courses.php */

<?php

require "connect.php";

?>

<!DOCTYPE html>
<html>
<head>
<title> Hacked Genius </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
<link rel='stylesheet' href='main.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src='main.js'></script>
</head>

<body id='course_body'>
<!-- nav -->
<div id='nav'>

</div>
<!-- end of nav -->

<!-- info nav -->
<nav id="primary_nav_wrap">
<ul>
<li><a href="#">Development</a>
<ul>
<li><a href="#">Web Development</a></li>
<li><a href="#">Mobile Apps</a></li>
<li><a href="#">Programming Languages</a></li>
<li><a href="#">Game Development</a></li>
<li><a href="#">Databases</a></li>
<li><a href="#">Software Testing</a></li>
<li><a href="#">Software Engineering</a></li>
<li><a href="#">Development Tools</a></li>
<li><a href="#">E-Commerce</a></li>
</ul>
</li>
<li><a href="#">Business</a>
<ul>
<li><a href="#">Finance</a></li>
<li><a href="#">Entrepreneurship</a></li>
<li><a href="#">Communications</a></li>
<li><a href="#">Management</a></li>
<li><a href="#">Sales</a></li>
<li><a href="#">Strategy</a></li>
<li><a href="#">Operations</a></li>
<li><a href="#">Project Management</a></li>
<li><a href="#">Business Law</a></li>
<li><a href="#">Data and Anylytics</a></li>
<li><a href="#">Home Business</a></li>
<li><a href="#">Human Resources</a></li>
<li><a href="#">Industry</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Real Estate</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><a href="#">IT & Software</a>
<ul>
<li class="dir"><a href="#">IT Certification</a></li>
<li class="dir"><a href="#">Network & Security</a>
<li><a href="#">Hardware</a></li>
<li><a href="#">Operating Systems</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Office Productivity</a>
<ul>
<li class="dir"><a href="#">Microsoft</a></li>
<li class="dir"><a href="#">Apple</a>
<li><a href="#">Google</a></li>
<li><a href="#">SAP</a></li>
<li><a href="#">Intuit</a></li>
<li><a href="#">Salesforce</a></li>
<li><a href="#">Oracle</a></li>
<li><a href="#">Other</a></li>
</ul>
<li><a href="#">Personal Development</a>
<ul>
<li class="dir"><a href="#">Personal Transformation</a></li>
<li class="dir"><a href="#">Productivity</a>
<li><a href="#">Leadership</a></li>
<li><a href="#">Personal Finance</a></li>
<li><a href="#">Career Development</a></li>
<li><a href="#">Parenting & Relationships</a></li>
<li><a href="#">Happiness</a></li>
<li><a href="#">Religion & Spirituality</a></li>
<li><a href="#">Personal Brand Building</a></li>
<li><a href="#">Creativity</a></li>
<li><a href="#">Influence</a></li>
<li><a href="#">Self Esteem</a></li>
<li><a href="#">Stress Management</a></li>
<li><a href="#">Memory and Study Skills</a></li>
<li><a href="#">Motivation</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Design</a>
<ul>
<li class="dir"><a href="#">Web Design</a></li>
<li class="dir"><a href="#">Graphic Design</a>
<li><a href="#">Design Tools</a></li>
<li><a href="#">User Experience</a></li>
<li><a href="#">Game Design</a></li>
<li><a href="#">Design Thinking</a></li>
<li><a href="#">3D & Animation</a></li>
<li><a href="#">Fashion</a></li>
<li><a href="#">Architectural Design</a></li>
<li><a href="#">Interior Design</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Marketing</a>
<ul>
<li class="dir"><a href="#">Digital Marketing</a></li>
<li class="dir"><a href="#">Search Engine Optimization</a>
<li><a href="#">Social Media Marketing</a></li>
<li><a href="#">Branding</a></li>
<li><a href="#">Marketing Fundamentals</a></li>
<li><a href="#">Analystics & Automation</a></li>
<li><a href="#">Public Relations</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Video & Mobile Marketing</a></li>
<li><a href="#">Content Marketing</a></li>
<li><a href="#">Non-Digital Marketing</a></li>
<li><a href="#">Growth Hacking</a></li>
<li><a href="#">Affiliate Marketing</a></li>
<li><a href="#">Product Marketing</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Lifestyle</a>
<ul>
<li class="dir"><a href="#">Life Hacks</a></li>
<li class="dir"><a href="#">Arts & Crafts</a></li>
<li class="dir"><a href="#">Food & Beverage</a>
<li><a href="#">Beauty & Makeup</a></li>
<li><a href="#">Travel</a></li>
<li><a href="#">Gaming</a></li>
<li><a href="#">Home Improvement</a></li>
<li><a href="#">Pet Care & Training</a></li>
</ul>

<li><a href="#">Photography</a>
<ul>
<li class="dir"><a href="#">Digital Photography</a></li>
<li class="dir"><a href="#">Photography Fundamentals</a></li>
<li class="dir"><a href="#">Portraits</a>
<li><a href="#">Landscape</a></li>
<li><a href="#">Black & White</a></li>
<li><a href="#">Photography Tools</a></li>
<li><a href="#">Mobile Photography</a></li>
<li><a href="#">Travel Photography</a></li>
<li><a href="#">Commercial Photography</a></li>
<li><a href="#">Wedding Photography</a></li>
<li><a href="#">Video Design</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Health & Fitness</a>
<ul>
<li class="dir"><a href="#">Fitness</a></li>
<li class="dir"><a href="#">General Health</a></li>
<li class="dir"><a href="#">Sports</a>
<li><a href="#">Nutrition</a></li>
<li><a href="#">Yoga</a></li>
<li><a href="#">Mental Health</a></li>
<li><a href="#">Dieting</a></li>
<li><a href="#">Self Defense</a></li>
<li><a href="#">Safety & First Aid</a></li>
<li><a href="#">Dance</a></li>
<li><a href="#">Meditation</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Language</a>
<ul>
<li class="dir"><a href="#">English</a></li>
<li class="dir"><a href="#">Spanish</a></li>
<li class="dir"><a href="#">German</a>
<li><a href="#">French</a></li>
<li><a href="#">Japanese</a></li>
<li><a href="#">Portuguese</a></li>
<li><a href="#">Chinese</a></li>
<li><a href="#">Russian</a></li>
<li><a href="#">Latin</a></li>
<li><a href="#">Arabic</a></li>
<li><a href="#">Hebrew</a></li>
<li><a href="#">Italian</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Music</a>
<ul>
<li class="dir"><a href="#">Instruments</a></li>
<li class="dir"><a href="#">Production</a></li>
<li class="dir"><a href="#">Music Fundamentals</a>
<li><a href="#">Vocal</a></li>
<li><a href="#">Music Techniques</a></li>
<li><a href="#">Music Software</a></li>
<li><a href="#">Other</a></li>
</ul>

<li><a href="#">Academics</a>
<ul>
<li class="dir"><a href="#">Social Science</a></li>
<li class="dir"><a href="#">Math & Science</a></li>
<li class="dir"><a href="#">Humanities</a>
</ul>


</ul>
</nav>
<!-- end of info nav -->

<!-- Course Introduction -->
<div id='course_intro'>
<div id='intro_title'>
Lifestyle Business: eBay Drop Shipping Guide Work from Home </div> <br>
<video src='one.mp4' poster='https://udemy-images.udemy.com/course/480x270/498972_df27_2.jpg' id='intro_video'controls></video>
</div>
<!-- End of Course Introduction -->

<!-- Course Facts -->
<div id='course_facts'>

<!-- Purchase Information -->

<span id='price_tag'> $30 <br>
<a href='#'> <div id='price_div'> Take Class </div> </a>
</span>

<!-- End of Purchase Information -->

<!-- Star Ratings -->
<span id='facts_ratings'> 400 Ratings </span>
<div class="Rating">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 100">
<defs>
<path id="a" d="M0 0h500v100H0V0zm50 79L20.6 94.5l5.6-32.8L2.4 38.5l33-4.7L50 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L50 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L150 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L150 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L250 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L250 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L350 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L350 79zm100 0l-29.4 15.5 5.6-32.8-23.8-23.2 33-4.7L450 4l14.7 29.8 33 4.7-24 23.2 5.7 32.8L450 79z"/>
</defs>
<use fill="white" fill-rule="evenodd" xlink:href="#a"/>
</svg>

<meter min="0" max="5" value="4.28"></meter>
</div>
<!-- End of Star Ratings -->

<!-- Length -->
<span id='course_length'> Length <br> <span id='course_time'> 6 Weeks </span> </span>
<!-- End of Length -->

<!-- Skill Level -->
<span id='course_skillText'> Skill Level <br> <span id='course_skill'>

<!-- Skill Boxes -->
<div class='fillSquare'></div> <div class='fillSquare'></div> <div class='emptySquare'></div>
<!-- End of Skill Boxes -->

<span id='skill_level'> Intermediate </span>

</span> </span>
<!-- End of Skill Level -->

<!-- Language -->
<span id='course_language'> Language <br> <span id='language_type'> English </span> </span>
<!-- End of Language -->

<!-- Wish List Button -->
<div id='course_wish'> <i class="fa fa-heart-o" aria-hidden="true" id='empty_heart'></i> <span id='course_wish_text'> Wish List </span> </div>
<!-- End of Wish List Button -->

</div>
<!-- End of Course Facts -->


<!-- Teacher Div -->
<div id='teacher_div'>
<a href='#'> <img src='https://cdnil1.fiverrcdn.com/photos/127528/original/ME2014_small.jpg?1381882191' id='teacher_picture'> </a>

<a href='#'> <div id='teacher_name'> Matthew Malan </div> </a>

<div id='teacher_tagLine'> Game Maker, Game Designer, Game Maker User and Teacher </div> <br>

<div id='course_line'></div> <br>

<div id='teacher_info'> Hello! My name is Andy and I am a professional voice actor. Top-Rated & Featured Seller on Fiverr. Over 5K+ people served worldwide! Proud to be the voice for the Fiverr App! Providing voice services for Commercials, Narrations, E-Learning, Explainer Videos, Apps and more! See my reviews... </div>

</div>
<!-- End of Teacher Div -->

<!-- What you'll learn -->
<div id='course_learn'>
<span id='learn_text'> What you'll learn </span>
<ul>
<li> Build a polished and fun platform game using GameMaker Studio. </li>
<li> Import image, sound, and background assets into GameMaker Studio. </li>
<li> Program using GameMaker Studio's built in scripting language GML (GameMaker Language). </li>
<li> Create game objects and control them using Events and Actions. </li>
<li> Design game levels using Rooms. </li>
</ul>
</div>
<!-- End of What you'll learn -->





To replicate this error, look for a line across from the button that is still a link beyond the button. Try going in the middle of Skill Level and Language...

How do I fix this problem?

Rob Rob
Answer

Your div element is block level so it will automatically take the full width of the parent element (at least). You set its width but that is the width of the content. The node itself still occupies the full width.

To do what you want, set #price_div to display:inline-block; or do float:left; so it will collapse to the width you want.

By setting inline-block, you are making the div behave like a text box, able to contain its text contents but still behave like a block level element so you can set its width and height.