Develop Reference

How to achieve text/image layout like this on single Wordpress blog post page

I've been trying to create something like this for my blog page. Idea is that text of blog and thumbnail are 50/50 until image ends. After image the text should become 100% of page width. Options like placing image in Wordpress editor or text-wrap don't work because I want to add styling line next to text content which is 50%.
I've considered that maybe I should work out a jQuery/Javascript solution which splits the words and adds them form 50% div to 100% div after 50% div extends the height of the image.
Has anyone familiar with solution like this. What are the options for me?

For image:
float: left;
width: 50%;
This will allow you to wrap the text around your image and set image width to 50% of your container.
The only issue will be with the border, I am still not sure how to do it the best way.
.pretend-it-is-an-image {
height: 100px;
width: 50%;
background-color: blue;
float: left;
margin-right: 20px;
color: white;
text-align: center;
}
<span class="pretend-it-is-an-image">Image</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac nulla vitae nulla consectetur sollicitudin ac vel nisi. Ut fringilla erat augue, quis accumsan nisl aliquet a. Sed tempor libero est, non iaculis leo dignissim quis. Duis sagittis tristique libero. Mauris iaculis mauris eget convallis posuere. Aliquam iaculis tempus nunc. Quisque facilisis mauris arcu, eget lacinia neque elementum eget. Mauris tincidunt nunc suscipit ipsum vulputate, non congue nibh laoreet. Duis nisi lectus, tempus ut mauris id, hendrerit semper enim.
Phasellus commodo faucibus mauris ut commodo. Suspendisse ornare imperdiet nulla sed malesuada. Aenean et pharetra nibh. In auctor purus a mollis venenatis. Pellentesque sodales lorem urna, nec vestibulum massa interdum ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc erat ligula, egestas luctus mattis vitae, hendrerit quis sem. Proin tincidunt suscipit ligula id efficitur. In sed nisi scelerisque, tincidunt turpis eu, euismod dui. Donec bibendum malesuada massa sed vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque convallis pulvinar justo. Phasellus egestas, mi sit amet vehicula laoreet, lorem sapien ultrices mi, sit amet ornare erat orci eu ex.
Maecenas ultrices blandit cursus. Aenean sed elit sodales, pharetra dolor eu, condimentum enim. Donec vitae venenatis mi. In ut quam tristique ex aliquam gravida. Vestibulum a maximus dui. Proin enim diam, imperdiet tincidunt nulla dictum, tincidunt consectetur diam. Phasellus varius faucibus tristique.
</p>
Where to make a change?
You mentioned Wordpress, so these changes usually go into single.php file. For more information about where to make changes, see this: https://developer.wordpress.org/themes/basics/template-hierarchy/

try:
<img src="images/subjects/sub.jpg" align="left" style="width:45%; border-right:2px solid #000; padding:7px; margin-right:7px;"/>

CSS - Footer Repositioning Below Vertically Centered Content

The Problem:
I'm trying to set my masthead's height equal to the viewport height and vertically center the nested content using the table/table-cell method. When I set the height value of the masthead's parent div (the main element) to 100%, the footer repositions just below the masthead because the main element's height is limited to the viewport height, even with a clearfix.
Potential solutions that I'd like to avoid:
Moving the masthead content before the main content (Possible SEO
impact?)
Moving the masthead content into the header (Using CI framework, not an option)
Using vh units / JavaScript / jQuery (I want 100% browser compatibility, ideally)
I'd greatly appreciate any help or insight into this issue that you can offer. If there isn't a pure CSS solution that meets the above criteria, I'll select the most browser-friendly solution.
Code Snippet Demoing the Issue:
.clearfix:after,
.clearfix:before {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
*, :after, :before, html {
box-sizing: border-box;
}
* {
margin:0;
padding:0;
}
html, body, .wrapper, main, .masthead, .masthead .section-content {
height:100%;
}
body {
background-color:#dddddd;
}
.section-content {
background-color:#eeeeee;
}
header {
position:fixed;
top:0;
left:0;
right:0;
}
header, footer {
height:61px;
line-height:61px;
background-color:white;
}
nav, .section-content, footer div {
width:75%;
margin-left:auto;
margin-right:auto;
}
li {
display:inline-block;
}
main {
padding-top:61px;
}
section {
padding-top:1rem;
padding-bottom:1rem;
}
h1, h3, p {
padding-bottom:1rem;
}
.centered-wrapper {
display:table;
height:100%;
}
.centered-content {
display:table-cell;
vertical-align:middle;
}
<body>
<div class="wrapper">
<header>
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</nav>
</header>
<main class="clearfix">
<section class="masthead">
<div class="section-content">
<div class="centered-wrapper">
<div class="centered-content">
<h1>
Heading 1
</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus.</p>
</div>
</div>
</div>
</section>
<section>
<div class="section-content">
<h3>
Section Header
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget elit vel ex hendrerit consequat et eu risus. Vivamus at enim ante. Proin condimentum mollis congue. Vivamus porttitor convallis massa at vulputate. Proin tincidunt a urna ut malesuada. Curabitur risus diam, dignissim nec tellus sed, maximus condimentum metus. Morbi nec accumsan magna, nec fermentum purus. Sed rhoncus, mi ac egestas elementum, diam neque interdum arcu, non varius ligula lectus molestie dui. In aliquet nec magna sit amet hendrerit. Donec vehicula, nisl eget ullamcorper eleifend, ante ex accumsan odio, porttitor aliquet sem velit non elit. Vestibulum efficitur molestie ipsum, id pellentesque odio. Nulla accumsan ligula neque, id pharetra elit molestie sed. Sed sit amet eros et nisi efficitur dapibus.</p>
</div>
</section>
</main>
<footer>
<div>
<p>
© Tyler Fuller
</p>
</div>
</footer>
</div>
</body>

This seems to be a common problem for many people. I'm afraid one of the best solutions at the moment is to use vh units with this javascript 'buggyfill' until iOS Safari fixes their browser.
I know you said you don't want a vh or JavaScript solution, but you did say you want 100% browser compatibility. Unfortunately we can't have our cake and eat it, too. Case in point: Modernizr.
That being said, don't be afraid to use that buggyfill I linked to. It's very easy to use. Here's a demo CodePen: https://codepen.io/krabbypattified/pen/ZKaKJw/
A webpage without the "buggyfill": http://lab.gasteroprod.com/vub/index-ios-issue.html
Same webpage with the "buggyfill": http://s.codepen.io/krabbypattified/debug/ZKaKJw/YvkgOPPypyok
(feel free to visit those links on iOS Safari)
The vh solution for your website is simple. Just remove the height from the main element and add a height: 100vh to the .masthead.

Exclude element from jquery animation

I am almost positive that this question has been answered before, but the reason that I am asking this question is because I am not sure how to implement the answers into my code without breaking it. I have an accordion menu and it utilizes headers, paragraph tags, divs for the structure of the accordion. Well what I am trying to do is use a div inside of the accordion to display images, but here is the thing: divs are used for the structure of the accordion.
So, what I am asking is how to have jQuery treat this div as purely
content and not part of the structure?
I am pretty sure that the answer is to use .not(), but not sure. I only understand the basics when it comes to JavaScript and jQuery. I am really sorry for this guys... I am the type of person that learns by doing, not by reading a book.
var headers = ["H1", "H2", "H3", "H4", "H5", "H6"];
$(".accordion").click(function(e) {
var target = e.target,
name = target.nodeName.toUpperCase();
if ($.inArray(name, headers) > -1) {
var subItem = $(target).next();
//slideUp all elements (except target) at current depth or greater
var depth = $(subItem).parents().length;
var allAtDepth = $(".accordion p, .accordion div:not(.exclude)").filter(function() {
if ($(this).parents().length >= depth && this !== subItem.get(0)) {
return true;
}
});
$(allAtDepth).slideUp("fast");
//slideToggle target content and adjust bottom border if necessary
subItem.slideToggle("fast", function() {
$(".accordion :visible:last").css("border-radius", "0 0 10px 10px");
});
$(target).css({
"border-bottom-right-radius": "0",
"border-bottom-left-radius": "0"
});
}
});
<aside class="accordion">
<div class="opened-for-codepen">
<h2>How do I recruit members?</h2>
<div class="exclude image_legend">
<span>Image legend for "How do I recruit members?" section</span>
<br />
<br />
<img src="includes/images/clan/clan-tab.png" height="40px" style="display: inline;" />
<img src="includes/images/clan/clan-bottom-bar.png" height="40px" style="display: inline\;" />
<img src="includes/images/clan/clan-recruit.png" height="40px" style="display: inline-block;" />
<img src="includes/images/clan/clan-tab.png" height="40px" style="display: inline-block;" />
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis arcu augue. Donec varius semper interdum. Sed condimentum ipsum enim, a egestas nunc blandit a. Aenean varius dapibus suscipit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Quisque et lectus sapien. Nulla dapibus porta libero ac efficitur. Phasellus condimentum ornare porta. Aliquam erat volutpat. Nullam nec orci vitae felis mattis suscipit consectetur sit amet urna. Nulla lobortis augue ac commodo condimentum. Maecenas
ac dui cursus, congue felis quis, varius elit. Curabitur nulla lacus, dignissim ut pellentesque at, posuere sit amet eros. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec nec sapien diam. Nulla
accumsan viverra tellus sed laoreet. In eleifend nulla libero, vehicula consectetur magna condimentum vitae. Suspendisse non rhoncus justo. Nullam eleifend elit nec neque efficitur, quis fermentum metus pretium. Quisque tellus mauris, molestie in
ultrices eu, tincidunt ut nibh. Fusce eu volutpat felis. Integer ligula nulla, mattis quis pulvinar pharetra, vehicula nec arcu. Vivamus tincidunt nulla a nisi vehicula lobortis. In hendrerit, neque quis convallis lacinia, nisl ipsum varius lorem,
nec laoreet nisi odio vitae est. Nulla vitae diam enim. Suspendisse a dignissim magna. Pellentesque convallis maximus mollis. Nullam tellus est, accumsan sit amet facilisis sit amet, semper sed lorem. Mauris laoreet tortor at odio aliquet, ut porta
lacus rhoncus. Nullam laoreet dolor et velit malesuada feugiat. Vestibulum a erat elementum, hendrerit massa non, ornare enim. Phasellus iaculis diam eros, sit amet dapibus elit finibus id.
</p>
</div>
</aside>
Edit: The above html is consolidated because there is a lot of content to include all of it, but I provide you with the basic structure that makes the accordion

Assign a class to your div (Ex. 'my-class')
Then use not :not() to filter the selection
var headers = ["H1","H2","H3","H4","H5","H6"];
$(".accordion").click(function(e) {
var target = e.target,
name = target.nodeName.toUpperCase();
if($.inArray(name,headers) > -1) {
var subItem = $(target).next();
//slideUp all elements (except target) at current depth or greater
var depth = $(subItem).parents().length;
var allAtDepth = $(".accordion p, .accordion div:not(.my-class)").filter(function() {
if($(this).parents().length >= depth && this !== subItem.get(0)) {
return true;
}
});
$(allAtDepth).slideUp("fast");
//slideToggle target content and adjust bottom border if necessary
subItem.slideToggle("fast",function() {
$(".accordion :visible:last").css("border-radius","0 0 10px 10px");
});
$(target).css({"border-bottom-right-radius":"0", "border-bottom-left-radius":"0"});
}
});

Content will not float the the right of the page

I'm just playing around with creating a website, excuse the messy code, quite new to this game.
Basically I'm trying to section a website with each sections content either going to the left or right, alternating.
As you can see I've managed to do the one to the left (Section2), however I can't seem to do the one on the right (Section3). The nav bar is also fixed but isn't showing on the JSFiddle. I'm also wondering why my text displays fine on my 1920x1080 monitor, but on my 1366x768 laptop, it overflows out of the div, bear in mind that the backgrounds of each section will be will eventually be an image, so I can't repeat it.
I've uploaded a JSFiddle as I was getting confused with what I had to do to upload code here, hope it is not a problem.
I appreciate your help, and again sorry for the incredible messy code!
<section id="screen1">
<div class="hLogo">Title</div>
<nav>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
6
</li>
</ul>
<img class="ad" src="css/asc.jpg" />
</nav>
</section>
<section id="screen2">
<div class="content left nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>
<section id="screen3">
<div class="content right nobg">
<div class="scrTitle">About</div>
<p class="scrContent">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>
</section>

To fix your problem with section 3 not going to the right, You can just add this bit of code to your CSS:
.scrContent2 {
font-size: 75%;
overflow: hidden;
width: 20%;
float: right;
}
This means that your HTML will need changing for section 3 as follows:
<p class="scrContent2">
Here is a jsfiddle of this.. http://jsfiddle.net/jw5du15v/5/

Try like this: DEMO
CSS:
.right {
margin-right: 10%;
text-align:right;
float:right;
}
.left {
margin-left: 10%;
float: left;
text-align:left:
}
HTML:
<div class="content nobg">
<div class="scrTitle left">About</div>
<p class="scrContent right">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eros nisi, consequat sit amet sodales vitae, molestie eu elit. Nullam gravida laoreet nulla sit amet pretium. Vivamus nisi est, imperdiet a venenatis vel, porttitor vitae dui. Vivamus laoreet tortor in diam interdum, ac dapibus ante pretium. Vivamus gravida leo sit amet placerat lobortis. Sed odio arcu, tempus non gravida ut, egestas ut velit. Ut vitae enim fringilla, consequat massa quis, interdum sem. Donec vel sollicitudin urna. Suspendisse eget mi neque. Phasellus adipiscing nunc vitae nulla molestie tempor. Curabitur porttitor pretium augue, sit amet ornare metus.</p>
</div>

Use CSS to float your webpages to left and Right.
Try this
.content left nobg {
float:left;
}
.content right nobg {
float:right;
}

Scroll to newly added variable height div

I am trying to figure out how to have a scrollable div scroll to the top of the most recently appended child div.
The html of the chatbox is as follows
<div class="character-chat-log">
<div class="character-chat-message"><strong>Test 1:</strong> test</div>
<div class="character-chat-message"><strong>Test 1:</strong> test</div>
<div class="character-chat-message"><strong>Test 1:</strong> hey</div>
<div class="character-chat-message"><strong>Test 1:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac dictum est. Ut auctor feugiat lectus, consectetur adipiscing lacus scelerisque eleifend. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed dignissim, tortor sit amet feugiat feugiat, ante urna luctus est, ut varius velit diam sed sem. Etiam ut eleifend risus. Maecenas vulputate arcu ipsum, ut tempus lectus pulvinar non. Donec non tellus sed diam semper tempus et eget eros. Mauris quis auctor lorem, non sodales urna. Ut dui dolor, ultricies sit amet lacinia in, ultrices eu mauris. Donec eros tellus, laoreet sagittis hendrerit id, scelerisque id mi. Praesent fringilla ligula id suscipit malesuada. Vivamus risus magna, lobortis a congue sit amet, consequat eget lorem. Vestibulum imperdiet ultricies rutrum. Donec a blandit enim, nec euismod ante. Phasellus dignissim molestie urna.</div>
</div>
Currently I am trying to scroll to the top of the latest "character-chat-message" as follows:
var newMessage = $(
'<div class="character-chat-message"><strong>'
+ sender
+ ':</strong> '
+ messageText
+ '</div>').appendTo(_messageBoxes[sender]);
_messageBoxes[sender].scrollTop(newMessage.position());
However this of course does not work at all.

It sounds like you're doing something similar to this question
Is that right?