If I run the code without bootstraps container and rows etc.. it does work.
But if i run the code like this snippet inside container etc. the ahref's are not working!
Unless i remove the z-index, but i want the menu to look like it is now.
This have been bugging me for a couple of hours now, and i need someone with a different way of "look" at this problem.
.row.content {
height: 200px;
margin: 20px 0px;
}
.main {
border: 1px solid #600d17;
border-radius: 4px;
margin-top: 20px;
}
.sidenav {
padding-top: 20px;
height: 100%;
}
.sidenav a:hover {
color: #550d15;
}
header {
padding: 30px;
border-bottom: 3px solid #600d17;
}
footer {
padding: 30px;
border-top: 3px solid #600d17;
}
#somename {
border: 1px solid #600d17;
border-radius: 4px;
height: 200px;
background-color: #600d17;
position: relative;
z-index: -1;
/* If i delete this, everything works... */
}
#somename a {
padding: 10px;
display: block;
text-decoration: none;
}
#topheader {
border: 1px solid #460a11;
border-radius: 4px;
background-color: #460a11;
padding: 10px 4px;
height: 50px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>sometitle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="container-fluid">
Header text
</header>
<div class="container">
<div class="row content">
<div class="col-xs-3 sidenav">
<div id="topheader">
<p>Menu</p>
<div id="somename">
somelink
somelink
</div>
</div>
</div>
<div class="col-xs-6 main">
<section>
<h1>Title content</h1>
<p>
Some story...
</p>
</section>
</div>
<div class="col-xs-3 sidenav">
right menu
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
Your id somenname is inside of your outer id topHeader.
You simply need to use z-index on 2 separate div in your case
Separate topheader and somename
Now overlap topheader on somename by following code:
#topheader{
z-index:2;
position:relative;
}
#somename{
z-index:1;
}
.row.content {
height: 200px;
margin: 20px 0px;
}
.main {
border: 1px solid #600d17;
border-radius: 4px;
margin-top: 20px;
}
.sidenav {
padding-top: 20px;
height: 100%;
}
.sidenav a:hover {
color: #550d15;
}
header {
padding: 30px;
border-bottom: 3px solid #600d17;
}
footer {
padding: 30px;
border-top: 3px solid #600d17;
}
#somename {
border: 1px solid #600d17;
border-radius: 4px;
height: 200px;
background-color: #600d17;
position: relative;
margin: -10px 5px 0px 5px;
z-index: 1;
/* If i delete this, everything works... */
}
#somename a {
padding: 10px;
display: block;
text-decoration: none;
}
#topheader {
border: 1px solid #460a11;
border-radius: 4px;
background-color: #460a11;
padding: 10px 4px;
height: 50px;
z-index: 2;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>sometitle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<header class="container-fluid">
Header text
</header>
<div class="container">
<div class="row content">
<div class="col-xs-3 sidenav">
<div id="topheader">
<p>Menu</p>
</div>
<div id="somename">
somelink
somelink
</div>
</div>
<div class="col-xs-6 main">
<section>
<h1>Title content</h1>
<p>
Some story...
</p>
</section>
</div>
<div class="col-xs-3 sidenav">
right menu
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
Related
I'm not able to figure out how to "hide" the main body content behind my header on this site. It's still a work-in-progress. The header appears to be transparent, even when I set it to z-index:10 and position:fixed. Any help would be greatly appreciated.
https://gbears96.github.io/bigStart/
Here's the code:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header-content">
<!-- Content: logo + nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
About
</li>
<li>
Products
</li>
<li>
Team
</li>
</ul>
</nav>
</div>
</header>
<div class="main">
<!-- Mission Statement -->
<div class="mission-section">
<div class="mission-content">
<h1 class="mission-motto">We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div class="temp">
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div class="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/startup-square.jpg">
</div>
<div class="content">
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/metaverse.jpeg">
</div>
<div class="content">
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="team-section">
<div class="team-center">
<h1> hi </h1>
</div>
<div class="images-container">
<div class="image-container">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>
Default value of background-color is transparent, it just wasn't noticeable until it overlaps with other elements, you have to give it another value if you want it not to be (i.e. add background-color: #fff on your header). See the snippet below:
html {
font-size: 16px;
font-family: "Roboto", sans-serif;
background-color: #fffcf6;
margin: 0;
}
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fff;
}
.header-content {
display: flex;
align-items: center;
border-bottom: 0.5px solid #002F6C;
width: 100%;
}
#logo {
max-height: 5rem;
}
#spacer {
max-height: 10rem;
flex: 1;
}
header nav {
display: block;
font-size: 0.75rem;
}
header nav ul {
display: flex;
list-style: none;
}
header nav li {
padding-right: 3rem;
}
header nav li a {
text-decoration: none;
color: #002F6C;
text-transform: uppercase;
}
.main {
position: relative;
top: 100px;
}
.mission-section {
/* background-image: url("../images/downtown.jpeg"); */
display: flex;
justify-content: center;
height: 20rem;
border-bottom: 0.5px solid #002F6C;
width: 100%;
align-items: center;
border: 2px pink solid;
}
.mission-section h1 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 3em;
}
.mission-content {
align-items: center;
}
.features-section {
display: flex;
justify-content: space-between;
padding: 0rem;
width: 100%;
margin: auto;
margin-top: 1rem;
margin-bottom: 1rem;
border-left: 0.5px solid #002F6C;
border: 2px pink solid;
}
.features-section .feature {
display: flex;
border-right: 0.5px solid #002F6C;
/* padding: 0% 1%; */
}
.feature .center {
text-align: center;
width: 100%;
}
.feature h2 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 2em;
}
.feature h3 {
font-family: "Times New Roman", serif;
font-weight: lighter;
font-size: 1.5em;
}
.feature .image-container {
width: 100%;
margin: 0 auto;
overflow: hidden;
}
.image-container img {
display: block;
width: 95%;
height: 95%;
margin: 0 auto;
}
.feature .content {}
.team-section {
display: flex;
width: 100%;
border: 2px pink solid;
}
.images-container {
display: flex;
max-width: 100%;
padding: 0 1%;
border: 1px solid pink;
}
<DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BigStart Company Homepage</title>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header-content">
<!-- Content: logo + nav bar on right -->
<img src="./images/bigstart2.png" id="logo">
<div id="spacer"></div>
<nav>
<ul>
<li>
About
</li>
<li>
Products
</li>
<li>
Team
</li>
</ul>
</nav>
</div>
</header>
<div class="main">
<!-- Mission Statement -->
<div class="mission-section">
<div class="mission-content">
<h1 class="mission-motto">We take your company from idea to reality.</h1>
</div>
</div>
<!-- TEMP
<div class="temp">
<h1> hi </h1>
</div> -->
<!-- Images of Features -->
<div class="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/startup-square.jpg">
</div>
<div class="content">
<h2>The concept.</h2>
<h3>We take that idea...</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./images/metaverse.jpeg">
</div>
<div class="content">
<h2>The future.</h2>
<h3>... and turn it into the next big thing.</h3>
</div>
</div>
</div>
</div>
<!-- Team -->
<div class="team-section">
<div class="team-center">
<h1> hi </h1>
</div>
<div class="images-container">
<div class="image-container">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
</div>
</div>
</div>
</main>
</body>
</html>
Reference from w3schools.
I think it is very important to add to #Yong's answer that background-color does not inherit. Therefore the default background-color value for ALL elements is transparent regardless of parent background-color.
So setting your HTML element background-color to
html {
:
background-color: #fffcf6;
}
does not then set the body and all other enclosing elements to this color, they will all remain transparent.
The way to solve your problem is to change the value of the header background-color; as #Yong said it is defaulting to transparent when you run your code. Giving it any other value will solve it. E.g to have it same color as the rest of the page:
header {
display: flex;
align-items: center;
/*margin:0 auto;*/
position: fixed;
width: 100%;
z-index: 100;
top: 0px;
border: 2px pink solid;
background: #fffcf6;
}
Here are some useful references from developer.mozilla and w3schools about the background-color property.
At #media only screen and (max-width: 991px) the content gets aligned centered. The eye icon which is positioned absolute gets way off. On large devices it is ok but col-sm-12 and below its position has problem.
The reason why i positioned it absolute is that i want the icon to not move. In the original code there is a functionality to hide and show password and the icon moved based on the length of the text.
.card-plans {
-webkit-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
-moz-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
transition: 0.3s;
border: 1px solid grey;
}
.container-plans {
padding: 5px 28px 5px 28px !important;
}
.cred-title {
text-align: center;
font-size: 20px !important;
font-weight: bold;
}
.details {
font-size: 16px !important;
}
.details:not(:last-of-type) {
margin-bottom: 10px !important;
}
.current-plan {
font-size: 18px;
background: yellowgreen;
padding: 3px 15px;
display: inline-block;
}
.e {
margin-top: 50px;
margin-bottom: 20px;
}
.pass {
cursor: pointer;
}
.stars {
position: relative;
top: 0.45ex;
}
.x {
position: absolute;
/* top: 78px; */
left: 300px;
}
.card-plans {
border-radius: 10px;
}
#media only screen and (max-width: 991px) {
.center {
margin: 0 auto;
text-align: center;
}
.x {
position: absolute;
left: 600px;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="e">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Credentials</p><br>
<div class="center">
<p class="details"><strong>Username:</strong> Joha Lee</p>
<p class="details"><strong>Password:</strong>
<span class="stars">****************************</span>
<i class="x fa fa-eye" aria-hidden="true"></i>
</p>
<br>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Current Plan </p><br>
<div class="center">
<p class="details"><strong>Type:</strong> Dxx Emails</p>
<p class="details"><strong>Plan Cost:</strong> 3332/ Month
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
When position absolute, make sure you have a good relative.
I placed your eye in the password xxxx field. And made that relative.
No media query is needed then.
.card-plans {
-webkit-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
-moz-box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
box-shadow: 0px -2px 5px 0px rgba(217,214,217,1);
transition: 0.3s;
border: 1px solid grey;
}
.container-plans {
padding: 5px 28px 5px 28px !important;
}
.cred-title {
text-align: center;
font-size: 20px !important;
font-weight: bold;
}
.relative {
position: relative
}
.details {
font-size: 16px !important;
}
.details:not(:last-of-type) {
margin-bottom: 10px !important;
}
.current-plan {
font-size: 18px;
background: yellowgreen;
padding: 3px 15px;
display: inline-block;
}
.e {
margin-top: 50px;
margin-bottom: 20px;
}
.pass {
cursor: pointer;
}
.stars {
position: relative;
top: 0.45ex;
}
.x {
position: absolute;
right: -25px;
}
.card-plans {
border-radius: 10px;
}
#media only screen and (max-width: 991px) {
.center {
margin: 0 auto;
text-align: center;
}
.x {
position: absolute;
right: -25px;
}
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="e">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Credentials</p><br>
<div class="center">
<p class="details"><strong>Username:</strong> Joha Lee</p>
<p class="details"><strong>Password:</strong>
<span class="stars relative">****************************<i class="x fa fa-eye" aria-hidden="true"></i></span>
</p>
<br>
</div>
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-5">
<div class="card-plans">
<div class="container-plans">
<br>
<p class="cred-title">Current Plan </p><br>
<div class="center">
<p class="details"><strong>Type:</strong> Dxx Emails</p>
<p class="details"><strong>Plan Cost:</strong> 3332/ Month
</p>
<br>
</div>
</div>
</div>
</div>
</div>
</div>
I have a couple of issues with this code:
1. The fourth div is being seemingly squished. Its height is smaller than the other divs.
2. The height of the container div doesn't change to 50%. I used wv, but I'm not sure why % doesn't work.
https://codepen.io/anon/pen/drERNr
.container {
background: blue;
width: 75%;
height: 50vw;
}
.box {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin: 2px;
float: left;
text-align: center;
}
#box4 {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin-top: 2px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>prac</title>
</head>
<body>
<div class="container">
<div id="one" class="box">
<p>One</p>
</div>
<div id="two" class="box">
<p>Two</p>
</div>
<div id="three" class="box">
<p>Three</p>
</div>
<div id="box4">
<p>four</p>
</div>
</div>
</body>
</html>
Your fourth element is being squashed because you float the first three elements to the left, but don't 'reset' the float. This can be achieved with a clearfix:
#box4:before {
content: "";
display: table;
clear: both;
}
.container {
background: blue;
width: 75%;
height: 50vw;
}
.box {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin: 2px;
float: left;
text-align: center;
}
#box4:before {
content: "";
display: table;
clear: both;
}
#box4 {
width: 20%;
background: #333;
color: white;
font-size: 25px;
font-family: 'helvetica';
border: 1px solid blue;
margin-top: 2px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="index.css">
<title>prac</title>
</head>
<body>
<div class="container">
<div id="one" class="box">
<p>One</p>
</div>
<div id="two" class="box">
<p>Two</p>
</div>
<div id="three" class="box">
<p>Three</p>
</div>
<div id="box4">
<p>four</p>
</div>
</div>
</body>
</html>
As for why you can't use % on the .container, it's because percentage-based units inherit their value from the immediate parent (and chain upwards), yet <body> has no fixed height defined. You need a calculated height on the parent in order for the child to be able to calculate its own height as a percentage.
As you can see, my header and footers do not span the entire page, unlike my row in the center....that does(indicated by the red) my style sheet if needed is this.
html,body{
height:100%;
width:100%;
margin: 0px;
padding: 0px;
}
#blogheader{
background-color: green;
height: 57%;
margin: 0px;
}
Any help is greatly appreciated!, I have been stuck on this for about an hour now. I have no clue why this is happening. I am using bootstrap. But the only row/col combo I have is in the center where the three icons are.
You mention you are using Bootstrap.
I can reproduce the error which seems to be be because the 'blogheader in not in a .row wrapper.
Codepen Demo
Without .row view # fullscreen
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.container-fluid {
height: 100%;
}
#blogheader {
background-color: green;
height: 50px;
margin: 0px;
}
.col-sm-4 {
height: 50px;
background: pink;
border: 1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div id="blogheader"></div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
With .row view # fullscreen
html,
body {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
}
.container-fluid {
height: 100%;
}
#blogheader {
background-color: green;
height: 50px;
margin: 0px;
}
.col-sm-4 {
height: 50px;
background: pink;
border:1px solid grey;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div id="blogheader"></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
</div>
Try:
html, body {
height:100px;
width:100vw;
margin: 0px;
padding: 0px;
}
On the header, I need to have
the logo be located the left side of the banner (without space)
Both banner and logo be always in the middle of the page (regardless of screen size)
Also have four images that should always be on the top right side of
the window (regardless of screen size)
Demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.form-control{
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5;
}
#logo{
float:right;
}
#media screen and (min-width: 480px) {
#logo{
float:left;
}
}
#media screen and (min-width: 768px) {
#logo{
float:left;
}
}
.searchinput{
height: 40px;
border:#000 1px solid;
box-shadow: none;
margin-bottom:10px;
}
.btn-search{
background: #777;
width:95%;
height: 40px;
border: 1px solid #777;
border-radius: 4px;
padding:8px 50px;
display: inline-block;
text-align: center;
color: #fff;
font-weight: 100;
letter-spacing: 0.05em;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
}
.btn-search:hover{
color: #fff;
text-decoration: none;
border-color: #3c3c3c;
background: #3c3c3c;
box-shadow: none;
}
.btn-search:a{
padding-top: 50px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" >
<div class="col-md-9 col-sm-9 col-xs-2">
<div id="banner">
<div id="logo" style="margin-right:0px;">
<img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
</div>
<img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC"></div>
</div>
</div>
</div>
<div class="col-md-3">
<div id="images" style="float:right;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
</div>
</div>
</div>
Update
So far, I could put the images on the top right of the window.
<div class="container-fluid">
<div class="row">
<div class="col-md-9 col-sm-9 col-xs-2">
<div id="banner">
<div id="logo" style="margin-right:0px;">
<img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
</div>
<img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC"></div>
</div>
<div class="col-md-2 col-sm-3 col-xs-10">
<div id="images" style="float:right; position: absolute;
right: 0;
top: 5px;
z-index: 9999;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
</div>
</div>
</div>
</div>
you misplaced one div
you no wrong in one div that you forgot to put it try to check in advance
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.form-control{
-webkit-border-radius: 5;
-moz-border-radius: 5;
border-radius: 5;
}
#logo{
float:right;
}
#media screen and (min-width: 480px) {
#logo{
float:left;
}
}
#media screen and (min-width: 768px) {
#logo{
float:left;
}
}
.searchinput{
height: 40px;
border:#000 1px solid;
box-shadow: none;
margin-bottom:10px;
}
.btn-search{
background: #777;
width:95%;
height: 40px;
border: 1px solid #777;
border-radius: 4px;
padding:8px 50px;
display: inline-block;
text-align: center;
color: #fff;
font-weight: 100;
letter-spacing: 0.05em;
box-shadow: inset 0 -3px 0 rgba(0,0,0,.1);
}
.btn-search:hover{
color: #fff;
text-decoration: none;
border-color: #3c3c3c;
background: #3c3c3c;
box-shadow: none;
}
.btn-search:a{
padding-top: 50px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row" style="background-color:orange;">
<div class="col-md-9">
<div id="banner" style="margin-left: 49%;">
<img height="40px" width="40px" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA">
<img height="40px;" width="300px;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-32Ge8DaAq_81IBLPFdRWmKVYgvN9YyDKKjXh6CTTpgey8qbC">
</div>
</div>
<div class="col-md-3">
<div id="images" style="float:right;">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_FCNfsR_UhKGdOTtUKK8XfQXKnlgw5Q0jaBbdiCSBTnCoaGgqIA" width="20px" height="20px"/>
</div>
</div>
</div>
</div>
</body>
</html>
I updated your fiddle to your needs. if you do it like this you don't even need a media query!
Please pay attention to the new added class google for the google image and the removed width property
http://jsfiddle.net/b9tbxtLb/16/
#logo{
display: inline-block;
}
.google {
display: inline-block;
}
#banner {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
transform: translateX(-50%);
display: inline-block;
text-align: center;
width: 100%;
}
#images img{
display: inline-block;
text-align: right;
}
#media screen and (min-width: 480px) {}
although i think you would be able to solve it on your own, with so many approaches provided ;)
how about centering inline-block?
#banner-container {
text-align: center;
}
#banner {
display: inline-block;
white-space: nowrap;
}
Just remove all the css which is not required and use only below snippets,
refer to the link below Here.
#image {
float: right;
position: absolute;
right: 0;
top: 5px;
max-width: 20%;
}
#logo {
margin-left: 10%;
float: left !important;
max-width :60%
}
and it will solve your issue if you remove the unwanted divs in the HTML part