I have placed an image in the bottom right at https://www.assabetbicycles.com/repair-classes/ Basically I wanted it up top with text wrapping around it, but it breaking the paragraphs or leaving extra white space. I would settle for it being down below except I don’t want it dropping lower than the text on the left (like it is right now). Possibly I’d have it appear to the left of the complete last section (h3, list and last sentences) but I could not get that to work either. I’ve tried floating and aligning the image itself, each left, right, center, and none. That doesn’t seem to be what I need. What would be the best way to control this image?
In short, I think I am asking how do I align the bottom of the image with text?
It looks like you have the image as the first list element of the unordered list. Is that how you really wanted it in your html? Why don’t you try having it on its own, above the <ul> element, so it can be made to behave independently of the unordered list.
If I understand correctly and you want the image to remain a floated element but bottom aligned to the text then that is not currently possible with CSS. You can of course approximate the process and put the html for the image higher up in the html but that would just be a magic number guesswork and would only work for a set amount of text (and of course would break when text wraps to a new line).
If you don’t need the text to wrap around the image (i.e. you don’t want it floated) then you could absolutely place the image at the bottom of the container but then you would need to give the content on the left side some right padding so that content doesn’t flow over the image (or create a 2 column layout instead with 2 display:table-cell or flexbox arrangements). The difference being that the text will never actually wrap around the image (when it has room to do so) unlike a floated element.
Those are the basic choices I’m afraid until we get support for CSS exclusions.
Exclusions work in edge and IE11 but are still buggy.
To add to what WebMachine said. As it is right now the image itself is in the HTML as an <img>, that is done when the image belongs to the pages actual content.
The image looks more like a logo for the school to me, in a case like that it becomes decoration for the page and would be more appropriate as a background image via CSS.
It boils down to the semantics of the HTML. Where you have it now, in the <li> that says “Wheel, Tires, and Tube Service Class: 2-hour session” ,it is definitely out of place. The image is not really about that 2-hour session.
If you want it at the top of the page you could set up a logo div and set the image as a background. Then float that div to the right if you want text to wrap around it. Text wraps around floats.
Well like we’ve mentioned, text wraps around floats. If you want text to wrap then just float a new logo div to the right. That float would come first in the page source in the main element if that’s where you want it.
I see no reason for 2-columns. That would just leave blank space down the page under your logo.
@Don1, I just wanted to clarify that I was referring to a floated logo at the top when I said “no reason for 2-columns”.
I wasn’t contradicting @PaulOB 's suggestion of a 2-column arrangement for the logo at the bottom. If you want the logo at the bottom then that would be the way to go.
Using Flexbox that can be done with align-items: flex-end;
I went ahead and made an example page with both a floated top and flex bottom logo.
I cropped out the extra whitespace in your image by reducing the height of the logo div and then centering the image with bg-position. That made it easier to align the bottom of the image in the flex setup and allowed the text to wrap tighter in the floated logo.
The logos scale down when the page width is reduced and there is a media query in there too for the flex logo.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scaling Logo Images</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.wrap {
max-width: 1140px;
margin: auto;
}
.entry-content {}
.top-logo {
float: right;
width: 40%;
min-width: 170px;
max-width: 300px;
border: 1px solid green;
background: url(https://www.assabetbicycles.com/wp-content/uploads/2018/11/park_tool_school-300x300.jpg) no-repeat center;
background-size: 100%;
}
/* bottom logo */
.classes {
display: flex;
flex-flow: row nowrap;
justify-content: center; /*for media query*/
align-items: flex-end;
outline: 1px solid red;
padding: 5px 0;
}
.topics {
flex: 1 0 60%; /*grow | shrink | basis */
border: 1px solid green;
margin: 0 5px 0 0;
word-break: keep-all;
}
.topics p:last-child {margin-bottom:0;background:yellow}
.bot-logo {
flex: 0 1 300px; /*grow | shrink | basis */
/*height: 210px; /*use pseudo :before for aspect ratio height*/
border: 1px solid green;
background: url(https://www.assabetbicycles.com/wp-content/uploads/2018/11/park_tool_school-300x300.jpg) no-repeat center;
background-size: 100%;
}
.top-logo:before,
.bot-logo:before {
content: "";
display: block;
padding-bottom: 70%; /*300 - 30% = 210*/
}
@media screen and (max-width:500px){
.classes {flex-flow: row wrap}
.topics {margin: 0 0 10px 0;}
}
</style>
</head>
<body>
<div class="wrap">
<h2>Repair Classes</h2>
<div class="entry-content">
<div class="top-logo"></div>
<p>Maintain your freedom with bike repair workshops at Assabet River Bicycles. <span id="more-17"></span>The Park Tool School at Assabet River Bicycles lets you learn how to take care of your own bike, under the helpful supervision of our expert mechanics. Classes are based on curriculums and materials in <em>Big Blue Book of Bicycle Repair</em> – 3rd Edition<em>,</em> by Calvin Jones.</p>
<p>Classes are available at different levels, for novice to advance rider/mechanics. The topics for each level are similar, but the depth of coverage varies. Please contact us at the store if you have questions about which level is right for you.</p>
<h3>Requirements</h3>
<ul>
<li>Pre-register for your class choice. Classes are posted in <a href="/events/">Upcoming Events</a>.</li>
<li>Bring your bike. It is what you will be working on.</li>
<li>Bring the textbook <em>Big Blue Book of Bicycle Repair</em> – 3rd Edition<em>.</em></li>
<li>Wear clothes you don’t mind getting dirty.</li>
<li>Bring a great attitude and plenty of questions (cookies help too).</li>
</ul>
<p>Workshops take place in an active service area. You will be using tools and equipment. For your safety we ask that you wear closed toe shoes, tie up long hair and remove jewelry.</p>
<p>Necessary tools for all classes are provided.</p>
<div class="classes">
<div class="topics">
<h3>Class Topics and Times</h3>
<ul>
<li>Wheel, Tires, and Tube Service Class: 2-hour session</li>
<li>New Rider Maintenance: 2.25-hour session</li>
<li>Novice Class: 7-hour course</li>
<li>Intermediate Class: 10.5-hour course</li>
<li>Advanced Class: 17-hour course</li>
</ul>
<p>Individual customized clinics and programs are available by request. Please <a href="/#contact">contact us</a> for more information.</p>
</div>
<div class="bot-logo"></div>
</div>
</div><!-- .entry-content -->
</div>
</body>
</html>
