I'm having trouble getting my dropdown content to align properly with my centered search bar. Any suggestions on how to fix this issue?

How can I align the dropdown content to the center in its td element? I haven't included all of my code here, so feel free to ask if you need more information. The search bar is supposed to be at the center of this table navbar.

This is the HTML:

<table class="navbar-table">
    <tr>
      <td style= "margin: 0px 0px; padding: 0px 0px; width:33.33%; float: left;">
        <div class="dropdown">
          <span class="dropbtn">&#9776;  Menu</span>
          <div class="dropdown-content">
            <a href="../index.html">Home</a>
            <a href="../leaderboard.html">Leaderboard</a>
            <a href="../about_us.html">About Us</a>
            <a class="active" href="slide1.html">Slides</a>
            <a style=" display: none;" id= "profile-button-text" href= "../profile/achievements.html" >Profile</a>
            <a style= "background-color: #ab727a; display: none;" id= "logout-button-text">Log Out</a>
          </div>
        </div>
      </td>

        <td class= "search_bar_td">
          <div class="dropdown-search">
            <input autocomplete="off" class= "search_bar" name="search" placeholder="Search..">
            <div class="dropdown-search-content">
              <a href="../index.html">Home</a>
              <a href="../leaderboard.html">Leaderboard</a>
              <a href="../about_us.html">About Us</a>
              <a class="active" href="slide1.html">Slides</a>
              <a style=" display: none;" id= "profile-button-text" href= "../profile/achievements.html" >Profile</a>
              <a style= "background-color: #ab727a; display: none;" id= "logout-button-text">Log Out</a>
            </div>
          </div>
        </td>

      <td style= "margin: 0px 0px; padding: 0px 0px; width:33.33%;">
        <ul style= "margin: 0px 0px; padding: 0px 0px;">
          <li class="navbar-logsin" id= "signup-button" style=" background-color: #72ab99">
            <a class= "topnav_a" id= "signup-button-text">Sign Up</a>
          </li>
          <li class="navbar-logsin" id= "login-button" style=" background-color: #73a872">
            <a class= "topnav_a" id= "login-button-text">Login</a>
          </li>
        </ul>
      </td>
    </tr>
</table>

This is the CSS:

.search_bar {
  width: 240px;
  float: none;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  background-color: white;
  padding: 6px 10px 6px 30px;
  margin: 0 auto;
  outline: none;
}

.search_bar_td {
   float: center; 
   width: 33.33%;
   margin: 6px 0px;
   padding: 0px 0px;
}

.dropdown-search {
  width:100%;
  margin:0 auto;
  padding: 0px 0px;
  float: center;
  display:block;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
}

.dropdown-search-content {
  display: block;
  position: absolute;
  background-color: #f9f9f9;
  height: 0px;
  width: 0px;
  max-height:150px;
  overflow-y:scroll;
  z-index: 1;
  float: center;
  margin: 6px 0px;
}

.search_bar:focus + .dropdown-search-content {
  height: auto;
  width: 240px;
}
htmlcss

Answer №1

According to @cloned, using tables is unnecessary. It would be better to utilize flexbox for designing a navigation bar with a search input that is center-aligned. To address the dropdown issue, simply position the search dropdown absolutely relative to the parent wrapper.

nav {
 display: flex;
 justify-content: space-between;
 align-items: center;
}
 nav > ul {
 display: flex;
 align-items: center;
 list-style: none;
 width: 70%;
 justify-content: space-around;
 margin-left: 0px;
 padding-left: 0px;
}
 nav .search {
 width: 30%;
   position: relative;
}

.search ul {
  list-style: none;
  position: absolute;
  left: 0;
  padding-left: 0px;
}
<nav>
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
  </ul>
  <div class="search">
    <input type="text" name="" id="searc-bar">
    <ul>
       <li><a href="#">Item 1</a></li>
       <li><a href="#">Item 2</a></li>
       <li><a href="#">Item 3</a></li>
       <li><a href="#">Item 4</a></li>
    </ul>
  </div>
</nav>

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

Duplicating a concealed div and transferring it to a new div

I'm encountering an issue while trying to copy one div to another. The div I'm attempting to copy has a hidden parent div. The problem is that the destination div does not appear after copying, even though I changed its style display to block. ...

javascriptjqueryhtmlcsscopy

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

htmlcssborderpseudo-element

Tips on saving HTML table information into a .txt document?

Welcome to my Unique HTML Table. <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Email Id</th> <th>Phone Number</th> <th>Prefered C ...

javascriptjqueryhtml

Updating values using jQuery when tags in a single table row are changed

In my current setup, I have a table structured as follows: <table> <tbody> <tr> <td> <input type="text" class="identifier" /> </td> <td class="name"> Some value < ...

