Prison Break

Question

I have the following code:

//HTML
<h2>Personal Information</h2>
<div>
<form>
<h2>Work History</h2>
<input type="submit" value="Submit"/>
</form>
</div>

//CSS
h2 {
background-color:blue;
}
div{
width:50%;
}

Problem:
When this code is run, the width of the background color of the first h2 tag is 100% and the width of the second h2 is also 100% but 100% to the div tag. The div tag is 50% though.

Question:
I'd like to find a way to make the second h2 tag's width relative to the body tag instead of the div.

Answer 1

Try to create another div with width=100%

form
div width=100%
h2 /h2
/div
div width=50%
input...
/div
/form

Answer 2

Why not to put h2 outside div?

Answer 3

Or change div's width to 100%

Answer 4

Use pixels instead of percent

Answer 5

if you want 100% h2, create a 100% div. if you need a 50% element, you will do it. the container can not be smaller than its contents, unless you use "position: absolute", but I do not recommend it.

Answer 6

Perfect, it works. Thanks Rull Deef. ☺

Answer 7

You're right Rull but my question was wrong. Please see code below, I'm trying to make "work history" the same length as "personal information" but changing pixels just makes "work history" go to the right.
https://code.sololearn.com/Wcp3Bp0k5DK9/?ref=app

Answer 8

It can't be place outside because "work history" will have elements too that will be part of the form. The form will contain elements of "personal information" and "work history".

There will only be one form but the h2 tags have to be of same length.

Answer 9

The form will need to be in a div that's 50% width of the body.