I just made my website header and now I'm trying to build the side bar, however instead of sticking to the left, it's being pushed to the right and I don't know why... but I guess it's because of the float elements that I added in the header? I've tried setting the margins to 0, floating it to the left, and nothing works.
Here's the code:
body {
font-size: 62.5%;
}
:root {
--color-primary: #b22222;
}
/* Box */
#box {
margin: 2% 20%;
}
/* Header */
#header {
background-color: var(--color-primary);
width: 100%;
height: 100px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.oldenhook_icon {
height: 90px;
width: 90px;
margin-left: 15px;
float: left;
}
.header_h1 {
color: #800000;
font-family: "Noto Sans Mono", monospace;
font-size: 2.5rem;
font-weight: 900;
display: inline-block;
margin-left: 30%;
margin-bottom: 0;
}
.flexbox {
display: flex;
flex-direction: row;
float: right;
list-style-type: none;
margin-right: 22%;
}
.list-item {
color: #fff;
padding-left: 5px;
text-decoration: none;
font-size: 12px;
font-family: "lucida grande", tahoma, verdana, arial, sans-serif;
}
/* Search box */
#searchbox {
top: 40px;
position: relative;
}
<div id="box">
<div id="header">
<i
><img
class="oldenhook_icon"
src="icons/icon2.png"
alt="The Oldenhook Icon"
/></i>
<div>
<h1 class="header_h1">[ oldenhook ]</h1>
<ul class="flexbox">
home
search
global
social net
invite
faq
logout
</ul>
</div>
<div id="searchbox">
<label for="email">Email:</label>
<input name="email" id="email" type="text">
<p>oifjqoifjq</p>
<p>ofijqofiqjf</p>
</div>
</div>
Your code is fine just remove float: right; from class flexbox in css
I think you can add position: absolute; to class .flexbox{}
Related
So I made a post similar to this one, since I didn't get a precise answer and didn't understand the instructions. So I am once again asking for your support.
There are a couple of issues regarding my nav bar that I am unable to fix. One of them is a button sticking inside of the nav bar, but it doesn't even belong in the div class.
Navigation Bar
The second issue is that I can't line the logo/text [SINUS] and the links together in one line.
Any help would be appreciated!
/*====================
The CSS File
Section 1:
Buttons
=====================*/
button {
background-color: #358cf0;
border: none;
border-radius: 18px;
text-align: center;
text-decoration: none;
opacity: 0.8;
font-size: 14px;
color: rgb(255, 255, 255);
padding: 12px 48px;
transition: 0.3s;
outline: none;
}
button:hover {
opacity: 1;
}
ul li {
display: inline-block;
padding: 10px;
font-size: 20px;
font-family: raleway;
}
ul li:hover {
color: orange;
}
/*====================
The CSS File
Section 2:
Alerts
=====================*/
.container {
position: fixed;
top: 74%;
right: 0;
left: 77%;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: basic;
}
.modal {
width: 40%;
min-width: 20rem;
background-color: #ffffff;
border-radius: 12px;
}
.modal-header {
display: flex;
align-items: center;
border-top-left-radius: 12px;
border-top-right-radius: 12px;
background-color: #358cf0;
padding: 8px 10px;
color: #fff;
font-size: 110%;
font-weight: 600;
font-family: basic;
}
.modal-content {
padding: 1rem;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.modal-footer {
text-align: center;
}
/*====================
The CSS File
Section 3:
Body etc.
=====================*/
body {
background-color: #252036;
}
#navigation-container {
width: 1200px;
margin: 0 auto;
height: 70%;
}
.navigation-bar {
background-color: #1c172c;
position: fixed;
width: 100%;
left: 0;
top: 0;
text-align: right;
}
.navigation-bar ul {
padding: 0px;
margin: 0px;
text-align: right;
display: inline-block;
vertical-align: top;
}
.navigation-bar li {
list-style-type: none;
padding: 0px;
display: inline;
text-align: right;
}
.navigation-bar li a {
color: black;
font-size: 16px;
font-family: basic;
text-decoration: none;
line-height: 70px;
padding: 5px 15px;
opacity: 0.7;
}
#menu {
float: right;
}
/*====================
The CSS File
Section 4:
Text
=====================*/
#font-face {
font-family: basic;
src: url(Helmet-Regular.ttf);
}
h1 {
font-family: basic;
color: white;
font-size: 390%;
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sccp.css">
<title>Sinus - 【Home】</title>
<link rel="icon" href="titl.ico">
<link rel="apple-touch-icon" href="titl.ico" />
</head>
<body>
<div class="navigation-bar">
<div id="navigation-container">
<h1>SINUS</h1>
<ul>
<li>Home</li>
</ul>
</div>
</div>
<button>Download</button>
<div class="container" role="alert">
<div class="modal">
<div class="modal-header">
UPDATE! Sinus 1.0v
</div>
<div class="modal-content">
Here new stuff go gogogo
<br>Read more...
</div>
<div class="modal-footer">
</div>
</div>
</div>
</body>
</html>
To align the logo and links, use flex on the #navigation-container:
#navigation-container {
display: flex;
justify-content: space-between;
align-items: center;
}
justify-content: space-between will put the maximum space between the contents - in this case your logo and ul that contain the links. align-items:center lines them up vertically.
https://codepen.io/doughballs/pen/RwPrYoX
Not sure what your issue with the button is but because your nav has position:fixed, it is being taken out of the flow of the page, so the button doesn't 'know' it is there. If you wanted it to sit under the nav, you need to add a container with margin-top to push it down. But I'm not sure what your issue is with it, clarify and I'll amend the codepen.
I am making a mock website as I learn to code and I cannot figure out how to center my "View my Work" button in CSS. I have looked at other issues people were having with this on Stack Overflow and I have tried wrapping it in a div and I have tried using input[type="button"] but still not getting anywhere.The second option allows me to move the button a little bit to the right but then stops and I can't get it all the way in the center.
The issue is at maximum screen width (#media screen and (min-width: 992px)).
A second issue I am having is that I want my background picture to have the opacity but not the heading and text in button on top of it. I do not know how to stop the opacity in the text. Thanks guys!
Here is the HTML:
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css.css">
<title> Sankyeat Kumar | Web Developer </title>
</head>
<body>
<div id="menu">
<div>Home</div>
<div>Portfolio</div>
<div>Blog</div>
<div>Contact</div>
</div>
<div id="banner">
<div id="heading">
<h1> Sankyeat Kumar</h1>
<h4>London Based Web Developer For Hire</h4>
</div>
<div id="button">
<input type="button" value="View My Work" class="portfolio">
</div>
</div>
<div id="section-a">
<h2> Services </h2>
<div id="services">
<div class="sections">
<h3>Web Design</h3>
<p class="section-para">Freelance-Creator offers an exceptional variety of web design services to suit everybody, whether you're self employed or a small business, I can come up with a quality website to suit your needs. </p>
</div>
<div class="sections">
<h3>Responsive Web Sites </h3>
<p class="section-para">With everybody on the go with mobile & tablet devices it is important to make sure your website is accesible on the go. Responsive websites are also a cheaper alternative to a phone app! </p>
</div>
<div class="sections">
<h3>SEO & Marketing </h3>
<p class="section-para">SEO (Search Engine Optimisation) is important when it comes to creating an online presence for your website. We offer simple, cost effective and proven marketing results to all of our clients. </p>
</div>
<div class="sections">
<h3>CMS Solutions</h3>
<p class="section-para">Take full control of your website, whether it be a simple text modification, to an image upload or to adding 100's of products, we will find the right CMS solution for you, that is simple and user friendly. </p>
</div>
</div>
</div>
<div class="container">
<h2>Contact me</h2>
<form action="/action_page.php">
<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<label for="subject">Subject</label>
<textarea id="subject" name="subject" placeholder="Write something.." style="height:200px"></textarea>
<input type="submit" value="Submit">
</form>
</div>
</div>
</body>
Here is the CSS:
body {
margin:0px;
padding:0px;
box-sizing: border-box;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#media screen and (min-width: 320px) {
#menu {
display:flex;
background-color: black;
max-height:50px;
max-width:100%;
}
#menu div {
margin: 0 auto;
color: ##678F99;
padding:10px;
}
#menu div a {
color:white;
text-decoration: none;
font-size: 1.5em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#menu div a:hover {
text-decoration: underline;
}
#banner {
height:100vh;
width:100%;
}
#heading {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#banner #heading h1 {
color:black;
font-size: 4em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
text-align: center;
z-index: 1;
}
#banner #heading h4 {
color:black;
z-index: 1;
padding: 0 40px;
text-align: center;
font-size: 2em;
}
.portfolio {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 20px;
padding:10px;
background-color: black;
color: white;
border-radius: 4px;
position: relative;
left: 143px;
}
#heading h4 {
color: white;
font-size: 3em;
font-weight: normal;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
bottom:50px;
}
#section-a > h2 {
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
}
#section-a {
background-color: #5F5F5F;
}
#section-a h2 {
color:white;
}
#services {
display:flex;
flex-wrap: wrap;
color: white;
}
.sections {
padding: 0 20px;
}
.sections h3 {
text-align: center;
}
.section-para {
text-align: justify;
}
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
}
only screen and (min-width: 768px) {
}
#media screen and (min-width: 992px) {
#menu {
display:flex;
background-color: black;
max-height:50px;
max-width:100%;
}
#menu div {
margin: 0 auto;
color: ##678F99;
padding:10px;
}
#menu div a {
color:white;
text-decoration: none;
font-size: 1.5em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#menu div a:hover {
text-decoration: underline;
}
#banner {
height:100vh;
width:100%;
background-image: url('images/london.jpg');
opacity: 0.5;
background-size: 100% 100%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
z-index: 0;
}
#heading {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
#banner #heading h1 {
color:black;
font-size: 5em;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: normal;
z-index: 1;
}
#banner #heading h4 {
color:black;
z-index: 1;
padding: 0 40px;
text-align: center;
}
.portfolio {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 30px;
padding:10px;
background-color: black;
color: white;
border-radius: 4px;
display: flex;
justify-content: center;
}
input[type="button"] {
position:relative;
right:350px;
}
#heading h4 {
color: white;
font-size: 3em;
font-weight: normal;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
bottom:50px;
}
#section-a {
margin-top: -33px;
margin-bottom: 30px;
}
#section-a > h2 {
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
padding-top: 100px;
}
#services {
display:flex;
flex-wrap: nowrap;
margin-bottom: 80px;
}
.sections {
padding: 0 20px;
margin-bottom: 150px;
}
.sections h3 {
text-align: center;
}
.section-para {
text-align: justify;
}
.container {
margin-top: -80px;
}
input[type=text], select, textarea {
width: 100%; /* Full width */
padding: 12px; /* Some padding */
border: 1px solid #ccc; /* Gray border */
border-radius: 4px; /* Rounded borders */
box-sizing: border-box; /* Make sure that padding and width stays in
place */
margin-top: 6px; /* Add a top margin */
margin-bottom: 16px; /* Bottom margin */
resize: vertical /* Allow the user to vertically resize the textarea
(not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #45a049;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
}
you should try setting the following property for the button
display:inline-block;
position:static
margin-auto;
and don't forget to set it's parent width to 100%;
Hope It Helps
I'm trying to align my input sections in the center of the div, with the labels left aligned on the left of the input. I can't seem to get the input sections to align to the left of each other, in the center of the div. Bear with me, I'm incredibly new to coding of any sort so my code might not be the best.
Here is my html and css thus far:
This is what I would like it to look like. Label on the left, input field in the center. IMG
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: medium;
font-weight: bold;
display: block;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
<body class="body">
<div class="othercomponent">Plot Name <input class="lpks-input"></div>
<div class="othercomponent">Other Name <input class="lpks-input"></div>
</body>
Here is a JSFiddle to show what I have now:
https://jsfiddle.net/h8vo2opv/
You can use width for div. And place <label> for your text in left section and put style float:left;
set width for label and input section also. check my code this will help you.
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width:100%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
/* font-size: medium; */
font-weight: bold;
display: block;
align-items: center;
background: wheat;
}
.othercomponent input {
width: 60%;
float:left;
}
.othercomponent lebel {
float: left;
width:30%;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
<body class="body">
<div class="othercomponent"><lebel>Plot Name </lebel><input class="lpks-input"></div>
<div class="othercomponent"><lebel>Other Name </lebel><input class="lpks-input"></div>
</body>
If i understood well :) you want them in center of white div :
HTML :
<body class="body">
<div class="othercomponent">
<span class="left">Plot Name </span> <span class="center"><input class="lpks-input"></span></div>
<div class="othercomponent">
<span class="left">Plot Name </span> <span class="center"> <input class="lpks-input"></span></div>
CSS:
.body {
background-color: #EDEDED;
}
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: small;
text-align:center;
font-weight: normal;
display: block;
}
.lpks-input {
width: 35%;
display: inline-block;
padding-right: 5px;
}
.left{
float:left;
}
You can add a bit of markup and then style your form like a table. This will line up the inputs based on the label widths.
.form {
display: table;
}
.othercomponent {
background-color: white;
height: 30px;
border-radius: 10px;
width: 95%;
margin: 0 auto;
margin-top: 10px;
text-indent: 10px;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: medium;
font-weight: bold;
/* display: block; */
display: table-row;
}
.lpks-input {
/* width: 35%; */
display: inline-block;
padding-right: 5px;
}
label,
.input-container {
display: table-cell;
vertical-align: middle;
}
<body class="body">
<form>
<div class="othercomponent"><label for="input1">Plot Name</label><div class="input-container"><input id="input1" class="lpks-input"></div></div>
<div class="othercomponent"><label for="input2">Other Name</label><div class="input-container"><input id="input2" class="lpks-input"></div></div>
</form>
</body>
I just finished doing HTML/CSS with Codecademy. One of the "projects" there is to make your own resume. I took the HTML/CSS from that project, and I'm tweaking it to make the resume look better. I'm currently trying to put one div - the part of the resume where text about my career objective will go - under another div, the header. It is, however, not working. The div for the "objective" is currently behind the div for the header. How on earth do I get that second div for the objective to go underneath the first div?
I read something about how I should float the header div to the left and then put clear:both; in the div for the objective, but that's not working.
HTML
<div id="header">
<p id="name">My Name</p>
<p id="email">myemail#email.com</p>
</div>
<div id="objective"></div>
<div class="left"></div>
<div class="right"></div>
<div id="footer">
<p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: (123) 456-7890</p>
</div>
CSS
div {
border-radius: 5px;
}
#header {
z-index:1;
position: fixed;
width: 98%;
margin-top: -20px;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
float:left;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
a:hover {
font-weight: bold;
}
#objective {
height: 50px;
background-color: #668284;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
clear:both;
color: #ffffff;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}
For example:
<div class="div1">KSD;JSFAJ;SSD;</div>
<div class="div2">KSD;JSFAJ;SSdfaD;</div>
Css with float:
.div1 {
float: none;
}
.div2 {
float: none;
}
Css with display:
.div1 {
display: inline;
}
.div2 {
display: inline;
}
Here is the updated HTML :
<div id="header">
<p id="name">My Name</p>
<p id="email">myemail#email.com</p>
</div>
<div style="height:50px;width:98%;">
</div>
<div id="objective">Objective goes here</div>
<div class="left"></div>
<div class="right"></div>
<div id="footer">
<p>1234 Anywhere Street, Brooklyn NY 11216 | Tel: (123) 456-7890</p>
</div>
This will show the objective div underneath header div.
Also this is a link for your reference.
Here is update CSS, This show the responsive your html
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
div {
border-radius: 5px;
}
#header {
width: 98%;
margin: 0 auto;
height: 60px;
background-color: #668284;
margin-bottom: 10px;
}
#name {
float:left;
margin-left: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
#email{
float:right;
margin-right: 5px;
padding-top: 5px;
font-size: 16px;
font-family: Verdana, sans-serif;
color: #ffffff;
}
.right p {
margin-left: 5px;
margin-right: 5px;
margin-top: -10px;
font-family: Garamond, serif;
color: #000000;
}
a:hover {
font-weight: bold;
}
#objective {
height: 50px;
background-color: #668284;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
clear:both;
color: #ffffff;
}
.left {
position: relative;
float: left;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #B9D7D9;
margin-bottom: 10px;
}
.right {
position: relative;
float: right;
margin-top: 50px;
width: 49%;
height: 400px;
background-color: #F4EBC3;
margin-bottom: 10px;
}
#footer {
position: relative;
height: 50px;
background-color: #668284;
clear: both;
font-family: Verdana, sans-serif;
font-size: 14px;
text-align: center;
color: #ffffff;
}
#footer p {
position: relative;
padding-top: 15px;
}
Don't ever forget to add this code
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
So that you won't have empty space on your div
DEMO
I think its easier using bootstrap, here is the link http://getbootstrap.com/css/
What bootstrap does is that it creates containers that wrap the content of your site. It divides the site in rows. To do that you need and . With this bootstrap you can divide your rows in 12 cells.
Here is an example of how I divided my portfolio in 3 columns of 4 spaces
<div class="row">
<div class="col-md-12">
<hr>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<h3 class="text-body"><u>Block vs Inline</u>
</h3>
<p class="p-text"><span>Block Elements</span> are those who take the complete line and full width of the page creating a "box".<br>
<span>Inline Elements</span> are those who doesn´t affect the layout, just the element inside the tag.
</p>
</div>
<div class="col-md-4">
<h3 class="text-body"><u>Selectors</u></h3>
<p class="p-text"><span>Class selectors</span> are used to target elements with specific attributes<br>On the other hand, <span>id selectors</span> are just for unique elements.</p>
</div>
<div class="col-md-4">
<h3 class="text-body"><u>Responsive Layout</u></h3>
<p class="p-text"><span>Responsive Layout</span> is the combination of html and css design to make the website look good in terms of enlargement, shrink and width in any screen (<em>computers, laptops, netbooks, tablets, phones</em>). </p>
</div>
</div>
It's taken me a ridiculous amount of work to get this menu bar looking clean, which is a problem in and of itself. However, I think it's finally coming together. The problem I'm having now is three-fold.
Two questions:
When this is viewed full screen, the menu bar looks great, but as you close in the screen the "run" button drops to the bottom. What is causing this?
How come if I keep closing the window, the middle .toggle list is stacking on top of the "CodePlayer" logo? What do I need to do to make it so that when the window shrinks, the divs get to the point where they'd begin to overlap and stop?
Why is there a tiny bit of gap between the border-right and bottom-border in the middle section of my menu? I've tried 0px padding and it isn't working.
http://jsfiddle.net/ow5zq9fL/
/*-----------UNIVERSAL------------*/
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
/*-----------MENU BAR------------*/
#menuBar {
height: 40px;
background-color: gray;
max-width: 100%;
}
/*------LOGO, TOGGLES, BUTTON-----*/
#logo,
#buttonDiv,
#toggles {
vertical-align: middle;
display: inline-block;
width: 33%;
height: 18px;
}
/*-----------LOGO------------*/
#logo {
font-weight: bold;
font-size: 1em;
font-family: helvetica;
vertical-align: middle;
position: relative;
top: 12px;
left: 12px;
/* background-color: blue;
*/
}
/*-----------TOGGLES------------*/
.toggles {
text-align: center;
border: 1px solid black;
height: 20px;
position: relative;
top: -9px;
width: 300px;
left: 20px;
}
.toggles li {
list-style: none;
display: inline-block;
border-right: 1px solid black;
}
/*----------TOGGLES LIST----------*/
#resultList {
border-right: none;
}
/*-------------BUTTON------------*/
#buttonDiv {
text-align: right;
position: relative;
top: 8px;
right: 12px;
vertical-align: middle;
}
/*-----------BUTTON------------*/
#htmlList {
padding-right: 20px;
margin-left: -20px;
}
#cssList {
padding: 0 25px;
}
#jsList {
padding: 0 25px;
}
#resultList {
padding: 0 20px;
}
</style>
<div id="wrapper">
<div id="menuBar">
<div id="logo">CodePlayer</div>
<div id="toggles">
<ul class="toggles">
<li id="htmlList">HTML</li>
<li id="cssList">CSS</li>
<li id="jsList">JS</li>
<li id="resultList">Result</li>
</ul>
</div>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
</div>
Try this. I added a wrapper and applied everything from #buttonDiv to .wrapper. Then I altered it so that it was centered.
New Code:
.wrapper {
text-align: right;
position: relative;
bottom: 12px;
right: 12px;
vertical-align: middle;
}
and
<div class="wrapper">
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
Add float left
#logo, #buttonDiv, #toggles {
...
float: left;
}
http://jsfiddle.net/ow5zq9fL/4/