Issues with aligning div elements centrally

I have a dilemma with aligning two divs on my webpage. I am trying to position the second div in such a way that it is centered between the first div and the end of the page, like this:

|   |          | |    | |
|   |          | |    | |
|   |   div1   | |div2| |
|   |          | |    | |
|   |          | |    | |

The goal is to have "Div 2" perfectly centered between "Div 1" and the edge of the page. Despite my efforts, none of the methods I've tried seem to work.

Here is a snippet of my HTML code:

    <!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="teste.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="teste.js"></script>

    <title>Example</title>
</head>

<body>

    <div id="header">
        <div class="title"">Example</div>
    </div>

    <div id="main-body">
        <ul class="nav-tabs">
            <li class="active-tab"><a href="#">Home</a></li>
            <li><a href="#">Menu 1</a></li>
            <li><a href="#">Menu 2</a></li>
        </ul>

    </div>

    <div id="right-menu"></div>

    <footer>
    </footer>

</body>

</html>

And here is a part of my CSS styling:

/* Font Nunito used for the title */
@import url(http://fonts.googleapis.com/css?family=Nunito);

/*----------------------------------------------*/

/* Background color of the page */
body {
    background-color: #cccccc;
}

/*----------------------------------------------*/

/* Header */

/* Color and size */
#header {
    background-color: #669966;
    background-size: cover;
    height: 100px;
    width: 100%;
    clear: both;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Title */
#header .title {
    color: #cccccc;
    font-family: Nunito;
    font-size: 50px;
    font-style: italic;
    line-height: 46px;
    left: 60px;
    top: 30px;
    position: absolute;
}

/*----------------------------------------------*/

/* Tabs */
.nav-tabs {
    background-color: #cccccc;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

/* Tab cells */
.nav-tabs li {
    background-color: gray;
    color: white;
    font-size: 1.2em;
    padding: 10px 90px 10px 90px;
    border-radius: 8px 8px 0 0;

}

/* Active tab */
.active-tab {
    background-color: white;
    color: red;
    font-size: 1.2em;
    padding: 10px 90px 10px 90px;
    border-radius: 8px 8px 0 0;
}

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
    text-decoration: none;
}

/*----------------------------------------------*/

/* Main body (this is "div 1")*/

#main-body {
    background-color: white;
    height: 100vh;
    width: 900px;
    margin: 5px 0 5px 100px;
    display: inline-block;
}

/*----------------------------------------------*/

/* Right menu (this is "div 2") */

#right-menu {
    border: 2px solid red;
    background-color: yellow;
    height: 30px;
    width: 50px;
    display: inline-block;
}

/*----------------------------------------------*/

/* Footer */

footer {
    background-color: #333333;
    height: 200px;
    width: 100%;
    margin: 0;
    padding: 0;
}

If anyone can offer some assistance, I would greatly appreciate it!

[EDIT] Thank you to everyone who provided solutions. The issue has been successfully resolved!

Answer №1

You're almost there!

To achieve the desired layout, create two parent divs that will span the entire width of the page - one for the main column (set at around 70% width) and another for the right column (set at 30% width). Within the right column div, add a child div with a fixed width and apply text-align: center to the outer div.

Answer №2

It seems like I've understood your query, you can test the solution in this fiddle https://jsfiddle.net/9jrLat77/

The CSS code should look something like this

/* Nunito font to be used for the title */
@import url(http://fonts.googleapis.com/css?family=Nunito);

/*----------------------------------------------*/

/* Page background color */
body {
    background-color: #cccccc;
}

/*----------------------------------------------*/

/* Header styling */

/* Background color and size */
#header {
    background-color: #669966;
    background-size: cover;
    height: 100px;
    width: 100%;
    clear: both;
    margin: 0;
    padding: 0;
    position: relative;
}

/* Title formatting */
#header .title {
    color: #cccccc;
    font-family: Nunito;
    font-size: 50px;
        font-style: italic;
        line-height: 46px;
    left: 60px;
        top: 30px;
    position: absolute;
}

/*----------------------------------------------*/

/* Tabs styling */
.nav-tabs {
    background-color: #cccccc;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

/* Tab cells design */
.nav-tabs li {
    background-color: gray;
    color: white;
    font-size: 1.2em;
    padding: 10px 90px 10px 90px;
    border-radius: 8px 8px 0 0;

}

/* Active tab styling */
.active-tab {
    background-color: white;
    color: red;
    font-size: 1.2em;
    padding: 10px 90px 10px 90px;
    border-radius: 8px 8px 0 0;
}

a:link {
    color: white;
    text-decoration: none;
}

a:visited {
    color: white;
    text-decoration: none;
}

/*----------------------------------------------*/

/* Main body (referred as "div 1") */

#main-body {
    background-color: white;
    height: 100vh;
    width: 900px;
    margin: 5px 0;
    display: inline-block;
    float:left;
}

