Image stretches screen instead of fitting within div - javascript

I'm trying to make a page that fits on a single screen without any scrolling, but the CSS that defines its format that I've got isn't working.
The problem can be seen in the JSFiddle
The footer is fixed at the bottom of the screen (as it should be), but the background image (within content) extends from below the header to below the footer.
There also seems to be a problem with the background image when resizing the browser, but I'm sure that will be fixed when solving this problem.
I have the following code:
HTML: index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/main.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
function diff(A, B) {
return A.filter(function (a) {
return B.indexOf(a) == -1;
});
}
function show(shown) {
var all = ['home', 'about', 'projects', 'contact'];
var hide_these = diff(all, shown);
var hidden;
document.getElementById(shown).style.display='block';
for(hidden in hide_these)
document.getElementById(hide_these[hidden]).style.display='none';
$(".sidebar").slideToggle(600);
return false;
}
</script>
</head>
<body>
<div id="home">
<div class="header">
<div class="menu-btn"></div>
<h1>
Home
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="about" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
About
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="projects" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Projects
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<div id="contact" style="display:none">
<div class="header">
<div class="menu-btn"></div>
<h1>
Contact
</h1>
</div>
<div class="sidebar">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</div>
<div class="content">
<h1>Hello from Content!</h1>
</div>
<div class="footer">
Hello from footer.
</div>
</div>
<script>
$(function() {
$('body').addClass('loaded');
});
$(".menu-btn").on("click", function(){
$(".sidebar").slideToggle(600);
});
$(".header h1").delay(500).animate({"opacity": "1"}, 700);
</script>
</body>
</html>
CSS: main.css
html,body {
padding: 0;
margin: 0;
font-family: arial;
}
html, body, #home{
width: 100%;
height:100%;
}
a {
color: black;
}
a:visited {
text-decoration: none;
color: black;
}
#home{
min-height:100%;
position:absolute;
}
#about, #projects, #contact{
width: 100%;
height:100%;
}
body .sidebar {
display:block;
}
body.loaded .sidebar {
display:none;
}
.header {
background-color: black;
height: 80px;
width: 100%;
font-family: cursive;
text-align: center;
color: white;
display:flex;
align-items: center;
z-index: 1;
position:relative;
}
.menu-btn {
background-image: url("../images/menu.png");
height: 48px;
width: 44px;
margin-left:50px;
}
.header h1 {
opacity: 0;
width:100%;
margin:0;
padding:0;
}
.sidebar {
position: absolute;
width: 200px;
top: 80px;
bottom: 0;
padding-top: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
filter: alpha(opacity=50); /* IE 5-7 */
-moz-opacity: 0.5; /* Netscape */
-khtml-opacity: 0.5; /* Safari 1.x */
opacity: 0.5; /* Good browsers */
}
.sidebar li {
color: black;
list-style-type: none;
margin-top: 10px;
width: 100%;
}
.sidebar li a {
text-decoration: none;
margin-left: 30px;
background-color: #9da1a4;
width: 100px;
padding: 8px;
border: 1px solid silver;
border-radius: 5px;
display: block;
}
.sidebar li a:hover {
background-color: #ebebeb;
}
.content {
top: -80px; /* Header height */
bottom: 30px;
background-image:url("../images/arbor.jpeg");
background-size: cover;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
}
.content p {
padding-top: -10px;
text-align: center;
color: black;
}
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position: absolute;
}
.footer a img {
position: relative;
top: -5px;
}
My attempt to fix was setting the .content area from height = [30px, -80px] (i.e., from the top of the footer to the bottom of the header).
I'm brand new to CSS, so I'm sure this is very poorly formatted, so sorry in advance.
Thanks everyone,
erip

If you want to show everything on a single page without any scrolling then Give position:fixed to body. You can see the result here http://jsfiddle.net/mcnn1d81/1/ .

So if I understand you properly, you want the footer to line the bottom of your content while making sure to fill the browser, no matter the size. This looks like a job for "relative" positioning! Currently your footer is set to "absolute", which is why it overlaps your background.
here's an updated fiddle with RELATIVE changes: https://jsfiddle.net/mcnn1d81/13/
.footer {
width:100%;
height:30px;
text-align: center;
color: white;
background-color: black;
padding-top: 10px;
bottom:0;
left:0;
position: RELATIVE;
}
.content {
top: 0px; /* Header height */
bottom: 30px;
background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
background-size: cover;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
position:RELATIVE;
}
I hope that helps!
EDIT: Added code to keep the content in the screen. https://jsfiddle.net/mcnn1d81/20/
This a quick, rough edit, and realize that what's written will only adhere to the content you put in it. As soon as you tell the content how big it needs to be you'll cause some wonky things to happen.
If you want dynamic content (that stretches and fits the screen) you'll have to add some code to the resize function to make sure everything stays the same in the CSS. I'd add more, but I've got other things I need to get to. I hope this pushes you in the right direction!

