I built the following website basically from scratch, and it works perfectly on most browsers (Chrome, Firefox, Safari, Edge), but unsurprisingly not on IE (tested on 9,10,11): Alliance Française du Manitoba
The problem is with the dropdown menus. When hovering over one of the menu headers (<div class="headerMenuItem">), a mega-menu (<div class="headerMenuDropdown">) should appear. Currently, when hovering, the headerMenuItems are highlighting, as expected, but the child headerMenuDropdown isn't appearing.
/***Header Menu***/
#headerMenu { /*Menu Wrapper*/
float: left;
margin: 12px auto 0px;
padding: 0px;
}
.headerMenuItem { /* Individual menu item */
display: block;
float: left;
overflow: hidden;
border-radius: 5px 5px 0px 0px;
margin-top: 6px;
padding-bottom: 10px;
}
.headerMenuItem:hover {
background-color: #d4d9db;
text-decoration: none;
}
.headerMenuItem>a {
padding: 8px 12px 0px;
text-align: center;
border-radius: 5px 5px 0px 0px;
font-weight: bold;
color: #444;
}
.headerMenuItem a:hover { /* override default link behaviour */
text-decoration: none;
color: #444;
}
/*Menu expand*/
.headerMenuDropdown { /* mega-menu wrapper */
float: left;
display: none;
position: fixed;
background-color: white;
width: 100%;
left: 0;
top: 100%;
border-top: 1px solid #da002e;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 105;
text-align: center;
}
.headerMenuItem:hover .headerMenuDropdown { /*Display dropdown*/
display: block;
animation: headerDropdownAppear;
animation-duration: 0.4s;
}
#keyframes headerDropdownAppear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Create up to 6 equal columns that floats next to each other */
.row {
width: 1200px;
display: block;
margin-left: auto;
margin-right: auto;
}
.column {
float: left;
width: 15.53848%;
padding: 10px 10px 10px 0px;
}
.column span,
.column a {
float: none;
text-decoration: none;
display: block;
text-align: left;
padding: 1px;
}
.column>span {
font-weight: bold;
}
.column>span>span {
padding-left: 15px;
text-indent: -10px;
font-weight: lighter;
font-size: 0.8em;
}
.column>span>span>a {
padding-left: 15px;
margin-left: -15px;
padding-bottom: 3px;
line-height: 120%;
}
.column a:hover {
background-color: #d4d9db;
}
<div id="headerBottom">
<nav id="headerMenu">
<div class="headerMenuItem">
Learn French
<div class="headerMenuDropdown">
<div class="row">
<div class="column">
<span>
Column 1
<span>
Link 1
</span>
<span>
Link 2
</span>
...
</span>
</div>
<div class="column">
<span>
Column 2
...
</span>
</div>
...
</div>
</div>
</div>
<div class="headerMenuItem">
Tests & Exams
<div class="headerMenuDropdown">
<div class="row">
...
</div>
</div>
</div>
...
</nav>
...
</div>
I assumed that this had to do with one of two known IE bugs:
:hover inconsistencies
Unsuported > selector
However, both of these should have been phased out as issues by IE 9, but I'm having issues on IE 11! I've got a proper <!DOCTYPE html>, HTML5Shiv, and even crossover.htc, but nothing seems to work.
This leads me to think that the issue is with the CSS selector
.headerMenuItem:hover .headerMenuDropdown
EDIT: However, IE Inspector shows that it's behaivng properly!
Any known fixes?
Related
I have built this header using custom CSS and bootstrap class names. I have tried z-index, float: initial properties already. Thanks in advance
.branding-preview {
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}
.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}
.branding-logo img {
width: 300px;
height: 50px;
}
.branding-powered-by-logo {
float: right;
height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}
.preview-menu {
margin: 30px 0 0 0;
}
.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="/path/to/logo" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<li><a>Learn</a></li>
<li><a>Admin</a></li>
</ul>
</div>
This is the result that I am getting with the current code,
actual result:
This is what I'm hoping it will look like, expected result:
Isn't simple without all the css rules, but the concept is: Create a wrapper floated to right and inside create 2 lines, one for the branding-powered-by-logo and display:block the second line is depend from actual CSS but probably works without modify anything.
If you can post the real page we can help you with more precision.
Hope this help you.
.branding-preview {
display:block;
height: 75px;
margin-left: 15px;
margin-right: 15px;
background-color: #0071bb;
}
.branding-logo {
float: left;
height: 50px;
font-size: 18px;
padding: 15px 15px;
}
.branding-logo img {
width: 300px;
height: 50px;
}
.branding-powered-by-logo {
/* ADDED */
display:block;
text-align:right;
height: 50px;
color: white;
font-size: 15px;
padding: 2px 10px;
}
.preview-menu {
margin: 0px 0 0 0;
}
.preview-menu > li > a {
margin: 0 3px;
color: white;
text-transform: uppercase;
border-bottom: solid 1px transparent;
background-color: transparent !important;
}
/* ADDED */
.wrapper-logo-navbar {
float: right;
}
.preview-menu > li {
display: inline-block;
}
<div class="branding-preview">
<div class="branding-logo">
<img id="branding-logo" src="/path/to/logo">
</div>
<div class="wrapper-logo-navbar">
<div class="branding-powered-by-logo">
<span>Powered By</span>
<img id="branding-powered-by-logo" src="https://cdn.pixabay.com/photo/2012/05/02/19/27/head-46086_960_720.png" height="30">
</div>
<ul class="navbar-nav navbar-right nav preview-menu">
<li><a>Start</a></li>
<li><a>Plan</a></li>
<li><a>Manage</a></li>
<!-- removed some elements for the rendering on StackOverflow -->
</ul>
</div>
</div>
I think you just need add
position:absolute; right:0px;
to your .preview-menu class.
I am having an issue with the second level menu only in Safari. Top level and submenu work fine on mouse hover on chrome, firefox etc but when opened in Safari, only first menu is opening on hover. I have already tried other solutions available here and on other forums but it's still same.
.nav {
margin: 2% 10% 0 35%;
/*margin-bottom: 4px;
margin-top: 2%;
margin-left: 35%;
margin-right: 10%;*/
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family:"Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {
/*padding-left: 30px;*/
padding-left: 0px !important;
margin-left: 30px;
}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
overflow: hidden;
position: fixed;
margin-left: -200px;
margin-top: -50px;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
margin-left: 200px !important;
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css"/>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
I have included the HTML and CSS code for the menu. I have also checked it on chrome using windows OS, and it works but the only issue is with safari browser.
There are a couple of suggestions I have that may help.
Firstly, I would not recommend using position: fixed; to position your submenus because fixed is a position relative to the browser window. You likely want the submenus to be positioned according to the parent, not the window.
Secondly, you have overflow: hidden; on .navbar-nav, which means anything that falls outside the borders of it should be invisible - which would include your submenus.
Here is a JSFiddle with a working example of your snippet with my suggestions, tested and working in Safari:
.nav {
margin: 2% 10% 0 35%;
width: 60%;
height: auto;
z-index: 1;
position: absolute;
}
.nav-container {
display: inline-block;
padding: 0;
font-weight: 300;
font-family: "Open Sans";
font-size: 15px;
}
.nav-container a:hover {
color: #FFFFFF;
}
.nav-pos {
display: inline-block;
padding-bottom: 15px;
}
.nav-pos-sp {}
.navbar-nav {
margin-top: 1%;
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: relative;
}
.navbar-nav-menu a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #343434;
}
/* child menu dropdown */
.navbar-nav-child {
display: none;
height: auto;
color: #C7C7C7;
width: 200px;
position: absolute;
top: 0;
left: 100%;
}
.navbar-nav-menu-item-101a:hover .navbar-nav-child {
display: block !important;
}
.navbar-nav-menu-child-text a {
font-size: 14px;
display: block;
text-align: left;
padding: 15px 0px 15px 12px;
border-bottom: thin solid #fff;
background-color: #2B2B2B;
}
.services:hover .navbar-nav-menu {
display: block;
}
<html>
<head>
<link rel="stylesheet" href="../style/all.css.cf.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>
<body>
<div class="nav">
<div class="nav-container">
<div class="nav-pos nav-pos-sp services">
First Menu <span class="fa fa-angle-down"></span>
<div class="navbar-nav navbar-nav-menu navbar-nav-services">
<ul>
<li class="navbar-nav-menu-item-101a"><a href="#0">Second Level Menu <span class="fa fa-angle-right"
style="float: right;margin-right: 10px;"></span></a>
<div class="navbar-nav-child navbar-nav-menu-child-text">
1
2
3
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
https://jsfiddle.net/m59vk802/4/
I'm wondering why the elements in my nav bar appear to have blank space above them? I've checked the margin and padding and there doesn't seem to be an issue, but there is a large space above my #logo and #searchbox which is messing up my layout, how can I get rid of the space above the elements?
Thanks a lot!
Here's my Code:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Your <nav> element has a padding of 10px.
EDIT: The absolutely positioned search form seems to be causing the problem. I made the following changes and the space went away:
#searchbox_div {
position: relative;
display: block;
padding: 0;
width: 100%;
}
#searchbox {
position: relative;
float: right;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
float: left;
}
#main_nav{
display: inline-block;
padding: 0px;
margin: 0px;
margin-top: 4em;
margin-left: 1em;
}
I noticed that you`re not using a css reset. A CSS Reset (or “Reset CSS”) is a short, often compressed (minified) set of CSS rules that resets the styling of all HTML elements to a consistent baseline.
In case you didn’t know, every browser has its own default ‘user agent’ stylesheet, that it uses to make unstyled websites appear more legible. For example, most browsers by default make links blue and visited links purple, give tables a certain amount of border and padding, apply variable font-sizes to H1, H2, H3 etc. and a certain amount of padding to almost everything. Ever wondered why Submit buttons look different in every browser?
Obviously this creates a certain amount of headaches for CSS authors, who can’t work out how to make their websites look the same in every browser.
Using a CSS Reset, CSS authors can force every browser to have all its styles reset to null, thus avoiding cross-browser differences as much as possible.
Also, sometimes if I have a problem with blank spaces, I run the html all together so there are no blank spaces between the tags. To make it look neat, I insert carriage returns in the middle of the html tag.
By default, most browsers have an 8px or so margin that is built in or "Added" to the page style. The super easy way to eliminate this is through CSS. Simply use:
html,body{
margin:0;
}
You can also add:
padding:0;
If it's still giving you problems!
You appear to need to reset/normalize your css as that
html,body{
margin:0;
padding:0;
}
The <nav> element is configured to have 10 pixels of padding on all sides.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 7 years ago.
Improve this question
I'm currently building a website and and I can't find a CSS positioning method that works, meaning any CSS positioning element that doesn't make other HTML elements behave weirdly. Is there any CSS positioning methods that would position an HTML element precisely, accurately and not cause (many) issues with other elements? So far float and position: absolute; don't work well. Thanks!
Since apparently what I'm asking is unclear, I'm asking "What kind of positioning can I use that doesn't have any (or few) side effects?"
Here's the Code I'm working on:
li {
display: inline-block;
}
ul {
display: inline-block;
margin: 0px;
padding: 0px;
}
#main_nav, logo {
display: inline-block;
padding: 0px;
margin: 0px;
}
nav li a:link {
font-weight: bold;
display: inline-block;
text-decoration: none;
font-family: times;
font-size: 24px;
list-style: none;
padding: 5px;
border: 2px solid black;
border-radius: 5px;
color: black;
}
nav li a:visited {
color: rgba(0,0,0,0.7);
}
nav li a:hover {
background-color: rgba(0,0,0,0.6);
color: white;
}
nav li a:active {
color: black;
border-color: black;
}
nav {
width: 1000px;
height: 130px;
background-color: rgba(255,255,255,0.7);
padding: 10px;
margin: 0px auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
input[type=search] {
font-size: 16px;
}
#searchbox {
position: absolute;
right: 0px;
top: 0px;
}
#searchbox_div {
position: relative;
display: inline-block;
padding: 0;
width: 100%;
}
#logo {
display: inline-block;
width: 200px;
font-family: arial;
margin: 0px;
padding: 0px;
font-size: 26px;
}
#logo_jeff, #logo_arries, #logo_website {
margin: 0px;
}
#logo_jeff {
letter-spacing: 35.5px;
}
#logo_arries {
letter-spacing: 11px;
}
#logo_website {
letter-spacing: 4px;
}
body {
background-image: url("../pictures/jeff_skiing.jpg");
background-color: red;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
min-height: 500px;
margin: 0px;
padding: 0px;
}
aside {
position: absolute;
right: 0px;
background-color: rgba(255,255,255,0.9);
width: 170px;
height: 600px;
margin: 0;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
padding: 10px;
}
#main_content {
width: 1000px;
min-height: 600px;
display: block;
background-color: rgba(255,255,255,0.7);
margin: 0 auto;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
position: relative; top: 0px;
padding: 10px;
}
#here_you_can_learn {
font-size: 47px;
color: gray;
margin: 0 auto;
margin-bottom: 10px;
text-align: center;
}
#welcome {
text-align: center;
color: rgb(0, 0, 110);
font-size: 100px;
margin: 0;
padding: 10px 10px 20px 10px;
}
#down_arrow {
height: 50px;
margin: auto;
display: block;
padding: 10px;
}
#most_frequent {
width: 600px;
vertical-align: top;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#m_f_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#m_f_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#recent_activity {
width: 375px;
display: inline-block;
background-color: rgba(0,0,0,0.1);
border-radius: 3px;
}
#r_a_heading {
font-size: 30px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_body {
font-size: 15px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more {
font-size: 20px;
margin: 10px;
padding: 5px;
text-align: center;
background-color: rgba(0,0,0,0.2);
border-radius: 5px;
}
#r_a_show_more_link:visited {
color: black;
}
#r_a_show_more_link:hover {
color: gray;
background-color: rgba(0,0,0,0.9);
}
#r_a_show_more_link:active {
color: black;
}
<!DOCTYPE html>
<head>
<title>Home | Jeff's Website</title>
<link href="styles/main_navigation.css" type="text/css" rel="stylesheet" />
<link href="styles/body.css" type="text/css" rel="stylesheet" />
<link href="styles/main_content.css" type="text/css" rel="stylesheet" />
</head>
<body>
<!--Main Nav-->
<header>
<nav>
<div id="searchbox_div">
<form action="" id="searchbox">
<input id="search_input" type="search" name="searchmysite" placeholder="Search my Site!">
<input type="submit" value="Search!">
</form>
</div>
<div id="logo">
<h1 id="logo_jeff">JEFF</h1>
<h1 id="logo_arries">ARRIES</h1>
<h1 id="logo_website">WEBSITE</h1>
</div>
<div id="main_nav">
<ul>
<li>Home</li>
<li>Blog</li>
<li>Trips</li>
<li>Politics</li>
<li>Pictures</li>
<li>Videos</li>
<li>Computer</li>
<li>Misc</li>
</ul>
</div>
</nav>
</header>
<!--Welcome to jeff's website-->
<div>
<h2 id="welcome">Welcome to my Website!</h1>
<a href="#here_you_can_learn">
<img src="pictures/down_arrow.png" id="down_arrow"/>
</a>
</div>
<!--right side nav-->
<aside>
<p>this is aside</p>
</aside>
<!--Main Content-->
<div id="main_content">
<h2 id="here_you_can_learn">Here you can learn about me and my adventures!</h2>
<!--Most Frequently visited pages: on left side of page-->
<div id="most_frequent">
<p id="m_f_heading">Most frequently visted pages!</p>
<p id="m_f_show_more">Show More</p>
</div>
<!--Recent Activity: on the right side of page-->
<div id="recent_activity">
<p id="r_a_heading">Recent Activity</p>
<p id="r_a_body">test</p>
<p id="r_a_show_more">Show More</p>
</div>
</div>
</body>
Each positioning method has a purpose and well-defined, if sometimes not intuitive, behavior. You cannot pick one that "won't mess things up". There's no shortcut like "always use relative", because each method accomplishes something different that cannot be accomplished by the other methods.
I happen to think positioning in CSS is abysmally defined, but it's what we have to work with and the only thing you can do is learn what each one does and how they interact. There WILL be some things you cannot accomplish1, and until CSS layout matures that will continue to be the case.
The only advice I can give you is to budget some time, say 8-16 hours over the next few weeks, to play with basic layouts and experiment with all the positioning methods. Use Firefox or Chrome's developer tools to examine in detail how things are laid out, and make specific changes one at a time until you start to develop a feel for how the options interact with each other. This is a highly complex mess and it will take some time to learn it. But once you do you will have a skillset that will serve you well.
1 As I recently learned to my great disappointment. I did find some workarounds gross hacks that involved duplicating content but that way lies madness. I hope the new flex positioning stuff gets worked out with some sanity but I'm not holding my breath.
Remove this from your HTML :
<div id="searchbox_div">
</div>
but obviously keep the form inside it, it dosent need to be contained in a div since its already inside the nav element.
Here is working Fiddle
I've a div (.user-band), inside it there is one div (.user-block) floated to left and one UL (.user-stats) floated to right.
Now the issue is when I'm giving width/min-width in percentage to child 'li' items of 'ul' (.user-stats). The 'li' items are not appearing in a row within 'ul', but if i'm giving the same width in pixel (i.e. 250px) they are appearing in a row.
Can anyone please let me know whats going wrong here.
Here is the HTML:
<div class="clearfix user-band">
<div class="clearfix user-block">
<div class="user-pic">
<div class="pic-box">
<img src="images/user-pic.jpg" alt="">
</div> <!--pic-box-->
</div> <!--user-pic-->
<div class="user-info">
<p class="user-id">Martin</p>
<p class="user-location"><span class="fa fa-map-marker ic-location"></span> Los Angeles</p>
</div> <!--user-info-->
</div> <!--user-block-->
<ul class="user-stats">
<li class="stats-title">
Completed Deals
<span class="stats-value">15</span>
</li>
<li class="stats-title">
Pending Deals
<span class="stats-value">7</span>
</li>
<li class="stats-title no-click">
Total Commission
<span class="stats-value">$500</span>
</li>
</ul>
</div> <!--user-band-->
Here is the CSS:
.user-band { border: 1px solid #e26513; background: #F0701B; padding: 10px; }
.user-block { float: left; }
.user-pic, .user-info { float: left; }
.user-info { margin-left: 10px; }
.user-pic { padding: 2px; border-radius: 2px; background: #ffffff; }
.pic-box { overflow: hidden; text-align: center; width: 80px; height: 80px; }
.pic-box > img { max-width: 100%; min-height: 100%; }
.user-id { font-weight: 700; font-size: 18px; color: #ffffff; }
.user-location { color: #ffffff; }
.user-stats { float: right; margin: -10px -10px -10px 0; list-style-type: none; padding-left: 0; }
.user-stats { float: right; margin: -10px -10px -10px 0; list-style-type: none; padding-left: 0; }
.user-stats > li { display: inline-block; min-width: 250px; padding: 24px 10px; text-align: center; font-size: 14px; color: #ffffff; border-left: 1px solid #e26513; margin-left: -4px; cursor: pointer; }
.user-stats > li:hover { box-shadow: 0 0 200px #e26513 inset; }
.stats-value { font-weight: 700; display: block; font-size: 25px; }
.user-stats > li.no-click { cursor: auto; }
.user-stats > li.no-click:hover { box-shadow: none; }
.ic-location { font-size: 20px; }
You need to set a width on the UL - because it is floated.
http://codepen.io/elliz/pen/IeDCd/
15 Apr - Pen updated
See updated pen, what that what you mean?
Note - made code a little more semantic but not perfect.