/*----------------------------------------------*/

/* Right menu section (referred as "div 2") */

#right-menu {
    border: 2px solid red;
    background-color: yellow;
    height: 30px;
    margin: 5px 0;
    width: calc(100% - 920px);
    display: block;
    float:right;
}


.content-wrapper {
    width: 100%;
}
}

Answer №3

To start, place #right-menu before #main-body:

<div id="right-menu"></div>

<div id="main-body">
        <ul class="nav-tabs">

Next, adjust these CSS properties:

#main-body {
    margin:0 auto;
    display:block;
}

#right-menu {
    position: absolute;
    right: calc(((100% - 900px) / 4) - 25px);
}

The calculation for the right: property is as follows: Subtract the main width (900px) from the full page width (100%) to determine the remaining space on both sides. Divide this by two to find the width of one side, then divide it by two again to get half the size of one side. This positions the element in the center of either side. Changing the right: property to left: will center it on the left instead. Finally, subtract half of the right menu width (50px / 2 = 25px) to center the element itself.

Answer №4

Have you considered utilizing bootstrap in your web development projects? Bootstrap is a powerful framework that simplifies the process of formatting your website. To integrate it into your code, include these lines:

The "container" in Bootstrap has a width of 12 columns. If you set the first div to a width of 5 and the second div to a width of 3, you can structure it like this:

<div id="container">
<div id="row">
<div id="col-md-5">Content for Div 1 </div>
<div id="col-md-3 col-md-offset-2"> Content for Div 2 </div>
</div> </div>

The "md" represents medium size but can be customized to xs, sm, md, or lg according to your needs. The offset is necessary to center the content within the 12-column grid when using widths of 5 and 3.

Answer №5

Implement the following code:

<style type="text/css>
 body {
  margin: 0px;
  padding: 0px;
 }

 #right {
  background-color: #ff0000;
  float: right;
  height: 500px;
  margin: 0px;
  padding: 0px;
  width: 300px;
 }

 #main {
  background-color: #0000ff;
  height: 500px;
  margin: 0px;
  padding: 0px;
  width: 900px;
 }
</style>
<div id="right"></div>
<div id="main"></div>
<script type="text/javascript">
 window.onload = setMargin;
 window.onresize = setMargin;

 function setMargin() {
  var x = window.innerWidth;
  var y = x - 900 - 300;
  var z = y / 2;

  document.getElementById("right").style.marginRight = z;
 }
</script>

Answer №6

In order to achieve the desired layout, I recommend placing a wrapping div on the right side that fills up the remaining width and then centering the menu block inside of it.

Instead of using inline-block, I opted for floats for simplicity as white-space can affect the calc values unless they are properly reset.

* {
  box-sizing: border-box;
}
/* Main body (referred to as "div 1")*/

#main-body {
  background-color: lightgrey;
  height: 100vh;
  width: 900px;
  margin-left: 100px;
  margin-right: 5px;
  float: left;
}
/*----------------------------------------------*/

/* Right-side menu wrapper (referred to as "div 2") */

#right-wrap {
  background: #bada55;
  width: calc(100% - 1005px);
  float: left;
  text-align: center;
}
#right-menu {
  border: 2px solid red;
  background-color: yellow;
  height: 30px;
  width: 50px;
  display: inline-block;
}
<div id="main-body">
  <ul class="nav-tabs">
    <li class="active-tab"><a href="#">Home</a>
    </li>
    <li><a href="#">Menu 1</a>
    </li>
    <li><a href="#">Menu 2</a>
    </li>
  </ul>
</div>
<div id="right-wrap">
  <div id="right-menu"></div>
</div>

Check out the Codepen Demo here!

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

In Google Chrome, the input types for email, URL, and search feature a thin 1px padding on the left and right sides

If you are a user of Google Chrome (the only browser I am familiar with that exhibits this behavior), please visit this example, uncheck the "Normalized CSS" box, and observe the input elements. In Google Chrome, the email, URL, and search input fields ha ...

Enhance data validation in PHP

I love using Nicedit as a text editor because it allows me to easily add bold and italic formatting to my form fields. However, when I try to store this text in my database, Nicedit adds HTML tags for bold, italic, and other formatting styles. Is there a ...

Determining the cursor location within a character in a div that is content editable using AngularJS

