Getting two elements to sit in same line correctly

[gurdipsira]

Hi Guys,
This should be a simple query:

I have a header on my HTML page. Within it, I use a third party product (Telerik for ASP.NET Core) and its toolbar control (https://demos.telerik.com/aspnet-core/toolbar).

Before I start, if this becomes a question for Telerik then happy to seek support from them, but it should be CSS.

On the right of my header (see picture), I want to place some icons (FontAwesome). However, I can’t get them on the same page.

As you can see the toolbar sits in the middle and reserves the space either side to it.

This sits in a header, with the css properties as follows:

#header {
    width: 100%;
    background: none;
}

#headerContent {
    margin: 0 auto;
    width: 960px;
}

The header is just meant to be a div that runs across the entire width of the page. The width value I am assuming is a bad practice (maybe should be 100%).

Going back to the question however, how can I get my icon to sit on the same line as the toolbar?

Thanks

[Gandalf]

[off-topic]
Hi @gurdipsira when you post code in the forum, you need to format it. To do so you can either select all the code and click the </> button, or type 3 backticks ``` on a separate line both before and after the block of code.

I have done it for you this time.
[/off-topic]

[gurdipsira]

hmm code was in a code block already? How about now?

I atually have this resolved, but not by modifying css, but by adding the icon into the Telerik toolbar. Happy to get suggestions though!

[SamA74]

@gurdipsira

The header is just meant to be a div that runs across the entire width of the page. The width value I am assuming is a bad practice (maybe should be 100%).

A fixed width is usually bad, as it won’t be responsive to smaller screens. If you must set a width, use max-width instead. But because you want it full width, use width: auto instead of 100% as that will be full width while accounting for margins, padding, etc. Auto is the default width for block elements, so you probably don’t need to define it at all.