CODEWITHSUNDEEP
htmlcssalignment
Hariharan Anbazhagan
Hariharan Anbazhagan

Reputation: 1329

How to achieve the following layout?

Im trying to get the following layout, but missing something so I couldn't get it proper. enter image description here

.wrapper{display:inline-block;}
.image{float:left;}

Here is my fiddle !

What would be the best style suggestions for title and sub-title.
Shall I use <span> tags? or <h1> and <p> tags?

Thanks in advance !

Upvotes: 2

Views: 118

Answers (2)

Arthur Weborg
Arthur Weborg

Reputation: 8580

Updated Fiddle - with spacing around the three components
Second Fiddle - without spacing around components

EDIT/UPDATE

I set the title to a <h1> tag and the sub-title to a <p> tag. This set-up keeps the two entities from being on the same line.

I also added some margin's (the spacing you wanted around each component), borders, and background colors to be more like your desired styling.

Because you wanted the content/sub-title to be cut off at the bottom of your image, and your image was not going to always be a set resolution, I added a javascript method to iterate through your DOM, specifically on your .wrapper div's and dynamically set the height of your sub-title/content. I did this by taking the calculated height of your image .offsetHeight and subtracting it from the height your title and spacing will always take up.

var wrappers = document.getElementsByClassName("wrapper");
for(var i = 0; i < wrappers.length; i++){
    var wrapper = wrappers[i];
    var height = wrapper.getElementsByClassName("image")[0].offsetHeight;
    wrapper.getElementsByClassName("sub")[0].setAttribute("style","height:"+(height - 55) + "px");
}

On your sub-title/content I set a height and overflow-y:hidden, this will cut off your sub-title/content if it flows past the bottom of your image.

Please see the updated fiddle at the top of my answer.

Upvotes: 1

Aaron Silber
Aaron Silber

Reputation: 483

Here's how I may structure this depending on context:

http://codepen.io/aaronlsilber/pen/LjuFb

You'll notice I've kept the CSS fairly object-oriented. You may want to take a look at something like www.smacss.com — it'll change the way you write css!

Also, this reminds me of the media object:

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

Upvotes: 3

Related Questions