CODEWITHSUNDEEP
htmlcsscss-float
robintw
robintw

Reputation: 28521

Get image to float to the right of a number of divs

I have the following HTML:

<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.rtwilson.com/robintheme/style.css" />
</head>
<body>
<div id="branding">
    <div id="blog-title">
        <h1><a href="http://127.0.0.1:8888/wordpress/" title="Robin&#039;s Blog" rel="home">Robin&#039;s Blog</a></h1>
    </div>
    <div id="logo-div" style="float:right; display:inline;">
        <img class="logo" src="http://rtwilson.com/academic/mugshot.jpg" height=100px>
    </div>
<h1 id="blog-description">A PhD student talking about interesting things</h1>
</div>
</body>
</html>

I am trying to get the image to display to the right of both of the h1's but without creating a gap between the h1's. That is, I would like the top of the image to be aligned with the top of the first h1, the image to be on the right, and the spacing between the h1's to be exactly how it would be without an image there.

I thought it could do this by floating the image to the right and setting the display property to inline, but I've tried this and there is a gap between the h1's.

How can I fix this?

Upvotes: 0

Views: 530

Answers (3)

ScottS
ScottS

Reputation: 72261

I recommend something like the following for these reasons:

  1. The HTML is more concise (less elements), and reflects better the intent of your titling--a main title with a subtitle description. Generally, one should only have a single h1 tag on a page, and this places both the relevant pieces into a single tag. A search engine will now read it as a single title "Robin's Blog A PhD student talking about interesting things" instead of as two items "Robin's Blog" ... "A PhD student talking about interesting things."
  2. Since you want the image to not interfere at all with the text, then using absolute positioning to effect that makes sense, as it will never cause any gaping in the text, nor reposition itself down the page. Of course, it is then good to at least give a min-width to keep from any overlap of the image to the text.

HTML

<div id="branding">
  <h1>
    <a id="blog-title" href="http://127.0.0.1:8888/wordpress/" title="Robin&#039;s Blog" rel="home">Robin&#039;s Blog</a> 
    <span id="blog-description">A PhD student talking about interesting things</span
  </h1>
  <img src="http://rtwilson.com/academic/mugshot.jpg" >
</div>

CSS

#branding {
    padding-right: 110px;
    position: relative;
    min-height: 100px;  
    font-family: 'Droid Serif',serif;
    min-width: 200px;    
}

#branding img {
    height: 100px;
    position: absolute;
    top: 0;
    right: 0;
}

#blog-title {
    color: black;
    font-size: 40px;
    font-weight: 400;
    text-decoration: none;
}
#blog-description {
    display: block;
    font-size: 20px;
}

Upvotes: 0

steveax
steveax

Reputation: 17753

I'd float the image right and give the divs some right-margin, like this:

<div id="branding">
    <img class="logo" style="float:right;" src="http://rtwilson.com/academic/mugshot.jpg" height="100">
    <div id="blog-title" style="margin-right: 110px;">
        <h1><a href="http://127.0.0.1:8888/wordpress/" title="Robin&#039;s Blog" rel="home">Robin&#039;s Blog</a></h1>
    </div>
<h1 style="margin-right: 110px;" id="blog-description">A PhD student talking about interesting things</h1>
</div>

Fiddle: http://jsfiddle.net/Qch6u/

Upvotes: 0

w3uiguru
w3uiguru

Reputation: 5895

Fiddle: http://jsfiddle.net/9vRLH/

Demo: http://jsfiddle.net/9vRLH/embedded/result/

Try the below css and HTML: Please se inline Css in image div.

#blog-title {
    float: left;
    font-family: 'Droid Serif',serif;
    font-size: 40px;
    font-weight: 400;
}

#blog-description {
    clear: left;
    float: left;
    font-family: 'Droid Serif',serif;
    font-size: 20px;
}

<div id="blog-title">
        <h1><a rel="home" title="Robin's Blog" href="http://127.0.0.1:8888/wordpress/">Robin's Blog</a></h1>
    </div>

<div style="float: right; display: inline;" id="logo-div">
        <img height="100px" src="http://rtwilson.com/academic/mugshot.jpg" class="logo">
    </div>

<h1 id="blog-description">A PhD student talking about interesting things</h1>

Upvotes: 1

Related Questions