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

Arrange a pair of div containers side by side on the webpage without the need to alter the existing

Is there a way to align these two div side by side? <div class="main_one"> <div class="number_one">Title A</div> </div> <div class="main_two"> <div class="number_two">Title B</div> </div> <div class=" ...

cssangularjsreactjstwitter-bootstrapsass

Overlay with a progress bar that obscures visibility

I'm dealing with a progress bar that needs to be displayed on top of an overlay. If you take a look at this jsfiddle, you can see the issue. Here's the markup: <div class="overlay mouse-events-off"> <div class="progress progress-st ...

csstwitter-bootstrap

The animation for the CSS gradient background is failing to animate

After finding a similar code snippet used for backgrounds, I made some modifications to suit my needs. However, when attempting to implement it or any animation, nothing seems to be working. Even simple animations are not functioning as expected. While I a ...

javascripthtmlcss

The Facebook comment section is taking control

<div class="fb-comments" data-href="https://www.facebook.com/pages/Societ%C3%A0-Ginnastica-Triestina-Nautica/149520068540338" data-width="270" data-num-posts="3"> I'm having trouble with the comment box extending past my div height and overlapp ...

phphtmlcssfacebook

Content linked to an uneditable text box that does not appear in the HTML code

I recently encountered a situation where the value in a readonly textbox was not found in the underlying page HTML. Even though the browser displayed 'A504Y' in the textbox, I couldn't retrieve it using Webdriver's .text method: string ...

htmlselenium-webdriverwebdriver

How to incorporate a JavaScript file into a Handlebars template

I am having trouble receiving calls to my JavaScript file. What could be the issue? Using MVC. Here is the code in view file, file.hbs: <div class="container"> <h2 onClick="test()">Title</h2> {{>list}} </div> <script sr ...

javascripthtmlmodel-view-controllerhandlebars.js

Press anywhere else on the screen to dismiss the bootstrap menu

I've been attempting to find a solution for closing the Bootstrap menu when clicking outside of it in a mobile window size, but I just can't seem to make it work. I did manage to get it working when clicking one of the 'a' links using t ...

javascriptjquerycsstwitter-bootstrapmenu

Swap out a term in a sentence with an interactive span element in real-time

I'm struggling with a seemingly simple task, and I feel quite embarrassed that I can't seem to solve it. My goal is to identify words in a string that begin with '@' or '#' and change their color to blue. The string itself com ...

javascripthtmlcssdynamic

What steps can be taken to resolve the Angular error stating that the property 'bankCode' is not found on type 'User' while attempting to bind it to ng model?

I'm encountering an issue with my application involving fetching values from MongoDB and displaying them in an Angular table. I've created a user class with properties like name and password, but I keep getting errors saying that the property doe ...

htmlangulartypescriptcompiler-errorsngmodel

Adjusting the range input alters color progressively

I am trying to create a range input with a dynamic background color that changes as the slider is moved. Currently, the background is blue but I want it to start as red and transition to yellow and then green as the slider moves to the right. Does anyone ...

javascriptjqueryhtml

A design featuring a two-column layout, with one column remaining static while the other

I just finished putting together a two-column layout. <div class="layout"> <div class="col1"></div> <div class="col2"></div> </div> Check it out here There are a couple of things I'm wondering about: Is t ...

htmlcss

Tips for obtaining the accurate HTML code format using Angular 2's input feature:

I am looking to retrieve all the code with an input as [input] and a tag as #tag. When attempting to obtain HTML code with jQuery using console.log($("#content")[0].outerHTML);, this is an example of how the code looks: <div dnd-droppable [dropZones]= ...

htmltypescriptangular

Display all elements that come before and after the current element

For debugging purposes, I need to output the IDs of all previous images in a check. The issue arises when trying to assign classes to all previous elements using the script below, as the images are not being added to the correct classes. $(document).on(&a ...

jqueryhtmlcss

Is there a way to expand the navbar to full width?

I am currently designing a layout that includes a side menu and a top navbar using Bootstrap 4. My goal is to have the side menu extend from top to bottom and the top navbar stretch from the side menu to the right edge of the screen. How can I achieve th ...

htmlcsstwitter-bootstrap

Two boxes each taking up half of the width, with content placed inside a container

How can I achieve the appearance seen in this image? The layout consists of four columns using regular Bootstrap code. The first two columns should have a white background within a .container, while the other two columns should have a black background tha ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Modifying the font style and color of text within the table header - Material Table version 0.19.4

Recently, I began using React and Material UI but have encountered an issue with modifying the color and font of text in the table header. Despite attempting to override it, the default style remains unchanged. It has been mentioned that utilizing "heade ...

cssreactjsmaterial-ui

Problem of background and shadow blending in CSS

I'm experimenting with creating an element using a radial gradient effect. My initial approach was to use a white circular container and apply a white box shadow. However, I encountered some issues where the color of the shadow did not match the backg ...

firefoxcssshadow

Unlimited scrolling feature in Ionic using JSON endpoint

Trying to create an Ionic list using data from a JSON URL. JSON Code: [{"id":"1","firstName":"John", "lastName":"Doe"}, {"id":"2","firstName":"Anna", "lastName":"Smith"}, {"id":"3","firstName":"Peter", "lastName":"Jones"},{......................}] app.j ...

javascripthtmlangularjsionic-framework

Customize your form fields with Bootstrap 3 input groups

Currently, I am working on implementing a bootstrap 3 input group, but unfortunately, the outcome is not meeting my expectations. My goal is to create a select [input]-[input text]-[button] structure all in one line. However, in my scenario, the button has ...

htmlcsstwitter-bootstrap-3

Tips for positioning dynamic high charts in a bootstrap row

I have implemented HighCharts for displaying charts on my website. Specifically, I am utilizing the chart type solidgauge. The charts are dynamic and I am looking to arrange them horizontally across the page. My goal is to align the charts in a layout sim ...

javascripthtmlcsshighcharts