I am facing challenges with obtaining the cursor caret position within a contenteditable div. Currently, I am utilizing the following function : onBlurArea (field, ev) { ev.preventDefault() const editable = ev.target.childNodes[1].childNodes[2] ...

Eliminate entry upon checkbox completion from task schedule

Currently working on developing my own to-do list web application. I have set everything up except for one thing. I am trying to figure out how to remove a checkbox from the array when it is checked. Can someone please assist me in achieving this using DOM ...

Is there a way to create an internal link to another HTML templating engine page within Express.js?

I am currently facing an issue with two Pug files, index.pug and search.pug, stored in a /views folder. In my index.pug file, I have the following line of code: a(href="/search.pug") Search In my JavaScript file, I have specified the view engine as P ...

What could be causing the TailWind CSS Toggle to malfunction on my local server?

While working on designing a sidebar for a ToDo page using Tailwind CSS, I encountered an issue with implementing a toggle button for switching between dark mode and light mode. In order to achieve this functionality, I borrowed the toggling code snippet f ...

Ways to contrast HTML without considering whitespace?

I'm currently testing an HTML builder through unit testing. My goal is to confirm that the output content matches the expected content, while allowing for some leniency when it comes to white space. More specifically, I am not concerned with whether ...

Align a block vertically

Is there a way to perfectly center a div vertically? There are plenty of methods for horizontal alignment, but no matter what I attempt, getting vertical centering proves to be a challenge. body { vertical-align: middle;} No effect body {text-align ...

Incorrect viewport widths in Vue Bootstrap fluid containers

I require a container that spans 100% of the available width until it reaches a specific breakpoint (max-width). Upon exploring the official documentation, I came across the responsive fluid container, which appeared to be a suitable choice. Responsive ...

Tips for displaying an image that is embedded within a CSS file

I discovered an interesting background image embedded in a CSS file. Is there a way for me to actually view it? "iVBOR..." to "5CYII=" and saved it in a file named image.png - unfortunately, this method did not yield the desired outcome.</p> ...

Choose the offspring of an element using jQuery

Currently, I have a function set up to open a modal dialog and populate it with information from the 'dblclicked' node: $(function(){ $(".delete").live('dblclick', function () { var id = $(this).attr('id'); ...

Is there a way to enlarge images when hovered using canvas?

I came across a fascinating example at the following link: , where the images expand when hovered over. I am aware that this can be achieved using jquery, but I have concerns about its speed and reliability. I would like to experiment with d3.js, although ...

Adding a close button inside a circular background using HTML/CSS

I'm struggling to align the X inside the circle perfectly; they just don't seem to match up no matter what I try. Here's a glimpse: https://i.sstatic.net/OIZik.png html: <div class="messages"> <span class="c ...

Issue with Magnific Popup lightbox functionality, and mfp-hide is ineffective

Hello everyone, I am new to stackoverflow so please bear with me as I navigate through it. Although I am still a beginner in HTML, CSS, and JS, I have been using them for work on occasion. Recently, I implemented Magnific Popup on a website I am working o ...

Using JQuery to extract the unique identifiers of nodes within a tree view format for the purpose of storing data according to these identifiers

Using Angular to display data in the view, I have a sample code here. When a specific age group category is clicked, I want to populate a form with data and save the entire dataset, including the parent node IDs. I am facing an issue with fetching the pa ...

When attempting to access http://localhost:3000/highLightTitle.png using Next.js, a 404 error (Not Found) was encountered in the content

Despite not having any mention of GET http://localhost:3000/highLightTitle.png in my Next.js project code, I am encountering an error related to this issue. The error can be viewed here, and specifically at line 199 in content.js which can be seen here. T ...

These coding languages are becoming more popular; however, the <p> tag is nowhere to be found in the slid

Inspect and Fix the Code: Missing p tag when clicked HTML Slide up/down <div class="slideme" class="center"> <h1>Hello,</h1> <p>Can you see Me</p> </div> <but ...

Ways to create two distinct "on click" actions for a single image to execute two distinct tasks

Clicking on an image will open a slider showing all images before filtering. Once filtered, only the selected images will be displayed in the slider. <div class="gallery row" id="gallery" style="margin:0;"> <!-- Grid column --> <div ...

Make a line break occur automatically after every 7 divs are displayed

Looking to create a grid of equal height and width divs using AngularJS to form a 7x5 square: ---------------------- | | | | | | | | ---------------------- | | | | | | | | ---------------------- | | | | | | | | ---------------------- ...

What is the best way to center my dropdown menu on the page?

Discover my exclusive menu by visiting this link. For those who are curious about the source code, here's the HTML snippet: <div id='menu-container'> <ul id='menu' class="menu"> <li class='active'>& ...