2

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)

isherwood
  • 58,414
  • 16
  • 114
  • 157
Jonathan
  • 73
  • 1
  • 2
  • 11
  • Have you tried `display: inline-block` on `#header-titles`. You can also use css flex, many ways to solve this http://jsfiddle.net/7syLqtjb/ – Huangism Jan 10 '19 at 16:15
  • If you change the title box to display inline, the width no longer applies and your content inside is still display block so it will take up the entire width – Huangism Jan 10 '19 at 16:23
  • Duplicate (among others): https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div – isherwood Jan 10 '19 at 16:27
  • Possible duplicate of [How to align 3 divs (left/center/right) inside another div?](https://stackoverflow.com/questions/2603700/how-to-align-3-divs-left-center-right-inside-another-div) – Huangism Jan 10 '19 at 16:28
  • You can use flexbox that makes everything easier. – Malith Jan 10 '19 at 16:28

3 Answers3

5

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/

Sethuraman
  • 654
  • 6
  • 15
  • 2
    You don't need display inline if the element has float – Huangism Jan 10 '19 at 16:19
  • Thank you Sethuraman, that worked and I think is the most straightforward of the answers. Also thank you @Huangism for clarifying about display inline usage – Jonathan Jan 11 '19 at 20:49
0

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

.imageclass {

position: relative;
top: -5em;

}
Zli
  • 107
  • 1
  • 2
  • 8
0

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>
katty azabache
  • 1