Help setting up masthead

[mikey_w]

I am trying to create a masthead like this…

Like everything I do moving forward, I am am trying to use better CSS than in the past, and think “responsively”!!

The approach I took last night was this…

    <header id="masthead">
        <div id="company-info">
            <div id="brand">Mikey Consulting</div>
            <div id="tagline">Helping your site be responsive</div>
        </div>
        <address id="company-addy">
            Seattle, WA<br />
            (206) 555-1212
        </address>
    </header>

#company-info{
    float: left;
}

#company-addy{
    float: right;
}

This approach requires a clearfix solution, and makes me wonder if maybe there is a better way.

Advice?

[felgall]

@mikey_w

if maybe there is a better way

Don’t know if it is better but have you considered something along the lines of:

#masthead {position:relative;height:3em;}
#company-info {position:absolute;left:0;}
#company-addy {position:absolute;right:0;}

[mikey_w]

@felgall

Don’t know if it is better but have you considered something along the lines of:

#masthead {position:relative;height:3em;}
#company-info {position:absolute;left:0;}
#company-addy {position:absolute;right:0;}

What are the benefits to your approach?

[ralphm]

These days I’d be considering display: table or display: flex rather than floats, but there’s nothing wrong with floats, and a little bit of clearfixing never hurt anyone.

[dresden_phoenix]

adding to what ralph said:
display:inline-block; or overflow:hidden; will also do nicely.

ANOTHER TRICK:

			#company-info, #company-addy{
			display: inline-block;
			text-align: left;
			font-size: 200%;
		}
		#masthead:after{ content:'';
		  display: inline-block;
		  width: 90%;
		  height:0;
		}
		#masthead{ text-align: justify;}

this doesn’t require clear fixes and will collapse more naturally ( even without media queries)

hope that helps

[mikey_w]

@ralphm

These days I’d be considering display: table or display: flex rather than floats, but there’s nothing wrong with floats, and a little bit of clearfixing never hurt anyone.

Why do you recommend that approach?

[mikey_w]

@dresden_phoenix

adding to what ralph said:
display:inline-block; or overflow:hidden; will also do nicely.

ANOTHER TRICK:

			#company-info, #company-addy{
			display: inline-block;
			text-align: left;
			font-size: 200%;
		}
		#masthead:after{ content:'';
		  display: inline-block;
		  width: 90%;
		  height:0;
		}
		#masthead{ text-align: justify;}

this doesn’t require clear fixes and will collapse more naturally ( even without media queries)

hope that helps

I guess I don’t follow your code…

This code almost looks clearfix-esque…

		#masthead:after{ content:'';
		  display: inline-block;
		  width: 90%;
		  height:0;
		}

[dresden_phoenix]

I am using TEXT-ALIGN instead of FLOAT. In a sense of the ‘number of of instructions’ I suppose you could see it that way, but the similarity ends there.

1. Since it doesn’t float anything, you don’t need to contain(‘clearfix’) the parent element.
2. Employing text alignment to achieve the layout allows for more than two elements , you could add a logo in the center, for example.
3. Like I said earlier, it doesn’t wrap the way a float does… this may be advantageous when doing responsive design as you won’t have to override the float declaration. When you float something to the right and it has to drop down, it will still remain at the right side of the screen, with this method it will simply drop below , but on the left side the same way justified text would wrap.

Hopefully that clear things up

[mikey_w]

@felgall

Don’t know if it is better but have you considered something along the lines of:

#masthead {position:relative;height:3em;}
#company-info {position:absolute;left:0;}
#company-addy {position:absolute;right:0;}

Why is it that when I try your code…

• The Telephone number spills outside of the right side? (I added a pink background to check how things were working.)

• If I try height: auto everything collapses vertically?