Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Youseef Al Taher
Youseef Al Taher
Courses Plus Student 842 Points

How do you put a header(ex. <h1>) in line with a div?

I am making for myself an online resume, and I am trying to put my job experience with the corresponding dates on the same line of each job experience . For example:

Job experience 1 2008-2009 -Details of job 1 Job experience 1 2009-2010 -Details of job 2

The way i approached this is by making a container for both a <h1> and a <div>. In the <div> i put in the date. I managed to have the header on the left side, and the div with the date in it on the right, however, I cannot seem to put both on the same line. This is how it looks: Job experience 1
2008-2009 -Details for job 1

I tried playing around with the margins, but nothing is working.

Does anyone have any suggestions?

Many Thanks in advance, yousef

5 Answers

Jonas Mørkeby
Jonas Mørkeby
3,530 Points

Hello.

You can use display:inline; in your CSS for both the h1 and the div. But you should use a p instead of the div for containing text.

Example: ``` <h1 style="display:inline;">Headline</h1> <p style="display:inline;">Div with text</p>

Ida Brogie
Ida Brogie
9,250 Points
Ida Brogie
Ida Brogie
9,250 Points

the defaut behavior with <h1> in a almost every browser is to have the h1 on tis own row. its the same with all h1,h2 h3 -tags.. it you want to get rid of the default behavior you should try a reset-css to reset all style. but i shoul recommend you to use a span-tag or div tag for the name of the job.

Ahmed Helmi
Ahmed Helmi
6,032 Points
Ahmed Helmi
Ahmed Helmi
6,032 Points

umm i believe if u make a div { display:inline-block;} it will put ur h1 beside ur div . give it a try

Ida Brogie
Ida Brogie
9,250 Points
Ida Brogie
Ida Brogie
9,250 Points

h1 is used for headings if you use more than one h1 on a page it might get seoproblems.

Youseef Al Taher
PLUS
Youseef Al Taher
Courses Plus Student 842 Points
Youseef Al Taher
Youseef Al Taher
Courses Plus Student 842 Points

Thank you for your quick responses everyone. I tried out what Jonas suggested and it worked perfectly.