CODEWITHSUNDEEP
htmlcss
Jonathan
Jonathan

Reputation: 73

How can I align text and an image horizontally?

I have a title, subtitle, and image. The subtitle should be directly below the title, with both left aligned and taking up 75% screen width. Then the image should take up the remaining 25%, and be on the same 'row'/horizontal plane as the titles.

Fiddle demo

I think the issue is around the title/subtitle being in a display:block; however when I change it to display:inline; the subtitle jumps to its own line with the image and the title is left above both. I do not want this. I want the subtitle to remain below the title, and for the title/subtitle together to be treated as one block that the image is placed to the right of. Ideally it would look like it does now with the image shifted up.

How do I change the CSS to get the result below?

Intended layout with alignment and margins

Thanks in advance for any help!

(also why doesn't simply changing the titles' display from block to inline solve the issue? I understand block takes up a whole row, while inline removes line breaks before/after. I would expect inline to remove the line break that is there now while keeping the subtitle with the title, since they are in the same <div>, but that doesn't happen)

Upvotes: 2

Views: 26441

Answers (3)

katty azabache
katty azabache

Reputation: 1

here a small exercise with flex )

.wrapper {
  display: flex;  
  flex-flow: row wrap;
}

.main {
  text-align: left;
  background: deepskyblue;
  width:70%;
}


.aside-1 {
background-image:url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQmug35W66IxVvu52OPl9Tz8TxoIOCD6hjxJbw6cOZIjjd_K5Mb');

  background: purple;
   width:20%;
}
.aside-1 img{
  width:100%;
}

@media all and (min-width: 600px) {
      .aside { flex: 1; }
    }

/*@media all and (min-width: 800px) {
  .main    { flex: 3 0px; }
  .main    { order: 1; }
  .aside-1 { order: 2; } 
 
}*/
<div class="wrapper">
  <article class="main">
    <h2 class="title-bar" id="tip-title">
                        The Title That is Here
                    </h2>
                    <i>I'm a subheading!</i> 
  </article>
  <aside class="aside aside-1"></aside>
</div>

Upvotes: 0

Zli
Zli

Reputation: 127

Add this code to your image directly or give it a class and style it in CSS:

.imageclass {

position: relative;
top: -5em;

}

Upvotes: 0

Sethuraman
Sethuraman

Reputation: 651

This is because div is a block element which will take whole width of screen , if you need it to be inline and adjust the screen use css float:left for both div which hold title and image 

#header-titles{
  width:65%;
  margin-left:10%;
  text-align: left;
  float: left;
}
#header-image{
  width:20%;
  margin-right:5%;
  text-align:right;
  float: left;
}

here is your working example: http://jsfiddle.net/q9g2fj7d/34/

Upvotes: 5

Related Questions