Getting two elements to sit in same line correctly

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 (

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

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?


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.

1 Like

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!

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.


This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.