Two divs positioned side by side at the center of a containing div

I'm having trouble setting up an HTML element similar to the one shown in the image. The buttons are working fine, but I am struggling to position two divs below them correctly. I have experimented with various combinations of floats, positions, and displays, but so far, nothing has worked. Unfortunately, I am restricted from modifying the navbar's CSS.https://i.sstatic.net/QliqV.png

#navbar5 {
  float: left;
  width: 35%;
}
<div id="navbar5">
  <button> abc </button>
  <button> def </button>
  <div id="one"> xxxxxxx </div>
  <div id="two"> yyyyyyy </div>
</div>

htmlcsscenter

Answer №1

#navbar5 {
  width: auto;
  text-align: center;
  float: left;
}

.centered_text {
  display: flex;
  justify-content: center;
}

#two,
#navbar5 button:last-of-type {
  margin: 0 0 0 10px;
}
<div id="navbar5">
  <button> abc </button>
  <button> def </button>
  <div class="centered_text">
    <div id="one"> xxxxxxx </div>
    <div id="two"> yyyyyyy </div>
  </div>
</div>

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

Creating a multi-line form in Python Django involves defining a form

Brand new to Django and currently working on creating a form within a page. The form consists of multiple fields, all of which are currently displayed in a single line on the page. This is the code snippet I am using in the template: <form action=&apos ...

pythonhtmldjangobootstrap-4

What is the best way to integrate a bootstrap CSS stylesheet into my Express/Node.js project?

Currently, my approach involves using the following code to fetch my html file. app.get("/", function (request, response) { response.sendFile(__dirname + "/public_html/index.html"); }) The html file contains a form with method="post" and a submit button. ...

javascriptcssnode.jsexpress

Can someone please explain how I can implement a multi-submenu feature using JavaScript?

HTML CODES: <header> <nav> <ul> <li class="asmenu"><a href="#">Menu1 <i class="fa fa-caret-down"></i></a> <ul class="submenu deact ...

javascripthtmlcsstogglesubmenu

Making the Select Tag function as an on-click event in JQuery

So I currently have a tab set up that functions as on click links when viewed on desktop. However, for tablet and mobile devices, I need it to be transformed into a select drop down list while maintaining the same functionality. Below is the code used for ...

javascriptjqueryhtmlevents

Stop the iframe video when the modal is closed

I'm currently developing a website that incorporates the code showcased in this tutorial to launch a modal window featuring an iframe for playing YouTube or Vimeo videos. The issue arises when, as mentioned in the comments on the tutorial page, there ...

javascripthtmlcss

"Struggling to divide CSS Code with PHP containing nested brackets? Here's how you can tackle it

I'm currently attempting to break down my CSS code stored in variables, but I consistently encounter issues when dealing with media queries or similar elements. While I don't require every single rule to be outlined, I am looking for a solution ...

phpcssparsing

Z-order for ClockPicker

Within my application, I've implemented a pop-up for inputting event data. One of the fields within this pop-up is for setting the time using the DateTimePicker from MUI. <Popup width={600} height={600} ...

csstypesmaterial-ui

The jQuery modal window is not appearing when trying to fade in

I want to set up a feedback form where all fields are filled out and the user has clicked the checkbox confirming they are not a robot. Once this is done, the Send button becomes active and a popup window will appear with a message saying "Thank you, we wi ...

javascriptjqueryhtml

Server-based WebRTC video streaming

Is it possible to stream a video from the client side and have other viewers join via a server? How can I achieve this setup? ...

javascriptnode.jshtmlvideo-streamingwebrtc

The navigation for Rails 5.0/Jquery Mobile is no longer responsive after a single click on the designated button

I've been struggling with this issue for a while now without any luck. The mobile navigation seems to be functioning correctly, but only when I refresh the page on my phone. After clicking on a list item, the navigation button becomes unclickable. I m ...

jqueryhtmlmobile

Adjust the width of a DIV based on the content of other DIVs, and float and center them all

Initially, what seemed like a simple task has turned out to be more complicated than I anticipated. Here is my code: <html> <head> <style> div { border-top: 1px solid black; margin: 10px; } div#all { border: 0; } </style> <body ...

htmlwidthcss

Using a variety of different font styles within a single sentence

I'm looking to add a title with text in one of my divs, but I want the title to be in 3 different font sizes. Any suggestions on how to achieve this without starting a new paragraph for each size change? Here's an example of what I'm trying ...

htmlcssfont-family

Error: The function req.checkBody is missing, despite the presence of the bodyparser and expressvalidator module

When I try to use req.checkBody in my code, I keep getting an error saying it's not a function. I have already included express-validator and body-parser in my project. Here is the snippet of my code: var express = require('express'); var ...

javascripthtmlnode.jsexpressrequest

Child's transformation leads to strange overflow scroll appearance?

What causes the vertical scrollbar to increase in size in this situation while the horizontal scrollbar remains unaffected? <div style="width:200px; height: 200px; overflow:scroll"> <div style="width: 400px; height: 400px; background-color:or ...

htmlcssoverflowcss-transforms

What is the best way to enlarge the parent element while also enlarging the child element?

I have a situation where I need to ensure that two classes have elements of the same height. When the children element's height increases, the parent element should also increase in height. The parent element has the class name .user-data and the chi ...

javascriptcss

Engaging Interactive Image/Graphic with React and HTML

Just starting out with react/html and attempting to create an interactive Graphic/Image. My goal is to have a circle highlight in color when the mouse hovers over it, and change to a different color when clicked. Is this achievable? Any advice on how to ac ...

htmlreactjssvg

Restrict HTML Elements Based on Their Size

I have a text file with a substantial amount of content that I need to display in an HTML format. The challenge is that I only want to show a portion of the text on the screen, but I am unsure of the exact amount that needs to be displayed. What I do know ...

javascriptjqueryhtmlcss

React Error: Attempting to access the 'style' property of an undefined object

Can anyone help with this issue related to React code? const sidebar = document.getElementsByClassName("pro-sidebar"); The problem occurs when trying to adjust the width using: function openNav() { sidebar.style.width = "250px";} Addi ...

cssreactjstypescript

Is there a way to transfer HTML and JavaScript data to an SQL database and then display it on the same JSP page?

My journey started with an HTML page. However, I decided to switch things up by renaming the file and giving it a .jsp extension because I plan on using JSP to complete this specific task. The task involves extracting a value from a form on the page, send ...

javasqlhtmljspjdbc

inefficient performance in linking function within the visual aspect

I am working on an Ionic 4 with Angular app, where I have implemented websockets in my ComponentA. In ComponentA.html: <div *ngFor="let item of myList"> <div>{{ item.name }}</div> <div>{{ calcPrice(item.price) }}</div> ...

htmlangularperformanceionic4