Aligning HTML headers in a horizontal manner

Can anyone help me out here? I have a div containing 4 elements that are currently stacked on top of each other. I want them to be aligned horizontally instead. The div's ID is #ninesixty. Thank you in advance!

HTML

<header>
    <div id="ninesixty">    
        <h1 id="home_link">HOME</h1>
        <h1 id="projects_link">PROJECTS</h1>
        <img id="logo" src="images/logo.png"/>
        <h1 id="services_link">SERVICES</h1>
        <h1 id="contact_link">CONTACT</h1>
    </div>
</header>

CSS

header
{
background-color:white;
text-align:center;
}

#ninesixty
{
    height:900px;
    width:960px;
    margin-top:40px;
    background-color:white;
    margin: 0 auto;
    text-align:center;
    border-radius:8px;
    display:inline-block;
}
csshtmlweb

Answer №1

To have h1 and img tags displayed inline, simply add display:inline-block; to their styles.

h1,img{
   display:inline-block;
}

Try it out on FIDDLE

Answer №2

For elements you want to display inline, use the <code>display: inline-block
property directly on them, not their container. This property is not inherited.

#newsite h1 { display: inline-block; }

http://jsfiddle.net/aa8b7/

Answer №3

Apply the inline class to all elements inside the div

.inline
{
        display:inline-block;
}


<header>
    <div id="ninesixty">    
        <h1 id="home_link" class='inline' >HOME</h1>
        <h1 id="projects_link" class='inline' >PROJECTS</h1>
        <img id="logo" class='inline'  src="images/logo.png"/>
        <h1 class='inline'  id="services_link">SERVICES</h1>
        <h1  class='inline' id="contact_link">CONTACT</h1>
    </div>
</header>

Answer №4

It's important to define a guideline for them

h1 { display: block; float; left;}

Answer №5

Avoid using H1 multiple times within a single page

Instead, consider using a class to achieve a similar effect

Sample HTML code:

<header>
    <div id="ninesixty">    
        <div id="home_link">HOME</div>
        <div id="projects_link">PROJECTS</div>
        <img id="logo" src="images/logo.png"/>
        <div id="services_link">SERVICES</div>
        <div id="contact_link">CONTACT</div>
    </div>
</header>

Corresponding CSS code:

#ninesixty div
{
    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

Navigating to the bottom of a specific element by scrolling

I am currently working on enhancing a module within the application I'm developing. The goal is to automatically scroll the browser window to the bottom of an element when said element's height exceeds the height of the window. The functionality ...

javascripthtmlcssscroll

What is the best way to transfer attribute values from multiple elements and paste them each into a separate element?

I have multiple elements with the tag <a class="banner2">. Each of these elements has a different URL for the background image and href value. <a href="#" target="_blank" class="banner2" style="background-image:url('<?php echo get_templat ...

javascriptphpjqueryhtmlcss

How can I trigger a function by clicking on a link that was generated dynamically with jQuery?

I am dynamically creating multiple <a href="#"></a> elements with dynamically assigned id attributes like <a href="#" id='delete"+id+"'></a>. The IDs generated will be like delete01, delete02, .... I want to trigger a func ...

javascriptjqueryhtml

unable to interpret information

I've encountered an issue with posting data to my webpage (page3.php). Despite using $test=$_POST['radio_second']; on the page, the test variable remains empty. Any help in resolving this would be greatly appreciated. Thank you! <p> ...

phphtml

Chrome is experiencing a delay in closing the Select Option dropdown menu

On my webpage, I have two select option buttons placed on different tabs. Whenever one button is changed, I want to update the value of the other button and assign it to a specific element like a span in the example code provided. While everything works sm ...

javascriptjqueryhtmlcssgoogle-chrome

What is causing the content to overflow outside of the navbar on smaller screens or mobile devices?

/* *{ font-family: sans-serif; box-sizing: border-box; margin: 0; padding: 0; overflow-x: hidden; } */ .main { min-height: calc(100vh - 10rem); display: grid; place-items: center; } p { font-size: 4rem; line-height: 1.6; } nav ...

htmljquerycssbootstrap-4

Avoid floating right elements all the way up if there are already elements floating left

I am struggling to position block 5 next to block 3 on larger screens, while maintaining the desired arrangement on smaller viewports. The blocks do not have fixed heights in my setup. You can see my codepen for a better understanding of what I'm try ...

csscss-float

Using Handlebars, you can easily interpolate variables within an "each" loop

I have integrated this code into an express app that utilizes handlebars as its template engine: res.render("movies", { data: pages, arraypages:arrayPages, movie:movie}) The "arrayPages" variable is represented by an array: [ 1, 2, 3, ...

htmlnode.jsexpresshandlebars.jsexpress-handlebars

Responsive on Mobile Devices

I'm seeking assistance in brainstorming a creative idea or method to convert the carousel indicators into a menu, or any alternative approach to ensure the entire section is mobile responsive while keeping all the indicators visible within the mobile ...

htmlcss

A sleek and streamlined scrollspy that dynamically updates the active class exclusively for anchor tags

Can anyone help me with this coding problem? I'm currently working on a minimalistic scrollspy code that adds an active class when the content is offset.top. The code works fine, but I want to change the active class to apply to the "a" tag instead of ...

javascriptjqueryhtmldomscrollspy

The simple method for incorporating line feed in <s:textarea>

Hey there, I'm currently utilizing struts 2 UI and I seek a means to restrict the number of characters in each row to only 16. Additionally, I want to impose a maximum length limit of 32 characters. Despite my attempts using the 'row' and &a ...

htmlstruts2

Implement a jQuery slideshow with a full background image, aiming to set up a clickable link on the final image of the

Could someone please help me with a query I have regarding a background image slide show using jQuery code? I have set up a slide show with multiple images and would like to make the last image clickable. Is it possible to achieve this specific functionali ...

javascriptjqueryhtmlcssimage

Ways to eliminate extra space from the edges of a container

Trying to wrap my page in a Material UI container component, but there's this persistent whitespace on the outside that no matter how much I tweak the margin and padding, it just won't disappear. Any CSS wizard out there with a workaround to make ...

cssreactjsmaterial-ui

Adjust the height of a <div> element to fit the remaining space in the viewport or window automatically

I am working with the following HTML code: <html> <BODY> <DIV ID="holder"> <DIV ID="head_area">HEAD CONTENT GOES HERE....</DIV> <DIV ID="main_area">BODY CONTENT GOES HERE</DIV> ...

phpcsshtml

Is there a way to achieve a marker-style strike through on text?

I'm attempting to create a strikethrough effect for a marker, just like the one shown in the image below. In my efforts to achieve this effect, I have tried wrapping the text within two span elements. The inner span has negative margins to reduce the ...

htmlcss

Having trouble getting the .toggle() function with classList to work on one element, despite working fine on others

I've been struggling to apply a class to an HTML element when I click on another element of the page. Despite numerous attempts, it just doesn't seem to work for me. Let's take a look at my code: HTML Code: <div class="container&qu ...

javascripthtmljqueryonclicktoggle

Tooltip remains visible even after formatting in highcharts

I have successfully hidden the datalabels with 0 values by formatting them. However, after formatting the tooltips for 0 valued data in a pie chart, there is an issue where hovering over the 0 valued portion shows a white box as shown in the picture. I hav ...

javascriptjquerycsshighcharts

Troubleshooting: Unable to Remove Files in PhoneGap

I've been working on a basic app that heavily utilizes PhoneGap to test its capabilities. Currently, I'm trying to delete a file that has been downloaded within the app, but I'm encountering some issues. The majority of the code I've im ...

javascripthtmlxcodecordova

Vertical scrollbar in iframe unexpectedly appears immediately after the submit button is pressed

I have designed a contact form that is displayed in an iframe within an overlay div. I have carefully adjusted the dimensions of this div to ensure that there are no scrollbars visible when the form initially appears. However, after filling out the form an ...

phpjavascripthtmlcssiframe

Ensure that the responsive SVG image remains centered even when resizing

I have been attempting to center crop the responsive SVG image while resizing. Even though I used preserveAspectRatio="xMidYMax slice", the image width does not stay consistent with my screen size. body{ margin:0;padding:0; } .wrapper { position: re ...

csshtmlsvgresponsiveness