jqueryhtml

Unlocking the Mysterious Realm of HTML

I recently stumbled upon a mysterious combination of HTML attributes: <div vanisheffect="true" blinkcolor="red" fadeopacity="0.8"> Have you ever encountered something like this? And more importantly, does it have any impact on specific browsers? Is ...

htmlbrowsercss

Incorporate a platform-specific button in a user interface with React Native

I need to display a button that is only shown on iOS, not on android. I have tried using the following style, but it doesn't seem to be working. ...Platform.select({ android: { display:'none', }, The code for my button is: <Bu ...

cssreact-native

Choosing between JavaScript and Handlebars.js depends on the specific needs

Can anyone explain the advantages of utilizing Handlebars.js or similar libraries over solely relying on JavaScript? Thus far, I haven't come across any functionality in Handlebars that cannot be achieved with just pure JavaScript. ...

javascripthtmlcssnode.jshandlebars.js

Removing accordion borders in Bootstrap and AngularJS can be achieved by customizing

Can anyone help me figure out how to hide the border in each accordion group that contains a panel and inner elements? I've tried using classes like .accordion and .inner but nothing seems to work. Any advice on where to find the specific class or ID ...

csslessangularjs-bootstrap

I am having difficulty accessing specific data in JSON using Searchkit's RefinementListFilter

Utilizing searchkit for a website, I am encountering issues accessing previously converted data in json format. The structure of my json directory is as follows: (...) hits: 0: _index: content _type: content _source: ...

javascripthtmljsonreactjssearchkit

Adjust the size of images using jQuery to perfectly fit the container dimensions

I am currently working on a script to automatically resize images that are too large for the container: $('img').each(function(i){ var parent_width = parseInt($(this).parent().width()), image_width = parseInt($(this).width()); ...

javascriptjquerycssimage

A pale tooltip with a light arrow appearing against a soft white backdrop

Can someone help me figure out how to display a white tooltip with a white arrow? I've tried to implement it using the code below, but the white color is not visible against the background. Any suggestions on making it stand out? $(function () { ...

javascripthtmljquerycsstooltip

Can CSS be used to consistently position content in a specific manner?

I previously inquired about a similar issue and received an excellent solution. Here is my jsbin http://jsbin.com/nuwagibayo/1/edit?html,css,output where I encountered the following scenario: The positioning of 12.50 seems slightly awkward in its current ...

css

What's the best way to add two distinct colors as background for a header with css?

h2 {background-color:#C61236; color:#FFFFFF; font-size:medium; line-height:1.5; text-indent:20px;} Although the current setup looks good, I am looking to incorporate a new color block at the start of the text. I'm not sure what steps to take nex ...

css

Modify the h:outputText value dynamically with the power of jQuery!

Is it possible to use jQuery to dynamically change the value of my OutputText component? This is the code snippet for my component: <h:outputText id="txt_pay_days" value="0" binding="#{Attendance_Calculation.txt_pay_days}"/> I would apprecia ...

javascriptjqueryhtmljsf

Creating a "select all" feature in an HTML multiple select box with jQuery - a step-by-step guide

I'm currently working on an HTML form that includes a multiple select box. I am looking to create a "select all" option within the multiple select box so that when a user clicks on that option, all other options in the select box are automatically sel ...

javascriptjqueryhtmlhtml-select

Deletion of a custom function in JavaScript

I have written some basic code to generate and remove an image using functions. Specifically, I need help with removing the image created by the function Generate() when a button linked to the function Reset1() is clicked. Here's the code snippet for ...

javascripthtmlcss

Identifying whether a Alphabet or a Digit has been Pressed - JavaScript

I understand that it is possible to detect if a key has been pressed and identify which key was pressed using JavaScript. In order to check if a key is down or pressed, jQuery can be utilized with ease: $( "#some id" ).keydown(function() or $( "#m" ). ...

javascriptjqueryhtmlkeypresskeydown

Is there a way to convert the structure of HTML/CSS into JSON format?

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .collapsible { background-color: #004c97; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text ...

cssjsonhtml

Create a simple carousel using only vanilla JavaScript, without relying on any external plugins

Currently, I am working on implementing a carousel using plain JavaScript without the use of any plugins. My goal is to have previous and next buttons that will control the sliding images. var firstval = 0; function ...

javascriptjqueryhtmlcss

Styling with Chemistry: CSS for Chemical Formulas

Is there a way to write multiple formulas in CSS, or is there an alternative method I should consider? I want to integrate these formulas on my quiz website for students to use. I came across some intriguing examples that could be useful: However, I am s ...

phpcssformulaequations