Help setting up masthead

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>
        <address id="company-addy">
            Seattle, WA<br />
            (206) 555-1212
    float: left;

    float: right;

This approach requires a clearfix solution, and makes me wonder 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;}

What are the benefits to your approach?

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.

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


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

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

hope that helps

1 Like

Why do you recommend that approach?

I guess I don’t follow your code… :confused:

This code almost looks clearfix-esque…

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

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

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?

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