Arranging 2 Divs next to each other and optimizing CSS code for efficiency

I’ve been delving into the world of CSS for a couple of months now, and I’ve hit a roadblock trying to align these two divs on the same line. My logo fits perfectly on the header bar, but I can't seem to get my login button to cooperate. Any tips on how to streamline my CSS code to achieve the same result would be greatly appreciated!

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
*{
    margin: 0px;
    padding: 0px;
}
.headerMenu {
    background-color: #00B9ED;
    height: 60px;
    border-bottom: 0px;
    padding-left: auto;
    padding-right: auto;
    width: 100%;
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
}
#logo {
margin-left: 15%;
}
#logo a {
    padding-top: 3px;
    height: 38px;
    font-size: 35px;
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
    color: #FFFFFF;
}
#nav {
  width: 100px;
  height: 40px;
  background-color: #00B9ED;
  moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border: 3px solid #e5e5e5;
  padding: 5px;
  font-family: 'Oswald', sans-serif;
  color: white;
  text-align: center;
  margin-left: 60%;
}
#nav p {
margin-top: 8%;
}
#nav a {
color: white;
}

#nav a:link {text-decoration:none}
#nav a:visited { text-decoration:none}
#nav a:hover {text-decoration:none; opacity: 0.6;}
<!DOCTYPE html>
<html>
<head>
<title>Daily Quotes</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
    <div class="headerMenu">
            <div id="logo">
                <h2><a href="#">Daily Quotes</a></h2>
            </div>
<div id="nav">
<p><a href="#">login</a></p>
</div>
    </div>
</body>
</html>

Answer №1

Consider adding the CSS property float:left; to your #logo element.

#logo {
    margin-left: 15%;
    float:left;
}

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
*{
    margin: 0px;
    padding: 0px;
}
.headerMenu {
    background-color: #00B9ED;
    height: 60px;
    border-bottom: 0px;
    padding-left: auto;
    padding-right: auto;
    width: 100%;
    -webkit-box-shadow: 0px 0px 8px 0px #000000;
    -moz-box-shadow: 0px 0px 8px 0px #000000;
    box-shadow: 0px 0px 8px 0px #000000;
}
#logo {
margin-left: 15%;
     float:left;
}
#logo a {
    padding-top: 3px;
    height: 38px;
    font-size: 35px;
    font-family: 'Oswald', sans-serif;
    text-decoration: none;
    color: #FFFFFF;
}
#nav {
  width: 100px;
  height: 40px;
  background-color: #00B9ED;
  moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border: 3px solid #e5e5e5;
  padding: 5px;
  font-family: 'Oswald', sans-serif;
  color: white;
  text-align: center;
  margin-left: 60%;
}
#nav p {
margin-top: 8%;
}
#nav a {
color: white;
}

#nav a:link {text-decoration:none}
#nav a:visited { text-decoration:none}
#nav a:hover {text-decoration:none; opacity: 0.6;}
<!DOCTYPE html>
<html>
<head>
<title>Daily Quotes</title>
<link rel="stylesheet" type="text/css" href="./css/style.css" />
</head>
<body>
    <div class="headerMenu">
            <div id="logo">
                <h2><a href="#">Daily Quotes</a></h2>
            </div>
<div id="nav">
<p><a href="#">login</a></p>
</div>
    </div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

After I subscribe, why do the variables of my object become undefined?

Just starting out with Angular and using Angular9. I attempted to subscribe to an observable in the following code: I have a service that makes an HTTP request and returns an Observable. The subscription appears to be working fine. ngOnInit() { this.in ...

Is it possible to rotate the caret in the dropdown 180 degrees using only CSS?

Is there a way to achieve a 180° rotation of the caret in a dropdown menu upon clicking it, creating the illusion of an animation? I would prefer to accomplish this using CSS only, without the need for JavaScript, but I am open to any suggestions. .se ...

Try incorporating the <code> tags or a similar method in ReactJS when using JSX

I've been experimenting with ReactJS and JSX to develop a prototype for a styleguide. One issue I encountered is that JSX seems to be ignoring my <code> tags, instead of displaying the raw HTML code needed to call components. Here's what ...

Using PHP foreach loop to create bootstrap 4 cards

I am attempting to showcase all of my shop items on my webpage using Bootstrap 4 cards. I want them to be displayed in a grid format, three wide and however many deep (I may consider adding pagination later). Currently, I have a PHP foreach loop that succ ...

Combining two divs to share the same linear gradient and shadow effect

Greetings to all our valued partners! I am seeking guidance on how to achieve the following task for a web application I am developing: Within my webapp, I have designed a stylish NavBar similar to the examples depicted in the images (in AdobeXD it is di ...

Unable to locate a specific div element using Selenium in Python, encountering a NoSuchElementException

Hello, I'm new to Python and still learning the ropes. Currently, I am attempting to locate something on a particular website. Here is what I'm looking for: <div class="price">$ 1.67<span class="discount">-19.71%&l ...

When the web browser page is zoomed out (Ctrl -), elements do not appear to float

Can you test resizing the window to the minimum (CTRL-)? Here's the link: http://jsfiddle.net/Zty9k/13/ This is the HTML code: <ul> <li><img src="http://i.imgur.com/PBuDAFH.gif"></li> <li><img src="http://i.i ...

Compact NiceScroll Scroller within a narrower div compared to the width of the scrolled div

I am currently working on a table layout where I have fixed two columns on the left, similar to what is shown in this example. To enhance the scrolling experience, I am using the nicescroll plugin. However, I have encountered an issue where the plugin be ...

Sequence of loading unique CSS skin for MediaWiki

Running a MediaWiki site with a personalized skin, I've noticed that the CSS code from my custom skin is being overshadowed by the default MediaWiki CSS. Is there a way to modify the sequence in which the CSS code is loaded? ...

Tips for creating JSON using AngularJs to store tabular information

I successfully created an HTML page using AngularJS. <form name="target" ng-submit="createAllKeywordsJSON(codeMasterList)"><!-- createAllKeywordsJSON() --> <input type="submit" value="Save" class="myButton" name="submit" style="margin: ...

After attempting to read in this JSON text string, it is stubbornly refusing to display properly with a line break

I have a snippet of text stored in a JSON file that appears like this "I want a new line\nhere". This is the code I am using to display the text after replacing the \n with a <br />: <p className="subtitle is-5 has-text-w ...

I'm wondering why my positive numbers aren't displayed in green and negative numbers in red

I am currently working on a commodities quotes widget. I have already set up the 'Current' and '24-hour' divs, but I'm facing an issue where positive values are not displaying in green and negatives in red as intended. I have check ...

Adjust the size of the div to match its parent's size when resizing

Can a div be resized to match its parent's size on window resize? Here is the current HTML code: <div class="sliderContainer"> <div id="cyler"> <div class="cy1" style="background-image:url(images/Keggy_Banner_Ie.jpg); back ...

Is there a way to display the button only when the user is able to enter an email in the input field?

I have a form for users to update their profile and a button to delete their account. I want the delete account button to only be visible if the user enters their email. $(document).ready(function() { var user_email = $('input[name="emp_email"]&a ...

Problem with Jsdom retrieving document

I am struggling to utilize jsdom for loading a local HTML file. Here is the code snippet: var config = { file: "filename", scripts: ["node_modules/jquery/dist/jquery.min.js"], done: function(err, window){ con ...

Accessing JavaScript results in PHP

Hello everyone! I am working on creating a dropdown menu for selecting time using JavaScript to get the computer's current time. My goal is to have an output that automatically selects the option in the dropdown if it matches the computer's time. ...

There are currently no articles found that match the search query

Recently, I started working with Django, but I am facing an issue with slug. Whenever I send a request to the Slug, I encounter an error. The error message I receive is: Articles matching query does not exist. Furthermore, I am facing another error while ...

Adjusting the rotation transform by deleting and reapplying canvas is causing the chart to not display data after redrawing

I am facing a challenge with my previous issue and I am exploring different solutions. One approach I am considering is to remove the canvas element completely and then re-add it, effectively resetting all rotations on the canvas. Although this method alm ...

What is the reason behind the label value persistently showing up after the page is refreshed?

Why is the data that I deleted from the database still showing in the label? Even after running the delete function and reloading the page. The label should not have any value once the data is deleted. Here is my code: $(document).on('click', ...

The clash between CSS's 'snap-scroll' and jQuery's '.animate scrollLeft' functionality

My HTML and CSS slider utilizes the scroll-snap feature for manual scrolling along with jQuery buttons for automated scrolling. However, I have encountered an issue where using scroll-snap-type: x mandatory; causes severe lag in the jQuery scrollLeft anima ...