Aligning two divs of varying sizes inside a parent div

Looking for help on centering 2 menus on a menubar to ensure compatibility with IE7,IE8,IE9, Chrome, and FF. I have provided measurements for both menus based on Chrome for reference.

Menu 1:

<div id="outer-menu-bar" style="width:800px;height:32px;">  
     <div id="inner-menu" style="width:578px;height:32px;">Foo foo</div>
</div>

Menu 2:

<div id="outer-menu-bar" style="width:800px;height:32px;">  
     <div id="inner-menu" style="width:285px;height:32px;">Foo foo</div>
</div>

I attempted using the CSS style #inner { width: 50%; margin: auto; } suggested in How to horizontally center a <div> in another <div>?. However, the larger menu exceeded 50%, resulting in clipping, while the smaller one shifted 20 pixels to the left. We temporarily resolved this using jQuery during prototyping, but we want a better solution as the positioning jumps after loading.

Any suggestions or ideas?

htmlcsscentering

Answer №1

Possible solution

Explanation with colorful borders.
Click here for the visual example.

The width of 862px is greater than 800px, causing the items to not fit in a single row. To view a sample with smaller menus, visit:
Try this link for a better view.

Desired HTML Structure

<div id="outer-menu-bar" style="width:800px;height:32px;">  
    <div class="inner-menu" style="width:578px;height:32px;">Foo foo</div>
    <div class="inner-menu" style="width:285px;height:32px;">Foo foo</div>
</div>

Additional CSS Styles

#outer-menu-bar {
    text-align: center;
}

.inner-menu {
    display: inline-block;
}

Answer №2

Smamatti seems to have nailed down a great solution. I also came up with something similar, the only distinction being that I eliminated all inline styling.

http://jsfiddle.net/S1l3/YVdFq/4/

This is the HTML code:

<div id="outer-menu-bar">  
     <div class="inner-menu" >Foo fooFoo fooFoo fooFoo fooFoo fooFoo fooFoo </div>
    <div class="inner-menu" >Bar barBar bar Barbar </div>
</div>

Here's the CSS:

#outer-menu-bar
{
    text-align:center;
    background:#900;
}

.inner-menu
{
    display:inline-block;
    background:#ccc;
}

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

How to retrieve the row index from a table using JavaScript

This question has cropped up numerous times, and despite trying various solutions suggested before, none of them seem to be effective in my case. Within a modal, I have a table where users can make changes that are then used to update the database. The ta ...

javascriptphpjqueryhtmlmysql

Font size for the PayPal login button

I am looking to adjust the font size of the PayPal Login button in order to make it smaller. However, it appears that the CSS generated by a script at the bottom of the head is overriding my changes. The button itself is created by another script which als ...

javascripthtmlcsspaypalopencart2.x

Adjusting linear gradient when the color picker is modified

My website has a default linear gradient over an image, which is controlled by the following HTML and TypeScript code: <header [style.background-image]="cv2HeaderStyle('0, 0, 0, 0.1', '0, 0, 0, 0.8')"></header> cv ...

javascriptcssangular

Splitting a td tag into multiple columns dynamically with Angular

I am attempting to dynamically split the table element into separate columns. My desired layout should resemble this: https://i.sstatic.net/C81tg.png The values for name and surname are fixed at 1, but the values for subjects and grades can vary (there ma ...

javascripthtmlangulartypescripthtml-table

Aligning a lowercase "i" element within a container

Is there a more effective way to center the "i" element within this div without using specific pixel margins that adjust based on hover? Below is my code snippet: HTML: <div class="nav-collapse"> <i class="fa fa-bars fa-2x" id="bars"></ ...

javascriptjqueryhtmlcsscenter

"Enhancing Your Web Design with Ruby On Rails: Optimal Methods for Integrating CSS

I am a newcomer to Ruby on Rails and I am seeking advice on the best method to incorporate CSS/JS libraries for a specific controller and method in order to avoid unnecessary requests. Currently, I am using the following somewhat inefficient method: - # ...

javascriptcssruby-on-railsassets

Tips for positioning content next to a sidebar using basic CSS

I'm having an issue where my content is being hidden behind the sidebar and I want the sidebar to stay fixed on the left side. When I changed position:fixed to float:left in the CSS, it gave me the desired result but the sidebar isn't fixed when ...

