#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2005
    Location
    mobile
    Posts
    12
    Rep Power
    0

    Float or clear issue?


    In this header www.johnschureman.com

    I have an image, an h1 and a subtitle div.

    Code:
    <div id="header">
    <img src="../images/jschu-crop150h.jpg">
    <h1><a href="<?php bloginfo('url'); ?>" title="<?php bloginfo('name'); ?>" >:<?php bloginfo('name'); ?></a></h1>
    	<div id="subtitle">
    		<!-- Here's the tagline  -->
    		<?php bloginfo('description'); ?>
    	</div>
    </div>
    I cannot figure out in my css how to make the subtitle appear below the h1.

    Code:
    #header {
    	margin:0; 
    	padding:0;
    	height:170px;
    	padding: 0px;	
    	margin-top: 3px;
    /*	padding-top:110px;
    	padding-bottom:10px;
    	padding-right:20px;
    	padding-left:5px;*/
    	border-bottom: 1px solid #bab1b1;
    	background: #404040;
    }
    #header img {
    	float:left;
    	display:inline; 
    	margin: 0 auto;	
    	padding: 10px 10px;
    	border:none;
    	}
    #header h1{
    	display: inline;
    	float:right;
    	padding:0px;
    	margin: 0px;
    	padding-top:100px;
    	margin-bottom:3px;
    	margin-right: 5px;
    	font-size: 2.4em;
    	letter-spacing:0.1em;
    }
    
    #subtitle {
    	text-align:right;
    	font-family:"Century Gothic", "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
    	margin-bottom:3px;
    	margin-right: 5px;
    	font-size: 0.9em;
    	text-transform:uppercase;
    	color:#bbb;
    }

    Hope this is enough info. I've been playing with clear, position, etc. Help? Thanks in advance.

    - Willi
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    1) Your problem is that the float is dropping when there isn't enough space for it beside the image.

    What I would do is float the <img> left. Then give the <h1> and <div> left margins of at least the width of the image instead of floating them.

    2) You should be aware that text/html should not be used with XHTML 1.1; use application/xhtml+xml instead or switch to XHTML 1.0 Strict. IE (as of IE7) doesn't support application/xhtml+xml. Simply changing the <meta> element does not work. This needs to be sent in the actual HTTP Response Header.
    Sending XHTML as text/html Considered Harmful
    Serving up XHTML with the correct MIME type
    http://www.w3.org/2003/01/xhtml-mimetype/
    http://www.xml.com/pub/a/2003/03/19/dive-into-xml.html
    http://www.w3.org/TR/xhtml-media-types/#summary
    Content-Typing XHTML
    http://www.dynamicsitesolutions.com/demos/test.xhtml
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2005
    Location
    mobile
    Posts
    12
    Rep Power
    0
    when you say "the float is dropping when there isn't enough space for it beside the image" do you mean the h1 float?

    also, all that XHTML stuff is a bit confusing to me... and this is a "theme" file, so I'll just change it to XHTML 1.0 Strict, i guess

    I just got what I wanted by putting the h1 and subtitle in their own div.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Originally Posted by willibrown
    when you say "the float is dropping when there isn't enough space for it beside the image" do you mean the h1 float?
    Apparently you haven't made the window less than about 900px wide in Firefox or Opera.

    Originally Posted by willibrown
    also, all that XHTML stuff is a bit confusing to me... and this is a "theme" file, so I'll just change it to XHTML 1.0 Strict, i guess
    Good. Except this isn't valid:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    you want this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Originally Posted by willibrown
    I just got what I wanted by putting the h1 and subtitle in their own div.
    What happens when someone sets their font-size larger?

    I suggest you check out the first demo on this page.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo