What is the best way to align two divs horizontally using CSS?

.navbar {
  overflow: hidden;
  background-color: antiquewhite;
  position: absolute;
  top: 0;
  width: 100%;
}

.navbar a {
  float: right;
  display: block;
  color: Black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 22px;

}
.container {
    width: 80%;
    background: aqua;
    margin: auto;
    padding: 10px;
}

.main {
  padding: 16px;
  margin-top: 30px;
  width:1000px;
  margin-left:15px;
}

#navbarItem {
   list-style-type: none;
   margin: 0;
   padding:0;
}

li a:hover {
    background-color: #b6ff00;
    color: white;
}


.main{
    padding-top:100px;
    padding-left:100px;
    padding-right:100px;
    border: 1px solid green;
}

.navbar2{
    width:15%;
    float:left;
    border: 2px solid red;
}

Is there a way I can align the two divs (.main and .navbar2) within the container div? My goal is to have the main content and navbar side by side within the container. I plan to make the navbar fixed so it stays in place as I scroll down. I may also add a third div to the right side of the website in the future.

htmlcss

Answer №1

HTML:

    <div id="container">
        <div id="topsection">
            Top
        </div>
        <div id="bottomsection">
            Bottom
        </div>
    </div>

CSS:

    body {
        background-color: #666;
        margin: 0;
    }    
    #container {
         width: 1200px;
         margin: 0 auto;
    }
    #topsection, #bottomsection {
        border: 1px solid black;
        float: left;
        min-height: 500px;
        color: black;
    }
    #topsection {
         width: 300px;
         background-color: #222;
    }
    #bottomsection {
         width: 900px;
         background-color: #888;
    }

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

Looking to showcase your logo prominently at the center of the page, flanked by two elegant

Is it possible to create a grid-like structure with dimensions 5.5-1-5.5? I would like to center a logo on the page with two lines on the left and right. (Please excuse my limited English skills) https://i.sstatic.net/cgjfS.png ...

htmltwitter-bootstrapcss

Getting started with html2canvas: A beginner's guide

So here's a seemingly simple question... I'm diving into new territory and stumbled upon http://html2canvas.hertzen.com with a straightforward tutorial. After successfully running the command npm install -g html2canvas, I hit a roadblock. Where e ...

javascripthtmlangularnpmhtml2canvas

Extracting information from a hyperlink without the need to actually click on it

Hello, I have recently started learning JavaScript and I am looking to accomplish a specific task. Currently, I am navigating on A.com/. Within the content of A.com/, there is a link labeled as A.com/B. Upon clicking on the link A.com/B, I can see ...

javascriptjqueryhtmlajax

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 ...

htmlangulartypescript

Ways to utilize two distinct XPATH values for a single key

When dealing with Xpath for the same object in two different portals, the paths can be: //*[@id="abc"]/fieldset/div/div/div[1]/label //*[@id="xyz"]/fieldset/div[1]/fieldset/div/div/div[1]/label In order to use both values in the same key and have Seleni ...

javascripthtmlcssxpath

Should font size, line height, and font-family be declared to the body before or after the CSS reset?

Let's say I am using the Eric Meyer Reset and I need to apply a style to the body element. body { font: 100%/1.5 "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;*/ } Should I place this before or after the reset CSS? html, body, div, span, a ...

cssxhtml

Include an additional section in the stunning Radar Chart

I am trying to use the amCharts 4 library to create a Radar graph similar to this example: https://i.sstatic.net/9S0ka.png In the example, there are two categories being compared with bullets surrounding each one, right? The code I currently have is as ...

javascripthtmlamchartsamcharts4

What is the purpose behind jade disregarding line breaks and spaces when rendering code?

Utilizing Jade, I am generating HTML by executing the code var generateCodeBlock = jade.compile('div !{text}', {pretty: true});. My aim is to create the following: <div> var json = { labelA: 'a', labelB: 2 ...

javascripthtmlnode.jstemplatespug

Discovering the correct element and typing for an HTML attribute through JavaScript

We are currently working on test automation and I am looking for a way to identify the Element and Type associated with it within an html (Data-qa) attribute. For example, when looping through, the Element is identified as input and the type is radio. < ...

javascripthtmlselenium

I am facing an issue with the asynchronous function as it is displaying an error message

**I am facing an issue with displaying categories. I have attempted to do this using async function, however the data is not showing up** <div class="form-group"> <label for="category">Category</label> <select id="categor ...

htmlangulartypescript

Tips for preventing Razor from interpreting special characters as HTML code

I'm encountering an issue with special characters displaying as HTML codes on the page I'm working on. The content is retrieved from a database and shown in readonly input boxes. For example, & is displayed as &. How can I ensure that the ...

htmlasp.net-mvcrazor

Using a div in React to create a vertical gap between two React elements

I am working with two React Components in my project - the Right Column and the Left Column. I am trying to create space between them using a div tag. Currently, my setup in the App.js file looks like this: import React from 'react'; import LeftC ...

javascripthtmlreactjs

Slice the towering text in half lengthwise

Ensure that the last line of visible text fits within a 20px padding, or else it should be completely cut off. The challenge lies in the varying text lengths of h3 each time. It's difficult to predict how much needs to be trimmed. Currently, the tex ...

htmlcss

Converting JSON data retrieved from a URL into HTML format

I have a JSON output from a URL that I need to format into html. The structure of the JSON data is as follows: prtg-version "xxxxxxx" treesize 0 channels 0 name "Downtime" name_raw "Downtime" lastvalue "" lastvalue_raw "" 1 name ...

javascriptjqueryhtmljson

Ensure that the main div remains centered on the page even when the window size is adjusted

Here is the code snippet: <div id="root"> <div id="child1">xxxx</div> <div id="child2">yyyy</div> </div> CSS : #root{ width: 86%; margin: 0 auto; } #root div { width: 50%; float: left; border: ...

javascriptjqueryhtmlcss

Image carousel with interactive buttons

I've taken over management of my company's website, which was initially created by someone else at a cost of $24,000. We recently made some edits to the slideshow feature on the site, adding buttons that allow users to navigate to corresponding p ...

javascriptjqueryhtmlcssinternet-explorer

Bar graph constructed using a pair of div elements

I extracted two values from an array: $target = $data->data[2][32][3]; For this particular example, $target = 9.83%. $clicks = $data->data[1][32][3]; And in this case, $clicks = 7.15%. I have created a bar-like chart using three main div elements ...

javascriptphphtmlcss

Why does the width of my image appear differently on an iPhone compared to other devices?

I recently encountered an issue with the responsiveness of an image on my website. While it displayed correctly on Android and desktop devices, the image appeared distorted on iPhones as if the CSS width attribute was not applied properly. This problem spe ...

javascriptcssreactjs

How can the ID of a table row be retrieved if it is selected?

In my datatable, I have a list of Cars where each row contains a Car ID. A checkbox column has been added to the first cell in the table - when checked, the row is highlighted to show the user their selection. The goal is to retrieve the IDs of all selecte ...

javascriptjqueryhtml

Eliminating the need for horizontal scrolling in the window causes a change in the height of an internal DIV element

Check out this snippet of code, a simplified version of a larger piece: html, body { margin: 0 !important; padding: 0 !important; /* overflow-x: hidden; /* uncomment this line */ } .app { position: relative; width: 100%; text-align: center !important; } ...

htmlcss