htmlcssreactjs

Retrieving ng-repeat object in Angular

How can I retrieve the current object from an ng-repeat on ng-click without using $index? The $index method is giving me the wrong index due to my use of orderBy. Ideally, I would like to be able to click on the object (thumbnail) and have $scope.activePer ...

javascripthtmljsonangularjsangularjs-ng-repeat

Tips for Embedding External JavaScript and URLs in Joomla Protostar Template

I'm interested in incorporating a hamburger menu into my Joomla protostar template, similar to the one featured on this URL: ['https://codepen.io/PaulVanO/pen/GgGeyE'] This will provide me with a fullscreen hamburger menu for both desktop ...

javascriptphpjquerycssjoomla

Building a MultiLevel table in angularjs: A step-by-step guide

I am looking to create a table format that does not use ul li tags, structured as shown below: ----------------- # | name | ----------------- 1 | Level_1-a | 1 | Level_2.1 | 2 | Level_2.2 | 3 | Level_2.3 | 1 | Level_2.3.1| 2 | Leve ...

htmlangularjs

The CSS opacity property fails to function properly on Google Chrome

While it is functioning correctly on Firefox, there seems to be an issue with Chrome. I am attempting to have a card apply the opacity property when hovered over. Here is the HTML file: <div class="col mb-4"> <a class="text ...

htmlcssgoogle-chromebootstrap-4

Try using the statement "Assert.IsTrue" to confirm the object's position

Objective: By pressing on a custom link, you are directed to a webpage where the screen displays specific text - "Padding - Shorthand Property". The aim is to use Assert.IsTrue to ensure that the padding shorthand property and its content are within the ...

c#htmlcssselenium-webdriver

Enhance the appearance of rows in a table by adding a captivating marquee effect to those with

I'm working with a table that has 7 rows and 2 tabs for Sunday and Monday. The row corresponding to the current time is highlighted in red. I wanted to know if it's possible to add the following <marquee>My first Row</marquee> effe ...

javascriptjqueryhtml

Tips for transitioning this JavaScript code into jQuery syntax

Below is my JavaScript code: javascript: function executeCode() { var d = document; try { if (!d.body) throw (0); window.location = 'http://www.example.com/code?u=' + encodeURIComponent(d.location.href); } catch (e) { ...

javascriptjqueryhtml

Using React Native to showcase a background grid of dimensions {height: 10, width: 10}

Hey there! I'm looking to create a grid that can adapt to different device sizes and screen positions, similar to a chess grid. I want to use this as a background to help with sizing and positioning elements like text and images on the screen. Here&a ...

cssreactjsreact-nativegrid

Problems encountered with operating the Bootstrap burger menu

After following the Bootstrap navbar documentation and implementing the code in my bs-navbar.component.html file, I encountered an issue with the hamburger menu. Despite everything being set up correctly, clicking on the hamburger icon did not display the ...

htmlcssangularbootstrap-5

Changing the Size of an Image using HTML and CSS

Does anyone know how to resize images using CSS in an external style sheet instead of directly in the HTML document? I've tried searching on W3Schools but haven't been able to find a solution. I want to maintain consistent styling by resizing im ...

htmlcss

What is the best way to incorporate a progress bar animation into my notification?

Seeking assistance to implement an animated progress bar that changes colors gradually over time based on a variable [timer]. Can anyone lend a hand with this? Thank you! https://i.sstatic.net/lhgeF.png $(document).ready(function(){ window.addEvent ...

javascripthtmlcssluafivem

React - CSS Transition resembling a flip of a book page

As I delve into more advanced topics in my journey of learning React and Front Web Dev, I discovered the ReactCSSTransitionGroup but learned that it is no longer maintained so we now use CSSTransitionGroup. I decided to create a small side project to expe ...

javascriptreactjscsscss-transitionsreactcsstransitiongroup

Guide on Ensuring a Fixed Div Covers the Entire Width of the Screen

Hello everyone, I need some help with formatting my social media widgets on my website. I want them to span the entire width of the screen, align to the right, and remain fixed at the top of the page. You can check out the site totempole.ca for reference. ...

htmlcss