Take the 2-minute tour ×

I have a situation in which I have a header and a few radio buttons inline with it that control the contents of what displays below. For style reasons I want the bottom border on the header to extend to the edge of its container, through the following elements.

My situation as of now:

<h2 class="header">this is the header</h2>

<label class="l" for="a">this is a label</label>
<input value="a" name="options" type="radio"/>

<label class="l" for="b">this is another label</label>
<input type="radio" name="options" value="b"/>


    display: inline-block;
    margin: 4px;
    color: red;

h2.header {
    border-bottom: 1px solid blue;
    display: inline;
    margin: 4px;
    font-size: 200%;

result: http://jsfiddle.net/F7pzd/1/

Is there a way to get the bottom border to extend all the way across the page?

share|improve this question
add comment

3 Answers

up vote 1 down vote accepted

Just use a div element to wrap everything. Here's an example.

Note that by using a wrapping div, you can get rid of all the classes you were using previously. Also, note that the for attribute for label elements needs a corresponding ID.

I've fixed all of these issues in the fiddle example I linked to above.

share|improve this answer
I guess that should have been the obvious route, thanks. –  AdamSpurgin Jan 21 '13 at 20:22
add comment

Could you not add a container element around your h1 and options?


<div class="border-bottom">

border-bottom: 1px solid blue;   



You could use display: inline-block; and set a static height for all of the elements. http://jsfiddle.net/yLUC7/5/

(note the use of 'line-height' to vertically align the text in the labels)

share|improve this answer
add comment

First you have to wrap all elements there inside a div or another tag, depends where you want to position elements. In my example i used a <header> tag. Also it is recommended to put the <input> inside <label> because is user friendly, they can check it clicking also on text.

You can see my modifies here

share|improve this answer
add comment

Your Answer


