Attempting to align a header and an unordered list side by side

I'm feeling a bit lost here and I've been doing my best to find a solution online, but no luck so far.

What I need help with is getting my header element and unordered list to appear on the same line without losing their respective margins.

h3 {
  text-align: left;
  margin: 40px 0px 0px 40px;
}

ul {
  text-align: right;
}

ul li {
  list-style: none;
  display: inline;
  margin: 0px 20px 0px 0px;
}
<body>
  <h3 id="header"> Darius Spady </h3>
  <ul>
    <li> About </li>
    <li> Projects </li>
    <li> Contact </li>
  </ul>
</body>

Any assistance would be greatly appreciated! Thank you!

htmlcssheaderhtml-lists

Answer №1

I recommend using a parent element and applying the CSS property 

display: flex; justify-content: space-between;
to place them on the same line with some white space in between. To align them vertically, you can also use the align-items property.

* {margin:0;padding:0;}

ul li {
  list-style: none;
  display: inline;
  margin: 0px 20px 0px 0px;
}

h3 {
  margin: 40px 0px 0px 40px;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
<header class="flex">
  <h3 id="header"> Darius Spady </h3>
  <ul>
    <li> About </li>
    <li> Projects </li>
    <li> Contact </li>
  </ul>
</header>

Answer №2

If you're looking to achieve your desired layout easily, Bootstrap is a great option to consider.

<!-- Implementing Bootstrap -->
        <div class="row">
            <div class="col-md-4">
                <h3>Darius Spady</h3>
            </div>
            <div class="col-md-4">
                <ul class="list-group">
                    <li class="list-group-item">About</li>
                    <li class="list-group-item">Projects</li>
                    <li class="list-group-item">Contact</li>
                </ul>
            </div>
        </div>

Alternatively, you can opt for using tables to avoid dealing with styles directly.

<!-- Pure HTML approach -->
        <table>
            <tr>
                <td>
                    <h3>Darius Spady</h3>
                </td>
                <td>
                    <ul>
                        <li> About </li>
                        <li> Projects </li>
                        <li> Contact </li>
                    </ul>
                </td>
            </tr>
        </table>

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

Adjust the parent container to match the height of the child container when it is being hovered

I have been searching for a solution to this issue, but none of the answers I found seem to work in my specific case. Currently, I have a "Mega Menu" with links on the left side that expand when hovered over, revealing hidden links with images on the righ ...

htmlcss

Tips for customizing image flipper AJAX code

I am working on a script that swaps the current image with a selected one, but I need to add an attribute so it specifically targets image tags with a certain class SCRIPT---- <script> $(function(){ Test = { UpdatePreview: func ...

htmlajaximage

Sending text from a Tinymce textarea using Laravel 4.2

I am currently facing an issue with a form that includes a tinymce textarea, allowing users to edit text and save it into a database with HTML tags for display on their profile. The problem arises when Laravel 4.2 escapes the HTML tags, making it difficult ...

javascriptphpjqueryhtmllaravel-4.2

Transform your ordinary HTML select into a stylish span with this custom CSS class

I need help making a select element appear like a span under certain conditions. The CSS class I currently have works with input boxes, but not with dropdowns. Is there any advice on how to style the select element to look like a span without actually repl ...

jquerycssdrop-down-menuhtml

Easily input new information into your MySQL database with just a click by utilizing a link through PHP and HTML

Is there a method to modify information in a MySQL database when a user clicks on a hyperlink? I'm developing a voting application. It enables users to save questions for immediate use or later use. When the user is viewing their created questions, t ...

phphtmlmysql

What could be causing this function to malfunction?

Apologies for any inaccuracies in technical terms used here. Despite being proficient in English, I learned programming in my native language. I am currently working on a project using the latest version of Angular along with Bootstrap. I'm unsure if ...

javascripthtmlangulartypescriptfunction

An effective method to arrange divs in a line adjacent to each other

Apologies for the repetitive question, but I am in need of some answers. In my opinion: Having 1 div with a width of 100% and 2 divs inside each with a width of 50%. Why does it not fit properly? HTML: <div id="top-menu"> <div id="logo">& ...

csshtmlcss-position

What is the reason behind certain websites not displaying a .php extension at the end of their file names?

There are times when I notice that a website's URL is structured like this: www.website.com/index.php while other times it appears like this: www.website.com/index/ What is the reason for the absence of a .php or .html extension in the second URL? ...

phphtmlurl

What is the best way to alter the background of a div when hovering over an image?

I am looking to achieve a unique effect with my thumbnail image and background. Currently, I have the thumbnail image inside a div with another image serving as the background to frame it. My goal is to change the position of the background image from bott ...

jquerycss

Using jQuery, you can create and add an element to the page when a user clicks

Currently, my webpage contains numerous anchor tags that link to various video files, along with a single div element: <a href="http://www.example.com/example-1.mkv" class="video">1</a> <a href="http://www.example.com/example-2.mkv" class=" ...

javascriptjqueryhtml

Use the Segoe UI typeface on Internet Explorer for a sleek

I have implemented a custom Segoe UI font in my CSS file. While it displays correctly in Chrome, I am facing an issue where IE and Firefox are showing the default font in certain areas. Below is the snippet of the CSS code: body { margin:0px auto; ...

htmlcssfontsfont-face

Tips on combining multiple HTML tags within a single div element

After extracting a value from an XML document using Javascript, I encountered a problem while attempting to generate multiple image tags based on that value. Despite my attempt with a for loop, only one image was being displayed. for(i=0; i<red; i++){ ...

javascripthtmldom

How can I create responsive buttons with icons using material-ui?

I'm working with a material-ui Button that has a startIcon, and I need to hide the button text on smaller screens while still showing the icon. One common solution would be to use the useMediaQuery hook to identify the browser size and render a diffe ...

cssreactjsmaterial-ui

Is it possible to maintain HTML, JS, and CSS files as separate entities when developing Vue.js components, similar to how it is

Is it possible to maintain separate HTML, JS, and CSS files while creating Vue.js components? I recently read the "Why Vue.js doesn't support templateURL" article which discusses this topic. "Proper modularization is a necessity if you want to bu ...

javascripthtmlvue.jsvuejs2vue-component

PHP - WebCalendar - Show or Hide Field According to Selected Item in Dropdown List

Working with the WebCalendar app found at to make some personalized adjustments to how extra fields function. I've set up two additional fields: one is a dropdown list of counties, and the other is a text field. Within the dropdown list, there is an ...

phpjavascriptjqueryhtmlcss

What methods can I employ to utilize the name attribute for POST requests instead of the ID attribute in TinyMCE?

My inline TinyMCE form sends content to qry.php with the key "edit_me". I prefer the default behavior of sending content using the name attribute instead. <script type="text/javascript"> tinymce.init({ selector: '#edit_me', ...

phpjqueryhtmlajaxtinymce

Price and advantage in a single line of HTML code

Is there a valid reason for creating one-line HTML? Or is it better not to? I understand that reducing file size is a benefit, but we also need to consider the cost on the server of adding functions to generate one line HTML. Additionally, making changes ...

htmloptimization

Expand and collapse dynamically while scrolling

// Closing Button for Main Navigation $('button#collapse-button').click(function () { $('nav#main-nav').toggleClass('closed'); }); $(window).on('scroll', function () { if ($(wind ...

javascriptjqueryhtmlcssscroll

Getting user input with JQuery and dynamically updating CSS properties

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" /> <table> <tr> <th colspan="4">Control panel</th> </tr> <tr> <td> <!-- attempting to retrieve value from the input field ...

javascriptjqueryhtmlcss

Simple Mobile-Friendly Tabs - mobile tabs are always visible

My JavaScript skills are not the best. I have been using Easy Responsive tabs and encountered an issue on the mobile version where clicking does not hide content, but only removes the "d_active" class and adds it to another element. I believe that if the ...

javascriptjqueryhtmltabs