Center the div element with a small left margin

Question

Center the div element with a small left margin

In the process of developing a website, I am faced with the challenge of creating a navigation bar at the top. This navigation bar is designed to have a logo in the top left corner and a toolbar centered within the window. The logo is implemented using an img tag with the position:absolute property to ensure it appears in the correct location. On the other hand, the toolbar is contained within a div element with width:100% set, ensuring that its components are centralized within it.

https://i.sstatic.net/Y6ZHc.png

However, when the window size is reduced significantly or when viewing on tablet devices in portrait mode, the toolbar ends up overlapping the logo, as shown below:

https://i.sstatic.net/OhiOX.png

My goal is for the toolbar to stop moving once it reaches the logo's position, ensuring that when the window is resized, the layout appears as desired:

https://i.sstatic.net/FUtaM.png

I came across a potential solution mentioned in this thread: css: how to build centered div with minimum spacing on the left. However, this approach relies on knowing the exact width of the centralized component (toolbar), which may not be feasible in my specific case.

Any assistance or insights would be greatly appreciated. Thank you!

html css

Answer 1

Answer №1

To ensure that the logo and toolbar do not overlap, you must set both elements to have a position of relative. Specifically, you should set the toolbar to:

.toolbar {position: relative; float: right;}

and the logo to:

img {position: relative; float: left}

If you want to create a 'burger menu' for smaller screen sizes, consider using media queries. This will allow you to adjust the layout based on the screen width.

For a central top bar, place it in a div that occupies the remaining space on the right side. Here's an example:

.logo {position: relative; float: left; width:30%; background-color: red}
.topbar {margin-left: auto; margin-right:auto; width:50%;background-color:red;}
.topbarContainer {float:right; width: 70%}

Check out this Fiddle for reference:

https://jsfiddle.net/dbcv4yc7/1/

Answer 2

To ensure that the logo and toolbar do not overlap, you must set both elements to have a position of relative. Specifically, you should set the toolbar to:

.toolbar {position: relative; float: right;}

and the logo to:

img {position: relative; float: left}

If you want to create a 'burger menu' for smaller screen sizes, consider using media queries. This will allow you to adjust the layout based on the screen width.

For a central top bar, place it in a div that occupies the remaining space on the right side. Here's an example:

.logo {position: relative; float: left; width:30%; background-color: red}
.topbar {margin-left: auto; margin-right:auto; width:50%;background-color:red;}
.topbarContainer {float:right; width: 70%}

Check out this Fiddle for reference:

https://jsfiddle.net/dbcv4yc7/1/

Center the div element with a small left margin

Answer №1

Similar questions

Learn the best practices for incorporating jQuery and other JavaScript libraries in your Angular2 projects

Tips for vertically aligning elements within the body while excluding the navbar from being centered

Setting up a PHP email form for offline use

Prevent the onclick function of a span element from being triggered when the user clicks on a dropdown menu contained within

Is there a way to automatically close the Foundation topbar menu when a link is selected?

CSS-only countdown animation

Combining inline input fields and select buttons with Bootstrap 3

Ensure that the table container occupies the remaining viewport height without causing vertical scrolling in the window, while also enabling vertical scroll within the table itself

I am facing a challenge with my data, as it includes start and end values representing character indexes for styles. I need to find a way to convert this information into valid HTML tags

Arranging buttons in a row with Bootstrap 5

Modify the POST data in PHP 8 if the HTML form submit results in an empty submission

Restore original state on various elements using JavaScript

The NVD3 tooltip is being obscured by other divs

Encountered an error while trying to filter markers and list using Knockout and Google Maps - Uncaught TypeError: Unable to locate property 'marker' of undefined

Is it possible to overlay a div onto a Google Map?

CSS div elements not appearing in a row

Is there a way to adjust the theme color in _variables.scss by recompiling Bootstrap while working with Angular and CSS?

Navigating a mobile-friendly menu anytime!

The information about the property is not appearing on the screen

Creating a user authentication portal