Image and text wrap

Krygore · March 8, 2021, 7:22am

I’m attempting to align my image to the right of the screen with the text wrapping to the left of the image. When I use the float property, My image ends up bigger than the background for my section tag. Is there a way to fit my image into the section background and have it float right without breaking the boundaries?

Here’s my code and screenshots.

Without float attribute:

with float attribute:

Code:

<!DOCTYPE html>
<html>
	<head>
		<title>Learn to Carve</title>
			<meta name="description" content="Awesome blog by Michael Wilcox">
			<meta name="keywords" content="web design blog, chainsaw carving blog, Michael Wilcox">
			<link href="carving_guide.css" type="text/css" rel="stylesheet">
	</head>
	<body>
<!--body starts here-->
		<header>
			<h1>Chainsaw Carving Guide</h1>
			<nav>
				<ul>
					<li><a href="#" target="_blank">Tools</a></li>
					<li><a href="#" target="_blank">Quick Guides</a></li>
					<li><a href="#" target="_blank">Detailed Guides</a></li>
					<li><a href="#" taget="_blank">Free Patterns</a></li>
					<li><a href="#" target="_blank">Gallery</a></li>
				</ul>
			</nav>
		</header>
		
		<h2>Welcome to the free online Chainsaw Carving Guide!</h2>
		<section class="flex-container">
			
				<img id="ms210" src="images/MS210_Detail.jpg" alt='MS 210C Chainsaw with 12" carving bar.'>
			
			<p>The purpose of this content is to help people understand the concept of chainsaw carving art and to help beginners find the necessary mentality, tools, and safety equipment to get started carving their own masterpieces!</p>
			<p>To get started, click on the subject below you would like to start with! If you are an absolute beginner and want to start from the top, click on <em>Getting Started</em>. If you have already begun your new adventure, use any of the other references to help you with your particular inquiry.</p>
			<p>Please note that chainsaw carving is a <em><strong>very expensive</strong></em> hobby if you don't already have the basic tools to get started. I personally started with a single saw, an angle grinder and a dremel. As your carvings sell or get better and bring more attraction, then get the more expensive and new tools. Don't break the bank before you even get started!</p>
		</section>
		<ul>
			<li><a href="#">Getting Started</a></li>
			<li><a href="#">Drawing</a></li>
			<li><a href="#">Blocking Out</a></li>
			<li><a href="#">Shaping</a></li>
			<li><a href="#">Detailing</a></li>
			<li><a href="#">Burning</a></li>
			<li><a href="#">Stain/Finish</a></li>
		</ul>
		<hr>
				
<!--end of body-->		
	</body>
	<footer>
		<p class="footer"><small>Copyright &copy; 2021, Backwoods Carver</small></p>
	</footer>
</html>

body{
    background:grey;
    padding:10px;
    margin:5px;
    font-family:cursive
}

head{
    background:darkslategrey;
    border-style:ridge;
    border-radius:10px;
    border-color:orangered;
    margin:auto;
}

nav{
    background:darkslategrey;
    border-style:ridge;
    border-color:orangered;
    border-radius:10px;
    padding:10px;
    margin:2px;
    text-align:center;
}

nav ul{
    margin:5px;
}

nav ul li{
    background:linear-gradient(orangered,rgb(50, 50, 50));
    list-style-type: none;
    display:inline-block;
    width:30%;
    padding:.5%;
    margin:.5%;
    text-align:center;
    border-radius:5px;
}

nav ul li a{
    color:white;
    
}

a:hover{
    color:aqua;
}

h1{
    color:orangered;
    text-shadow:5px 6px 10px rgb(2, 0, 107);
    text-align:center;
    background-color:darkslategrey;
    border-style:ridge;
    border-color:orangered;
    border-radius:10px;
    padding:25px;
    margin:auto;
    font-size:60px;
}

h2{
    color:orangered;
    text-shadow:3px 2px 5px rgb(2, 0, 107);
    text-align:center;
    background-color:darkslategrey;
    border-style:ridge;
    border-color:orangered;
    border-radius:10px;
    padding:10px;
    margin:auto;
    font-size:45px;
}

section{
    background-color:darkslategrey;
    border-style:ridge;
    border-radius:5px;
    border-color:orangered;
}

img{
    border-style:ridge;
    border-color:orangered;
    border-radius:10px;
}

p{
    text-indent:30px;
    color:white;
    padding:10px;
    margin:auto;
    font-size:16px;
}

ul li{
    background:linear-gradient(orangered,rgb(50, 50, 50));
    list-style-type: none;
    display:inline-block;
    width:30%;
    padding:.5%;
    margin:.5%;
    text-align:center;
    border-radius:5px;
    box-shadow:3px 3px 6px black;
}

ul li a{
    color:white;
}

footer{
    background:darkslategrey;
    border-style:ridge;
    border-radius:10px;
    border-color:orangered;
    text-align:center;
    padding:10px;
    margin:auto;
}

.footer{
    border-style:none;
}

#ms210{
    width:20%;
    float:right;
}

jwilkins.oboe · March 8, 2021, 7:31am

HI @Krygore!

Welcome to the forum!

It looks like maybe you tried to use flex based on this class name here

But I didn’t see that in your css.

I would personally remove the float, place the p tags in a div and then use display flex. If you want the image on the right than you can move the img tag after the p tag div or use row-reverse.

Hope that helps!

dewslyse · March 8, 2021, 7:42am

You could also manually add and adjust the height property in the image id attribute

Krygore · March 8, 2021, 4:17pm

@jwilkins.oboe I had the same outcome prior to the flex class. I’ll try your suggestion this evening when I get home.

@dewslyse the only reason I haven’t adjusted the height is because I’m trying to maintain the pixel ratio.

Overall, prior to trying @jwilkins.oboe suggestion, you know the outcome I’m looking for, I also want to make sure it auto adjusts for all platforms (browsers, phones, laptop, tablet, etc.)

I hope to try turning the sections into divs and learning more about the flex attribute when I get home. Thank you for your feedback!

jwilkins.oboe · March 8, 2021, 4:43pm

You should look into this as well How To Create Responsive Images

lasjorg · March 9, 2021, 3:47am

You need a clearfix on the container. A quick fix is to use overflow: hidden on the container element.

.flex-container {
  overflow: hidden;
}

You can also apply the clearfix to a pseudo-element.

.flex-container::after {
  content: "";
  display: block;
  clear: both;
}

Usually, you would use it as a separate class for “clearfixing”, but if you only have one float that is a little overkill.

.cf::after {
  content: "";
  display: block;
  clear: both;
}

<section class="flex-container cf">
...content
</section>

Krygore · March 9, 2021, 4:21am

Fixed! Thank you so much! Adding the Flex attribute caused my paragraphs to separate horizontally. However, Using the clearfixing, I got the outcome I was looking for! Thank you @jwilkins.oboe @lasjorg for your help!
@dewslyse I still added a max height

My results!