What is the best way to position content at the bottom of a div?

I've been attempting to align my menu div with the bottom of my logo div on the same line within my header section.

  <div id="header">
            <div id="top-bar">
            </div>
            <div id="clear"></div>
            <div id="logo">
                <img id="logoimg" src="images/KTMLogo.png" />
            </div>
            <div id="menu">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Movies</a></li>
                    <li><a href="#">Theaters</a></li>
                </ul>
            </div>
        </div>

CSS

  #header {
   background-color:#e1874b;
   border-bottom-left-radius:25px;
   border-bottom-right-radius:25px;
   float:left;
   position:relative;
  } 

  #logo {
   width:280px;
  }

  #logo img {
   max-height:240px;
   max-width:240px;  
  }

  #menu { 
   font-size:18px;
   padding:20px;
   background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0)100%);
   width:500px;
   margin-left:300px;
   }

I am aiming for the menu div to be aligned with the bottom of the logo on the same line.

htmlcsscss-position

Answer №1

insert

#menu ul li {
    display:inline-block;
}

to line up the menu items horizontally.

To position them next to the image add this.

#menu,#logo {
    display:inline-block;
}

Also, make sure to fix or delete the margin-left property under the menu selector.

Answer №2

Navigation Menu Below the Logo

VIEW DEMO

#menu { 
   font-size:18px;
   padding:0px;
   background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0)100%);
   width:500px;
   margin-left:0px;
   }

This should be helpful

UPDATED DEMO

#header {
   background-color:#e1874b;
   border-bottom-left-radius:25px;
   border-bottom-right-radius:25px;
   float:left;
   position:relative;
  } 

  #logo {
   width:280px;
  }

  #logo img {
   max-height:240px;
   max-width:240px;  
  }

  #menu { 
   font-size:18px;
   padding:0px;
   background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0)100%);
   width:500px;
   margin-left:0px;
   }
#menu ul{

    display:inline-block;


}

#menu ul li{

      display:inline-block;

}

Another Update

Answer №3

Give it a shot:

#menu { 
  font-size:18px;
  padding:20px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.3) 0%,rgba(255,255,255,0)100%);
  width:500px;
  margin-left:300px;
  float: left;

} If you want your menu to align with your image, try using float: left;

If you want the list items to be in the same line, try using display: inline-block;

#menu ul li {
  display:inline-block;
}

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

Rings that react to both width as well as height

Below is a popular CSS markup for creating responsive circles. http://jsfiddle.net/WTWrB/355/ <div class="circle"></div> .circle { width: 25%; height:0; padding-bottom: 25%; -moz-border-radius: 50%; -webkit-border-radius: ...

htmlcss

What is the secret to creating double-width characters that are precisely double the size of single-width characters?

When using terminal, many fonts that support double-width characters display them as exactly twice the width of single-width characters. For instance, these two lines should appear with the same width: あああ aaaaaa However, this consistency is not ma ...

htmlcssuser-interfacefonts

Loading a page with a Chitika ad using Jquery can cause site malfunctions

I am experiencing an issue with my header.php file on my website. I included another PHP file for my ad code, but it seems to load the ad and then redirect me to a blank page. Can someone please review my code and let me know if there is an error? Thank yo ...

javascriptphpjqueryhtml

How can I filter a list using a checkbox form with PHP and SQL?

My task involves filtering the search results of a form on another page, based on the jobtype variable in a MySQL table using checkboxes and a sorting form. Even though the table contains multiple submissions with jobtype variables, selecting those option ...

phpmysqlhtmlformscheckbox

Issue with event.stopPropagation() in Angular 6 directive when using a template-driven form that already takes event.data

