Creating gaps between flexbox divs for a more visually appealing layout

I am curious about the best practices for creating spacing between two divs that use flexbox. For example:

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

header {
  background-image: radial-gradient(circle, #72d6c9, #54d1ed, #7ac5ff, #bcb2fe, #f29cd9);
  height: 80px;
}

.menu-section {
  display: flex;
}

.nav-logo {
  color: #e00986;
  font-size: 25px;
  margin: 0;
  padding-left: 15px;
  line-height: 80px;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

nav ul li {
  display: inline-block;
  width: 150px;
  position: relative;
}

nav ul li a {
  text-decoration: none;
  line-height: 80px;
  padding: 0 10px;
  display: block;
  color: #e00986;
}

nav ul li a:hover {
  color: #FFF;
  transition-duration: 2s;
}
<header>
  <nav class="menu-section">
    <h1 class="nav-logo">Love &#9825 Cookies</h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Cookies</a>
        <ul>
          <li><a href="#">Cakes</a></li>
          <li><a href="#">Cupcakes</a></li>
          <li><a href="#">Meringues</a></li>
          <li><a href="#">Pastries</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

One option is to add margin-left: 550px to nav ul, but I am not convinced that this is the best approach. What are your thoughts on this matter?

htmlcssflexbox

Answer №1

To achieve the desired layout for the left logo and right menu items, simply set the parent div as a flex container with either justify-content: space-between or justify-content: space-around like this:

.main-container {
  display:flex;
  justify-content: space-between; /*or space-around*/
}

.left-content {/*any content as long as it's a div element*/

.right-content {/*any content as long as it's a div element*/

If you need further assistance or guidance on using flexbox, I highly recommend checking out this resource: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer №2

It seems like what you're looking to do is shift your navigation menu to the right side based on the feedback you received.

One potential solution to achieve this is to create space on the left for your navigation menu links. Instead of specifying an exact pixel value for margin-left, a better approach would be to use margin-left:auto. This will automatically allocate the remaining space on the left side of your navigation menu.

Here's the Solution:

header {
  background-image: radial-gradient(circle, #72d6c9, #54d1ed, #7ac5ff, #bcb2fe, #f29cd9);
  height: 80px;
}

.menu-section {
  display: flex;
}

.nav-logo {
  color: #e00986;
  font-size: 25px;
  margin: 0;
  padding-left: 15px;
  line-height: 80px;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  text-align: center;
  margin-left:auto; /*ADDED HERE - THIS IS THE TRICK :)*/
}

nav ul li {
  display: inline-block;
  width: 150px;
  position: relative;
}

nav ul li a {
  text-decoration: none;
  line-height: 80px;
  padding: 0 10px;
  display: block;
  color: #e00986;
}

nav ul li a:hover {
  color: #FFF;
  transition-duration: 2s;
}
<header>
  <nav class="menu-section">
    <h1 class="nav-logo">Love &#9825 Cookies</h1>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Cookies</a>
        <ul>
          <li><a href="#">Cakes</a></li>
          <li><a href="#">Cupcakes</a></li>
          <li><a href="#">Meringues</a></li>
          <li><a href="#">Pies</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

I hope this solution helps you.

Answer №3

.navigation-logo
{
    color: #e00986;
    font-size: 25px;
    margin-right: 100px;
    padding-left: 15px;
    line-height: 80px;
}

Utilize the margin property to add external spacing effectively!

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

What is the best way to align two divs next to each other while keeping the second one centered with flexbox?

Here are my two div elements: <div class='container'> <div class='left'></div> <div class='centered'></div> </div> I am looking to center the second inner div and have the first inner ...

htmlcssflexbox

Trouble with feedback form not showing up

I've been working on creating an ajax feedback form, but I'm facing difficulties in getting it to show up properly. The feedback image appears, but clicking on it doesn't trigger any action. Here's my Form: <div id="feedback"> ...

javascripthtmlajaxfeedback

Calculate the total width of LI elements and apply it to the parent UL or DIV

Is there a way to calculate the Total LI width and then set the width for the parent div? Here is an example of my code: <ul> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds</li> <li>dsfdsfdsfds&l ...

jqueryhtmlcss

Ways to align images of the same size in a gallery using the margin: auto property

I have an image gallery within a div element named "container" with a specified width:70%. I need the images to be justified with auto margins. This is the HTML code I am using: (There are 4 images in total) <div class="container"> < ...

javascripthtmlcss

Leveraging jQuery for Custom Form Styling

.I prefer to utilize personalized form elements in my forms. <fieldset> <legend id="Cities">Urban Areas</legend> <div class="legend-underline"></div> <div class="filters" id="Cities-filters"> <div> < ...

jqueryhtmlforms

Loop through each div using jQuery and dynamically add or remove a class to

I am looking to create an infinite loop that adds a class to each div with a timeout in between. Currently, I have implemented it like this: $(document).ready(function() { $('.small-bordered-box').each(function(i) { var $t = $(this); ...

javascriptjqueryhtmlcss

Preventing Event Propagation in Jquery is Quite a Challenge

I'm feeling a bit perplexed. I have a list of names with checkboxes next to them, and this list is generated dynamically after making a request to the backend. The issue is that every time I click on a checkbox, it immediately becomes unchecked. I no ...

jqueryhtmlstoppropagation

Locate the present position of the slider element

I am currently in the process of creating a website that features pages displayed in a slider format. Each page has its own unique ID, but all share a common class called 'section'. However, I am encountering difficulty in identifying the ID of t ...

javascriptjqueryhtmlslider

EventListener fails to detect any changes in the dropdown menu

I am currently delving into the world of Django and JavaScript, but I am encountering an issue with the addEventListener function. It seems to be malfunctioning and I am at a loss. Can anyone provide insight into what may be causing this problem? Here is ...

javascripthtmldjango

The functionality of XPATH does not seem to be properly executed with JQuery

<html> <head> <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("[href!='http://w ...

jqueryhtml

Broadcasting real-time video from a webcam on an HTML website that is accessible locally through a Raspberry Pi device

My goal is to stream live video from a USB camera connected to my Raspberry Pi device onto a simple HTML site that is only visible on localhost. The site will be hosted on the Raspberry Pi itself and will only need to display the video streamed by the Ra ...

javascripthtmlraspberry-pi

Discover the process of retrieving an element by its ID when dealing with dynamically generated IDs in AngularJS

I am creating a list using the following code snippet: <div ng-repeat="list in fileUploadList"> <div id="{{list}}Upload"></div> </div> Within the controller, I need to retrieve the element by ID, so I am utilizing this line of ...

javascriptangularjshtml

Popover disappears when scrolling the page, but its position remains constant in Angular 4+

After clicking on an icon, a popover appears. I've noticed that the popover has a delay set, but when I scroll, the popover also moves along with it. Is there a way to keep the popover in place and not have it affected by scrolling? <md-badge cla ...

htmlcssangularpopover

Internet Explorer displaying incorrect shadow effects (paper curl) with CSS

I am attempting to achieve a page curl effect similar to this one: https://i.stack.imgur.com/grS7p.png I have followed the example provided here: http://codepen.io/anon/pen/fpjoa When I create new PHP and CSS files and copy-paste the code from the afore ...

htmlwordpresscssinternet-explorer

Title of Flickr API

Hey everyone, I'm working on setting up a gallery on my website using images and sets from Flickr. I've successfully loaded all the sets with the following code: $flickr = simplexml_load_file('http://api.flickr.com/services/rest/?method=fli ...

phphtmlxmlapiflickr

Utilizing React JS: Displaying or Concealing Specific Components Based on the URL Path

Is there a way to dynamically change the navbar items based on the URL without having separate navbar components for each side? My current navbar design features 3 links on the left side and 3 links on the right, but I want to display only one side at a ti ...

javascripthtmlcssreactjsrouter

What is the best way to send an HTML form variable to a Perl script using AJAX?

My goal is to pass the HTML variable from the list menu to the Perl script using POST. However, when I try to do this, the jQuery ajax() function executes the Perl script without including the value obtained from document.getElementById. Below is the sni ...

javascriptjqueryhtmlajaxperl

"I can't figure out why my footer keeps showing up at the top of the page unexpectedly

Currently, my footer is showing up at the top of the page but I really want it to be at the bottom. I'm new to HTML so apologies if this is a simple fix. Here is my file with internal CSS: .middle { position: fixed; top: 50%; left: 50%; tr ...

htmlcssfooter

Assistance needed in handling a form with the use of $_POST and $PHP_SELF

Let me explain my goal in creating a webpage using HTML and PHP. The webpage will feature multiple forms to gather user inputs for future use. My plan is to reveal each form only after the previous one has been submitted. Here are the 3 forms: First name ...

phphtmlformspost

Is there a way to restrict the number of words displayed in React? Check out this code snippet: `<ProductImg imgtext={products.description}/>`

imgAlt={product.name} Note: Consider the product name as: HD Single Sided Cantilever Rack. In this case, only HD Single Sided... should be displayed Please find the code snippet below <ProductImg imgtext={products.description}/> ...

htmlreactjsimagefrontendcoding-style