just update your css with this.
html,body {
padding: 0;
margin: 0;
font-family: arial;
height:100%;
width:100%;
overflow:hidden;
}
.content {
top: -80px; /* Header height */
bottom: 30px;
background-image:url("http://i.imgur.com/3WWnZZj.jpg?1");
background-size: 100%;
min-height: 100%;
min-width: 100%;
padding-top: 80px;
padding-bottom: 10px;
text-align: center;
overflow:hidden;
}
that will fix your issue
you can keep background-size : cover; for .content class. it will best option to set your background image.

Try this :
body
{
margin:0%;
overflow:hidden;
}

Related

Nav Bar Scrolling Too Far on my page

My objective is to have a single-page website. My current issue is with the nav bar at the top of the page. When I click on one of the links in my nav list, it takes me down the page, but it keeps overshooting.
For example, if I click on my second nav li it takes me down the page, but ends up beneath the text in that div. It's the same with the third and fourth pages: the page scrolls down just barely beyond where I want it to end up, i.e., perfectly in line with the start of the title of each page.
HTML:
<body>
<div id="home"> <!--MAIN DIV TO TAKE YOU BACK TO THE TOP OF THE HOME PAGE-->
<div id="wrapper">
<header>
<h1>Pretend Restaurant</h1>
<nav class="nav">
<ul>
<li>Home</li>
<li>Menu</li>
<li>About Us</li>
<li>Contact</li>
<li>Social</li>
</ul>
</nav>
<div id="snow"></div>
</header>
<main>
<div id="page1">
<h2 class="category">Welcome to Snow Bar</h2>
<p><strong>Come relax and enjoy a unique and delicious treat.</strong></p><br>
</div>
<div id="page2">
<a id="menu" class="smooth"></a>
<h2>Menu</h2>
<h4>Recipes</h4>
<p>list of recipes</p>
</div>
<div id="page3">
<a id="aboutus" class="smooth"></a>
<h2>ABOUT US INFO GOES HERE</h2>
</div>
<div id="page4">
<a id="contact" class="smooth"></a>
<h2>Contact and Location</h2>
<p>Contact info goes here</p>
</div>
<div id="page5">
<a id="social" class="smooth"></a>
<h2>Social media information here</h2>
</div>
</div>
</body>
</main>
CSS
*{
box-sizing: border-box;
font-family: Georgia, Times, serif;
border-radius: 3.5px;
float: center;
}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
#wrapper{ background-color: #FFFFFF;
color: #000066;
min-width: 700px;
max-width: 1024px;
margin-right: auto;
margin-left: auto;
padding-top: 0px;
opacity: 0.86;
min-height: 900px;
}
h1 { font-family: Georgia, Times, serif;
background-color: darkcyan;
color: #74ebd5;
background-position: center;
background-repeat: no-repeat;
text-align: center;
font-size: 4em;
line-height: 80%;
padding: 30px;
text-shadow: #CCCCCC;
margin-bottom: 0;
}
main { margin-left: 100px;
padding-bottom: 100px;
}
.header{ background-color: #000066;
color: #FFFFFF;
}
ul {
list-style-type: none;
margin: 0;
padding: 10px;
overflow: hidden;
background-color: #333;
width: 100%;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
box-sizing: border-box;
}
li {
display: inline-block;
}
nav{ display:inline-block;
width: 100%;
font-weight: bold;
background-color: grey;
position: sticky;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
transition: 0.3s;
}
nav ul {
list-style: none;
width: 100%;
text-align: center;
display:inline-block;
}
nav a{text-decoration: none;
width: 100%}
nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}
.category {
font-weight: bold;
background-color: #FFFFFF;
color: darkcyan;
text-align: center;
font-size: 50px;
padding-right: 50px;
padding-left:0;
}
#page1 { height:1000px;}
#page2 { height:1000px;}
#page3 { height:1000px;}
#page4 { height:1000px;}
#page5 { height:1000px;}
jQuery
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
That's exactly how HTML navigation works. You should use javascript to scroll to the right position. The formula will be like: parent.scrollTop = destination.offsetTop - nav.style.height)
$('.nav a').click(function(e) {
e.preventDefault();
var $scrooll_to_id = $(this.getAttribute('href'));
$('html').stop(true).animate({
scrollTop: ($scrooll_to_id.position().top - $('.nav').height())
});
});
Here a fiddle: https://jsfiddle.net/sjquno0r/1/

How to fix an element to the right of div?

I have a button which i want to fix it's position to the right of a div, the button is toggling the visibility of it's left div, problem is the button loses it's position once the resolution is changing...
Here is an Example
And here is what I've done so far:
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left: 2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 45vh;
right: 223px;
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide {
left: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
<!-- the button -->
</div>
<div class="right">
</div>
</div>
The simplest solution to this would be to put the toggle within the .right div, and position it at left: 0 so that it is always adjacent to the .left div, something like this:
<div class="cont">
<div class="left"></div>
<div class="right">
<div class="results_toggle"></div>
</div>
</div>
.right {
position: relative; /* add this */
}
.results_toggle {
/* remove 'right' */
left: 0; /* add this */
}
Working example
The advantage of this method is that it will be completely unaffected by any change in screen resolution.
You use viewport units , so the values of them will change when changing the viewport size ( resolution ) .
If you want the arrow to stay in the middle ( and so, on the right side of the grey div ) , you should center it this way
See snippet below
$('.results_toggle').on('click', function() {
$(this).toggleClass('left_hide');
$('.left').toggle();
});
.cont {
width: 100vw;
}
.left {
position: relative;
width: 50vw;
height: 100vh;
background-color: grey;
float: left;
border-left:2px solid white;
}
.right {
height: 100vh;
width: 50vw;
float: left;
}
.results_toggle:before {
content: "\f054";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
color: black;
font-size: 24px;
padding-right: 0.5em;
position: absolute;
top: 14px;
left: 5px;
}
.results_toggle {
background-color: grey;
height: 60px;
width: 30px;
position: absolute;
z-index: 106;
top: 50%;
right:50%;
transform:translate(100%,-50%);
border-bottom-right-radius: 110px;
border-top-right-radius: 110px;
border-bottom: 0;
}
.left_hide{
left:0px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cont">
<div class="left">
</div>
<div class="results_toggle">
</div>
<div class="right">
</div>
</div>
For me the best approach to align elements is to use Flexbox attributes. With those attributes, you can place element as boxes in a row, column...In your case you have a main box .cont with a left side and a right side. This is the result with a Flexbox placement :
The main div is represented by the red background. Inside you have your left div and aligned with your right button.
Here is the code to make this :
<html>
<head>
<meta charset='utf-8' />
<style type="text/css">
.cont
{
display: flex;
align-items: center;
background-color: red;
color: white;
}
.left
{
background-color: blue;
margin: 5px;
}
button
{
background-color: green;
}
</style>
</head>
<body>
<div class="cont">
<div class="left">
<p>Left div</p>
</div>
<div class="results_toggle">
<button>Right button</button>
</div>
<div class="right"></div>
</div>
</body>
</html>
not sure if that's what you meant, but i simply changed the leftattribute of the button to 50vw, the same as your grey box.
Here's a fiddle
edit:
another option: position: relative and float: left without left or right property
updated fiddle
It's because you've fixed each property.
You can fix an element at the right of his parent using absolute and relative position. And add the width of you child.
Example
.parent{
width:200px;
height:200px;
background-color:#ccc;
position:relative;
}
.child{
position:absolute;
right:0;
top:100px;
transform:translateX(100%) translateY(-50%);
}
<div class="parent">
<button class="child">btn</button>
</div>

Why does my nav float left when I change the position to fixed? How do I fix that issue and keep it centered?

$(function(){
$(window).on('scroll', function(){
if($(window).scrollTop() >= $('.sunContainer').height() ) {
$('.nav').addClass('stick');
} else {
$('.nav').removeClass('stick');
}
});
});
html, body {
background-size: cover;
background-attachment: fixed;
text-align: center;
}
.stick {
position: fixed;
}
#wrapper {
height:3000px;
width: 100%;
text-align: center;
}
.nav {
width: 90%;
height:50px;
background-color:#FFB00F;
text-align: center;
margin: 0 auto;
}
.tab_holder {
width:1000px;
text-align: center;
}
li {
width:120px;
height:50px;
display: inline-block;
text-align: center;
}
li:hover {
background-color:#2F4F4F;
}
a {
text-decoration: none;
color:black;
}
.imge {
margin-top: 50px;
}
.sunContainer {
background-color:#187249;
width:100%;
height:700px;
text-align: center;
}
.content {
background-color: lightsalmon;
width:100%;
height:700px;
}
.third {
background-color: khaki;
width:100%;
height:700px;
}
<!DOCTYPE>
<html>
<head>
<link href='sunset.css' rel='stylesheet'>
</head>
<body id='body'>
<div id='wrapper'>
<div class='sunContainer'>
<div class='nav'>
<ul class='tab_holder'>
<li><a href='#'>About</a></li>
<li><a href='#'>The Kidd Frankie</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<!-- Find a picture of the rising sun -->
<img class='imge' src='one.jpg'>
<img class='imge' src='two.jpg'>
<img class='imge' src='three.jpg'>
<img class='imge' src='four.jpg'>
</div>
<div class='content'>
Stuff will be here
</div>
<div class='third'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src='sunset.js'></script>
</body>
</html>
While just experimenting and playing around I ran into an issue. The issue being that whenever my nav adds the class it just floats left. At first I thought it was because I wasnt adding anything in the .stick class but realized that isnt issue. Anyone ever run into this issue? Seems like its a css problem and not the js. Thanks in advance!
You are centering your nav using margin: 0 auto. But when it gets assigned position: fixed by that .stick class, this centering method won't work anymore - it only works for position: relative elements.
Since there is no other parameter in your CSS, as a fixed element it's simply placed at the default position left: 0
You can avoid that by assigning left: 50%; and transform: translateX(-50%); to it.
$(function(){
$(window).on('scroll', function(){
if($(window).scrollTop() >= $('.sunContainer').height() ) {
$('.nav').addClass('stick');
} else {
$('.nav').removeClass('stick');
}
});
});
html, body {
background-size: cover;
background-attachment: fixed;
text-align: center;
}
.stick {
position: fixed;
left: 50%;
transform: translatex(-50%);
}
#wrapper {
height:3000px;
width: 100%;
text-align: center;
}
.nav {
width: 90%;
height:50px;
background-color:#FFB00F;
text-align: center;
margin: 0 auto;
}
.tab_holder {
width:1000px;
text-align: center;
}
li {
width:120px;
height:50px;
display: inline-block;
text-align: center;
}
li:hover {
background-color:#2F4F4F;
}
a {
text-decoration: none;
color:black;
}
.imge {
margin-top: 50px;
}
.sunContainer {
background-color:#187249;
width:100%;
height:700px;
text-align: center;
}
.content {
background-color: lightsalmon;
width:100%;
height:700px;
}
.third {
background-color: khaki;
width:100%;
height:700px;
}
<!DOCTYPE>
<html>
<head>
<link href='sunset.css' rel='stylesheet'>
</head>
<body id='body'>
<div id='wrapper'>
<div class='sunContainer'>
<div class='nav'>
<ul class='tab_holder'>
<li><a href='#'>About</a></li>
<li><a href='#'>The Kidd Frankie</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
<!-- Find a picture of the rising sun -->
<img class='imge' src='one.jpg'>
<img class='imge' src='two.jpg'>
<img class='imge' src='three.jpg'>
<img class='imge' src='four.jpg'>
</div>
<div class='content'>
Stuff will be here
</div>
<div class='third'></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src='sunset.js'></script>
</body>
</html>