I am currently developing a citizenNumber component for use in forms. This component implements ControlValueAccessor to work with ngModel. export class CitizenNumberComponent implements ControlValueAccessor { private _value: string; @Input() place ...

javascriptangularhtmltypescript

Can you override CSS background image styles to ensure both images are loaded?

Suppose there are 2 CSS styles that assign background images to an element, and one style overrides the other. In this scenario, will both images be downloaded by the browser or just the overriding one? I am asking this because I recently participated in ...

htmlcss

Place the input field and submit button side by side horizontally

How can I align my submit button next to the input text in a single row, with the submit button on the right side of the input text? This is my code: <div class="mt-12"> <input id="grid-text" ...

javascripthtmlcssbootstrap-4

Having trouble with the background color not changing on scroll in Bootstrap 5 navbar?

I have gone through other posts, and I didn't encounter this issue while working on a regular html/css/js project. However, I need bootstrap for this particular project, and I believe it might be somehow interfering with my script, but I'm unsure ...

javascripthtmlcssbootstrap-5

Can we find a solution to optimize "Crystal Reports" for mobile browsers and make it responsive?

I'm in the process of making my entire Asp.net application responsive for mobile browsers by utilizing Bootstrap. However, I've encountered a challenge with making Crystal Report responsive for mobile browsers. If anyone has any advice on how to ...

cssasp.nettwitter-bootstrapcrystal-reports

The slider causing conflicts with widgets and content positioned below it in an HTML layout

When implementing a slider with a fade effect, there seems to be an issue with the placement of widgets on the homepage. The problem arises from the margin-top setting as when images change in the slider, the widgets clash with the slider. During the trans ...

javascripthtmlcss

Implement the map function to validate every input and generate a border around inputs that are deemed invalid or empty upon button click

Currently, I'm in the process of developing a form with multiple steps. At each step, when the next button is clicked, I need to validate the active step page using the map function. My goal is to utilize the map function to validate every input and ...

javascripthtmljquerymap-function

Creating a Bootstrap 4 column form label with a maximum width limit

I am currently working on creating a form within a full-width fluid layout that consists of 2 columns - the label column and the inputs column. The issue I'm running into is that due to the wide screens on fluid layouts, the col-2 label appears too l ...

htmlcssbootstrap-4dynamic-columns

Ways to achieve varying border widths among multiple divs that are linked to text size

Hey there, I'm looking to make some changes to the UI of my game. I want to transform it from this: https://i.sstatic.net/iLpFY.jpg To this (which is an edited version using paint.net of the previous image): https://i.sstatic.net/qudVm.jpg <html& ...

htmlcss

What are the steps to make the chosen title and its content active while deactivating the others?

I am currently developing a website for an educational institution that includes schools with subdivisions such as matric, CBSE, and state board, as well as a college. My goal is to create a user interface where clicking on a specific stream (such as matri ...

jqueryhtmlcsstwitter-bootstrapnav-pills

Why is my data attribute not being updated by the jQuery.data() method?

Here is an example of HTML code: <div id="mydiv" data-hoo-foo="bar"></div> As illustrated above, I am attempting to achieve the following: var $mydiv = $('#mydiv'); $mydiv.data('hoo-foo'); // returns 'bar&apos ...

jqueryhtmlcustom-data-attribute

Every click will nudge the square to the right

I have a square that should move 100px to the right when clicked, but on the next click it moves back to the left. How can I resolve this issue? On JSFiddle, the code works fine. However, when I try to run it in Chrome, I get an error message: Cannot re ...

javascripthtmlcss

Tips for linking to a page and dynamically adding a class to the body after it has been fully loaded

I've been working on a template that includes a blog.html file featuring various layouts: full-width layout 2 column layout 3 column layout 4 column layout I've customized the blog.html so that when specific classes are added to the body tag, ...

jqueryhtml

Utilizing partials in EJS for efficient HTML tag insertion

(1)home.ejs without using partials https://i.stack.imgur.com/3ozQQ.png (2)the output includes html tag, head tag and body tag https://i.stack.imgur.com/1o9jy.png (3)when utilizing header.ejs as a partial in home.ejs including opening html and body ta ...

htmlnode.jsexpressejspartials

The string obtained from input.getAttribute('value') is lacking one character

While developing e2e-tests for an angular application, I encountered a puzzling issue. When trying to retrieve the value from an using the .getAttribute('value') method, I noticed that a single character was missing. Checking the HTML properties ...

htmlangularjsprotractorend-to-end

Error Loading Message Appears with jQuery Mobile 1.3.1 and Flot Integration

I am trying to implement a flot interactive example with jQuery Mobile 1.3.1 in my project. However, I am encountering an issue with the latest version of jQuery Mobile where there is a strange frame around the chart and a "loading" text at the bottom of t ...

jqueryhtmljquery-mobilejquery-pluginsflot