How do I make my div's lined up?
Question
I want my div's to line up on the top, but not line up at the bottom. This allows for flexibility of content:
/* font */ @import url(https://fonts.googleapis.com/css?family=Open+Sans); /* end of font */ /* clear settings */ body { padding: 0; margin: 0; background: white; } /* 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 */ /* course div */ #course_div { width: 1200px; position: relative; left: 180px; top: 30px; padding: 10px; } #course_img { width: 216px; height: 121.5px; border: 1px solid #ccc; border-bottom: none; } #course_info { border: 1px solid #ccc; width: 205.5px; padding: 5px; position: relative; top: -4px; font-family: 'Open Sans', sans-serif; font-size: 16px; } a .course_main { text-decoration: none; color: black; width: 204px; } .course_main { width: 216px; display: inline-block; margin-right: 30px; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } /* end of course div */
<!DOCTYPE html> <html> <head> <title> Hacked Genius </title> <link rel='stylesheet' href='main.css'> <script src='main.js'></script> </head> <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 --> <div id='course_div'> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Excel Excel Excel Excel Excel Excel </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> </div> </body> </html>
In the above example, I have two divs, but they are not lined up. How do I line up the divs on the top? I've tried the flex property, but nothing is working...
5 answers
solution1
2 2016-05-20 13:43:10
display flex, does the job.
See the code below with your updated display propery.
/* font */ @import url(https://fonts.googleapis.com/css?family=Open+Sans); /* end of font */ /* clear settings */ body { padding: 0; margin: 0; background: white; } /* 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 */ /* course div */ #course_div { width: 1200px; position: relative; left: 180px; top: 30px; padding: 10px; display: flex; /* ADD YOUR FLEX DISPLAY PROPERTY HERE */ flex-flow: wrap; } #course_img { width: 216px; height: 121.5px; border: 1px solid #ccc; border-bottom: none; } #course_info { border: 1px solid #ccc; width: 205.5px; padding: 5px; position: relative; top: -4px; font-family: 'Open Sans', sans-serif; font-size: 16px; } a .course_main { text-decoration: none; color: black; width: 204px; } .course_main { width: 216px; display: inline-block; margin-right: 30px; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } /* end of course div */
<!DOCTYPE html> <html> <head> <title>Hacked Genius</title> <link rel='stylesheet' href='main.css'> <script src='main.js'></script> </head> <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 --> <div id='course_div'> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Excel Excel Excel Excel Excel Excel </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> </div> </body> </html>
solution2
1 ACCPTED 2016-05-20 13:45:08
Another option is to add float: left; to the anchor tags in #course_div and then target every anchor element after the 5th anchor element with nth-child() to clear the floated elements before it.
#course_div a {
float: left;
}
#course_div a:nth-child(5n+6) {
clear: left;
}
SIDE NOTE: #course_info is being used repeatedly and should be a CSS class, .course_info .
/* font */ @import url(https://fonts.googleapis.com/css?family=Open+Sans); /* end of font */ /* clear settings */ body { padding: 0; margin: 0; background: white; } /* 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 */ /* course div */ #course_div { width: 1200px; position: relative; left: 180px; top: 30px; padding: 10px; } #course_img { width: 216px; height: 121.5px; border: 1px solid #ccc; border-bottom: none; } #course_info { border: 1px solid #ccc; width: 205.5px; padding: 5px; position: relative; top: -4px; font-family: 'Open Sans', sans-serif; font-size: 16px; } a .course_main { text-decoration: none; color: black; width: 204px; } .course_main { width: 216px; display: inline-block; margin-right: 30px; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } #course_div a { float: left; } #course_div a:nth-child(5n+6) { clear: left; } /* end of course div */
<!DOCTYPE html> <html> <head> <title> Hacked Genius </title> <link rel='stylesheet' href='main.css'> <script src='main.js'></script> </head> <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 --> <div id='course_div'> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Excel Excel Excel Excel Excel Excel </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Excel Excel Excel Excel Excel Excel </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> </div> </body> </html>
solution3
0 2016-05-20 13:42:35
Add vertical-align:top; to your .course_main class:
/* font */ @import url(https://fonts.googleapis.com/css?family=Open+Sans); /* end of font */ /* clear settings */ body { padding: 0; margin: 0; background: white; } /* 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 */ /* course div */ #course_div { width: 1200px; position: relative; left: 180px; top: 30px; padding: 10px; } #course_img { width: 216px; height: 121.5px; border: 1px solid #ccc; border-bottom: none; } #course_info { border: 1px solid #ccc; width: 205.5px; padding: 5px; position: relative; top: -4px; font-family: 'Open Sans', sans-serif; font-size: 16px; } a .course_main { text-decoration: none; color: black; width: 204px; } .course_main { vertical-align:top; width: 216px; display: inline-block; margin-right: 30px; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } /* end of course div */
<!DOCTYPE html> <html> <head> <title>Hacked Genius</title> <link rel='stylesheet' href='main.css'> <script src='main.js'></script> </head> <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 --> <div id='course_div'> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Excel Excel Excel Excel Excel Excel </div> </div> </a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div> </a> </div> </body> </html>
solution4
0 2016-05-20 13:48:35
A jQuery soluction can be jQuery.equalHeights:
https://github.com/mattbanks/jQuery.equalHeights
It will calculate the height of your selector and set the same height to all the elements within your selector.
eg
<div class="test">
This is one line of text.
</div>
<div class="test">
This is three lines of text.<br>
This is three lines of text.<br>
This is three lines of text.<br>
</div>
<style type="text/css">
.test{border: solid 1px #f00};
</style>
<script>
$(document).ready(function(){
$('.test').equalHeights();
});
</script>
Another solution can be the use of flexbox, example found here: http://osvaldas.info/flexbox-based-responsive-equal-height-blocks-with-javascript-fallback
solution5
0 2016-05-20 13:56:48
Try changing display: inline-block to display: inline-table in the .course_main div in CSS
/* font */ @import url(https://fonts.googleapis.com/css?family=Open+Sans); /* end of font */ /* clear settings */ body { padding: 0; margin: 0; background: white; } /* 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 */ /* course div */ #course_div { width: 1200px; position: relative; left: 180px; top: 30px; padding: 10px; } #course_img { width: 216px; height: 121.5px; border: 1px solid #ccc; border-bottom: none; } #course_info { border: 1px solid #ccc; width: 205.5px; padding: 5px; position: relative; top: -4px; font-family: 'Open Sans', sans-serif; font-size: 16px; } a .course_main { text-decoration: none; color: black; width: 204px; } .course_main { width: 216px; display: inline-table; margin-right: 30px; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ } /* end of course div */
<!DOCTYPE html> <html> <head> <title> Hacked Genius </title> <link rel='stylesheet' href='main.css'> <script src='main.js'></script> </head> <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 --> <div id='course_div'> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Excel Excel Excel Excel Excel Excel </div> </div></a> <a href='#'> <div class='course_main'> <img src='https://udemy-images.udemy.com/course/480x270/236832_f09d_19.jpg' id='course_img'> <div id='course_info'> Hi </div> </div></a> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I put a div block below another lined up vertically when they are touch and are on the same line?
How do I make second div move down and up with the w and s keys on the keyboard?
How do is use the SetInterval function and the 'if' to make div's pop up?
How do I align these text boxes to be straight and lined up with one another?
How do I make a div slide up and disappear in JQuery?
How do I make a “div” element pop up and darken the screen?
How do I make a div animation slide up and disappear?
How can I make my div's appear in a horizontal way?
How do i make so the div's overlap with eachother?
How do I make my div slider automatic and manually navigable?
Related Tags