scroll to link id with fixed nav bar

in my web i have a fixed navigation bar and below it i have some another divs - the nav bar links connect to those links.
the problem is when i click on some link the fixed nav bar covered the begining of the div. and what i want and tring to do is that the nav bar will be at the start of the div and so it wont covered the begining.
here is the link for the result.
here is my html code:
<body>
<div id="header">
<div id="nav_bar">
<ul>
<li>בית</li>
<li>מי אנחנו</li>
<li>מוצרים</li>
<li>צרו קשר</li>
<li><img src="1.png"></img></li>
</ul>
</div>
</div>
<div id="main_pics" class="container">
<!-- photos here -->
<div id="main_photo1" class="phocont first">
</div>
<div id="main_photo2" class="phocont">
</div>
<div id="main_photo3" class="phocont">
</div>
<div id="main_photo4" class="phocont">
</div>
<div id="main_photo5" class="phocont">
</div>
</div>
<div id="about_us" class="container">
<h1>עץ כנעני - כשעיצוב ואיכות נפגשים</h1>
<p> וייצור המוצר.</p>
<p>א.</p>
</div>
<div id="our_services" class="container">
<h1>המוצרים שלנו</h1>
</div>
<div id="connect_us" class="container">
<h1>תאמו איתנו פגישה עוד היום</h1>
</div>
<div id="down_nav_bar" class="container">
</div>
<div id="credit" class="container">
</div>
</body>
here is my css code:
body{
background-color: white;
margin: 0px;
padding: 0px;
}
#nav_bar{
background: rgba(255,255,255,0.9);
height: 55px;
position: fixed;
width: 100%;
top: 0;
left: -2px;
z-index: 2;
}
#nav_bar ul{
padding: 0px;
text-align: center;
direction: rtl;
}
#nav_bar ul li {
display: inline-block;
padding: 0 10px;
color: gray;
float: inherit;
font-family: "alefregular";
font-size: 23px;
}
#nav_bar ul li a{
color: inherit;
text-decoration: none;
}
#nav_bar ul li a:hover{
color:#a51212;
}
#nav_bar img{
height:18px;
position:absolute;
padding-right:20px;
top:25px;
z-index:-1px;
}
#about_us{
text-align: center;
/*height: 250px;*/
height: 100%;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color:gray;
}
#about_us p{
width: 55%;
margin: auto;
text-align: center;
direction: rtl;
padding-bottom: 10px;
line-height: 30px;
}
#our_services{
/*height: 450px;*/
text-align: center;
font-family:"open_sans_hebrewregular", "alefregular",arial,"Times New Roman";
color: black;
background-color: rgb(224,224,224);
}
Try adding padding top to container
.container
{
padding-top: 55px;
}
fiddle
If you do not wish to have the text move down by 'x' pixels, you can programmatically scroll with an adjusted offset using jQuery:
$('html, body').animate({
scrollTop: $(target).offset().top - 55
}, 1000);
Notice, this example does not use padding-top:
fiddle
Or, without jQuery:
window.scrollTo(0, document.getElementById(targetSection).offsetTop-55);
fiddle
The easiest way by far would be to add some padding (as much as the navbar is high) to the divs that serve as targets for your links:
div.container{ padding-top: 55px; }
For the sake of semantics, I'd recommend you also use section elements instead of those meaningless divs, etc… https://html.spec.whatwg.org/multipage/semantics.html#sections

