Stylish CSS menu design

Question

Stylish CSS menu design

I am struggling to set up a top menu bar using float: left. How can I achieve the desired behavior for a top menu bar? The code snippet below demonstrates what I have tried so far:

      * { margin:0; padding: 0; }
      #menu { background-color: yellow; }
      #left {background-color: green; width: 200px; }
      #mid { background-color: red; width: 40%; float: left; }
      #right {background-color: blue; float: left; }

   <div id="menu">
     <div id="left">left green: 200px</div> 
     <div id="mid">mid red: 40% of browser width</div> 
     <div id="right">right blue: rest</div>
   </div>
   <div>
     content of the site
    </div>

css user-interface menu

Answer 1

Answer №1

It seems like the solution you're looking for involves utilizing CSS flexbox, which simplifies the process.

      * { margin:0; padding: 0; }
      #menu { background-color: yellow; display: flex; }
      #left {background-color: green; flex: 0 0 200px; }
      #mid { background-color: red; flex: 0 0 40%; }
      #right {background-color: blue; flex: 1; }

   <div id="menu">
     <div id="left">left green: 200px</div> 
     <div id="mid">mid red: 40% of browser width</div> 
     <div id="right">right blue: rest</div>
   </div>
   <div>
     content of the site
    </div>

If compatibility with older browsers is required, then using floats correctly should solve the issue:

      * { margin:0; padding: 0; }
      #menu { background-color: yellow; }
      #left {background-color: green; float: left; width: 200px; }
      #mid { background-color: red; float: left; width: 40%; }
      #right {background-color: blue; }

   <div id="menu">
     <div id="left">left green: 200px</div> 
     <div id="mid">mid red: 40% of browser width</div> 
     <div id="right">right blue: rest</div>
   </div>
   <div>
     content of the site
    </div>

Answer 2

It seems like the solution you're looking for involves utilizing CSS flexbox, which simplifies the process.

      * { margin:0; padding: 0; }
      #menu { background-color: yellow; display: flex; }
      #left {background-color: green; flex: 0 0 200px; }
      #mid { background-color: red; flex: 0 0 40%; }
      #right {background-color: blue; flex: 1; }

   <div id="menu">
     <div id="left">left green: 200px</div> 
     <div id="mid">mid red: 40% of browser width</div> 
     <div id="right">right blue: rest</div>
   </div>
   <div>
     content of the site
    </div>

If compatibility with older browsers is required, then using floats correctly should solve the issue:

      * { margin:0; padding: 0; }
      #menu { background-color: yellow; }
      #left {background-color: green; float: left; width: 200px; }
      #mid { background-color: red; float: left; width: 40%; }
      #right {background-color: blue; }

   <div id="menu">
     <div id="left">left green: 200px</div> 
     <div id="mid">mid red: 40% of browser width</div> 
     <div id="right">right blue: rest</div>
   </div>
   <div>
     content of the site
    </div>

Answer 3

Answer №2

Using Flexbox is the solution to your problem.

Ensure that you apply the appropriate flex properties to prevent the constrained width divs from expanding.

* {
  margin: 0;
  padding: 0;
}
#menu {
  background-color: yellow;
  display: flex;
}
#left {
  background-color: green;
  flex: 0 0 200px;
}
#mid {
  background-color: red;
  flex: 0 0 40%;
}
#right {
  background-color: blue;
  flex: 1;
}

<div id="menu">
  <div id="left">left green: 200px</div>
  <div id="mid">mid red: 40% of browser width</div>
  <div id="right">right blue: rest</div>
</div>
<div>
  content of the site
</div>

Answer 4

Using Flexbox is the solution to your problem.

Ensure that you apply the appropriate flex properties to prevent the constrained width divs from expanding.

* {
  margin: 0;
  padding: 0;
}
#menu {
  background-color: yellow;
  display: flex;
}
#left {
  background-color: green;
  flex: 0 0 200px;
}
#mid {
  background-color: red;
  flex: 0 0 40%;
}
#right {
  background-color: blue;
  flex: 1;
}

<div id="menu">
  <div id="left">left green: 200px</div>
  <div id="mid">mid red: 40% of browser width</div>
  <div id="right">right blue: rest</div>
</div>
<div>
  content of the site
</div>

Stylish CSS menu design

Answer №1

Answer №2

Similar questions

Issues with Ul List Alignment (CSS and HTML)

A guide on changing a plus sign into a minus sign with CSS transition

Arrange the "See More" button in the Mat Card to overlap the card underneath

Tips on how to horizontally align an icon and text using Material UI

Material UI does not have built-in functionality for displaying colored text within a multiline textfield component in React

Attempting to divide the main page into quadrants

Is it possible to personalize the Facebook like box appearance?

Issues with CSS margins in IE causing bugs?

What is the process for adding tailwind CSS via npm?

The copyright (©) symbol is unresponsive to rotation

PHP: Using conditional statements to adjust datetime formatting for CSS styling

Energetic flair for Vue animations

When transitioning to mobile size, I aim to maintain the consistent design of my background-color circle using Bootstrap 5

Creating a sidebar navigation in HTML and CSS to easily navigate to specific sections on a webpage

What is the best way to conceal the main list but still show the nested list within?

Attempting to showcase a pair of unordered lists side by side using the power of flexbox

What are the best strategies for ensuring this website is fully optimized for all devices

The issue of font icons not displaying seems to be affecting all users

What are the benefits of utilizing the useStyles MaterialUI function instead of traditional CSS?

The sticky position is malfunctioning even when there is no parent element with the overflow hidden property