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

Is it possible for a website to be compromised by incorporating CSS within HTML code?

Is a table cell's border considered as part of its content?

Trouble Ensues as CSS Div Refuses to Center

Locate the nearest span element and update its CSS class

I'm wondering why my typography components display correctly on my local host, but not on my aws server. Any insights on

Troubleshooting problem with CSS borders in Microsoft Edge Browser

ever-evolving background-image with dynamic CSS styling

What is the best way to compare two CSS files and selectively replicate just the discrepancies?

List with Columns for Organization

How can I wrap content with the <li> element in a cross-browser compatible way?

What sets apart Firefox and Chrome when it comes to interpreting the widths of flex items?

Bootstrap 4: Concealed and Revealed Columns?

Tips for maintaining the position of items with absolute positioning while resizing:

Bootstrap 4's container overflowing feature

Is there a way to create an X shape by rotating two divs when I click on the container div?

Live server feature in Visual Studio Code is not able to update CSS styles

Modify the text in a paragraph by clicking on a link using JQuery and HTML

Tips for boosting the tabindex in a React search result list with ul-li elements

Fatal error in CodeIgniter occurring while invoking CSS less functions

Designing a Bootstrap layout with twin divs adjacent to each other