How do I place icons in header at far right?

Hello I am working on my website. I would like to know how to place contact icons at the header section to the far right. (relative to the text of the header that reads creative mind. How do I do that? Below is my code. Help please. Thanks.
HTML
<body>
<div class="auto-style1">
<div id="header">
Header
<h1>Creative Mind</h1>
</div>
<div id="nav">
Navigation
<ul>
<li>Homepage</li>
<li>Tips and Tricks</li>
<li>About me</li>
<li>Get in Touch</li>
</ul>
</div>
<div id="main">Main</div>
<h3>Contact Information</h3>
<h3>Phone</h3>
<p>1-323</p>
<h3>Email</h3>
<img src=/>gmail
<h3>Social Networks</h3>
<img src=/>
<div id="footer">
Footer
<h3>Creative Mind Jonathan Mourning</h3>
</div>
</body>
CSS
#charset "utf-8";
/* CSS Document */
body {
background-color: #A6FFFF;
width: 100%;
}
#header,
#main,
#footer {
display: block;
position: relative;
float: left;
}
#header,
#footer {
height: 15%;
width: 100%;
}
#header {
margin-bottom: 2px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#footer {
margin-top: 2px;
text-align: right;
border: 2px;
}
#main {
position: relative;
width: 70%;
height: 100%;
margin: 0 auto;
background-color: #FFF;
float: center;
text-align: center;
}
#nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 10px;
}
You can use float: right for example
HTML:
<div id="header">Header
<img src="http://lorempixel.com/100/50">
<h1>Creative Mind</h1>
</div>
CSS:
.contact {
float: right;
}
JSFiddle
Try adding unique classname for your icon:
#header{
position:relative; //makes relative to browser
}
#header .myIcon {
position:absolute; // makes to position to right corner of header
right:0px;
float:right;
}
Fiddle: http://jsfiddle.net/WLR5S/7/
You can use position: relative; and then positioning the icon with top, left, right and bottom property.

Categories