Float moves image down when text is a link

HTML & CSS
1

Whenever I float an image to the side of text and try to make any part of it a link it pushes the image downward, it happens when the whole block (text and image) is a link and even when only the text just above is also, can anyone please help me resolve this?

Css:

#preview  {
float: right;    }
.articlespace {
    padding-left:25%;
    padding-top:5%;
    float: left;
  }
.preview {
max-width: 20%;
max-height: 20%;}

HTML:

<main class="main content" id="about">
<h1 tabindex="-1" id="main">Title</h1>
<article> 
<h2><a href="file.html">text</a></h2>
<section>
<p class="articlespace">text.</p> 
<img src="picture.jpg" class="preview" id="preview" alt=""/>
</section>
</article>
</main>
2

Its hard to see from that snippet what you are attempting but if I can explain how floats work it might help:)

When you float an element then any content in the html that follows after the float in the html will wrap around the float (assuming there is room of course and that the element or the float are not 100% wide).

Content before a float in the html is unaffected by the float. The float will not impact html that is higher in the html source. If it did do this then it would eventually float through the top of the monitor.

Therefore it is only content that follows a float will wrap around the float assuming as I said there is room to do so. It makes no difference if the element is text or a link or another image they will basically behave the same.

In your snippet above the only link is in the h2 which is above the float so will not be affected by the float.

Remember floats are used to allow text to wrap around them but if you are trying to make a columnar layout then you should be using flex or grid instead.

I’d need a more fleshed out version of your code to see what you were doing as the snippet above doesn’t really tell me much other than your are floating stuff left and right.

3

Thank you for responding.

It’s only being used for a preview section of an article, not layout. I’m using css grid for that.

Here is the html for the full page, the reason navigation isn’t in the header area is because when I tried that it wouldn’t show its grid area in my browser. I realise it’s not related, only mentioning it cos it likely looks unusual.

<!DOCTYPE html>
<html lang="en">
<head>
<title>website name</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="all" href="style.css"/>
</head>
<body>
<section class="layout">
<a href="#main" class="skip"> 
go to main content</a>
<header class="header intro">
<p class="sitename">site name
</p>
</header>
<nav class="navigation" >

<ul id="menu">
         <li><a href="filea.html">text</a></li>
              <li><a href="fileb.html">text</a></li>
              
         </ul>      
</nav>
<main class="main content" id="about">
<h1 tabindex="-1" id="main">Title</h1>
<article> 
<h2><a href="file.html">text</a></h2>
<section>
<p class="articlespace">text.</p> 
<img src="picture.jpg" class="preview" id="preview" alt=""/>
</section>
</article>
</main>
<footer class="footer websiteinfo">
<p>text</p>
</footer> 
</section>
</body>
</html>

Here is the relevant css for the page, it’s messy and some parts can be merged.

{
	margin : 0 0 0 0;
	padding : 10 10 10 0;
}padding : 10 10 10 0;
font-face {
	font-family: A;
	src: url('');
}
.layout {
  width: 100%;
  min-height: 100vh;
  display: grid;
  grid:
    "header navigation" auto
    "main main" 1fr
    "footer footer" auto
    / 50% auto;
  gap: 5px 0;
}
.header { grid-area: header; }
.navigation { grid-area: navigation; }
.main { grid-area: main; }
.footer { grid-area: footer; }
.skip {
position: absolute;
  display: inline-block;
  padding: .375rem .75rem;
  line-height: 1;
  font-size: 1.25rem;
  background-color: white;
  color: black;
  }
.skip:not(:focus) {
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}

  
.t:hover,
.t:active {
	text-decoration: underline;
	color:aqua;
}
body {
	margin : 0;
	font-family : Arial;
	font-size : 110%;
	font-style : normal;
	font-weight : normal;
	background-color : azure;
}
	
	
h1 , h2 {font-weight: inherit;}
.intro {
	background : black;
	text-align : center;
}

.intro p {
text-align: center;

}
.preview {
max-width: 20%;
max-height: 20%;}
#preview  {
float: right;    }
.articlespace {
    padding-left:25%;
    padding-top:5%;
    float: left;
  }
.sitename{
	color : powderblue;
	line-height : 2;
	font-size : 150%;
	font-style : oblique;
	font-weight : bold;
	font-family : Cambria;
	padding-top: 2.8%;
}
#menu {
	margin : 0;
	padding-right : 4%;
	list-style : none;
	overflow : hidden;
	font-size : 150%;
}

.navigation {
	background-color: black;
	}
#menu li {
  display: inline;
}

#menu li::before {
  content: "\200B";
}
	
li.current a {color: grey;}

#menu a {
	color : powderblue;
	color : rgba(227, 183, 227, 1);
	font-weight : bold;
	padding : 4.75% 1.80%;
	text-decoration : none;
	line-height : 2.5;
}
.content , .related {

padding: 2% 8%;
text-align:center;}

!main, aside, footer, header, nav{
display:block;}
.content h1 , .aside h1 {
font-size : 110%;
text-align : center;
margin: 1% 0;
padding: .5% 0 2% 0;
	
}
.content h2 , aside h2 {
font-size : 1.1em;
text-align : center;
margin: 1% 0}
.content p , .related p {
margin: 1% 0;
#menu a:link,
#menu a:visited {
  text-decoration: none;
  color:powderblue;
  }
#menu a:focus, 
 a:active {
text-decoration: underline;
	color : gold;
	outline: inherit;}	
#menu a:hover {
	text-decoration: underline;
	color : gold;
	outline: inherit;
}
#menu a:current {
text-decoration: none; color: gold;}

a:visited{
	color :maroon;
}

a:hover{
	outline: solid darkgreen;
}
a:focus, 
 a:active {
outline: solid darkgreen;
}
footer {
background-color: black;
}
.websiteinfo {
	color : white;
}
.websiteinfo p {
text-align : center;
padding: 2% 0}
@media screen and (max-width: 480px) {
  #menu a {padding: .75em 1.50em;
  text-align: center;}
  
.layout {
  width: 100%;
  height: 100%;
  display: grid;
  grid:
    "header" auto
    "navigation" auto
    "main" 1fr
    "footer" auto
    / 1fr;
  gap: 0;}
}
4

Ok I’ve put that code into a codepen (and removed some of the typos) so can you explain which elements you are having a problem with? You say its related to the float but I can’t see anything unexpected but I may be looking at the wrong thing.

PS: Always validate your css regularly as you have some errors creeping in already.

5

Okay, I was trying to replace my original text for something generic in the html, if the text is only a few words it’s not an issue, as it isn’t with your Codepen. When I have it at about a sentence or 2 is when the issue happens.

I’ve changed the text to something longer to show what I mean, should have done that to begin with, sorry. I don’t have a Codepen account, so this is the changed html:

<section class="layout">
  <a href="#main" class="skip">
    go to main content</a>
  <header class="header intro">
    <p class="sitename">site name </p>
  </header>
  <nav class="navigation">
    <ul id="menu">
      <li><a href="filea.html">text</a></li>
      <li><a href="fileb.html">text</a></li>
    </ul>
  </nav>
  <main class="main content" id="about">
    <h1 tabindex="-1" id="main">Title</h1>
    <article>
      <h2><a href="file.html">text in h2</a></h2>
      <section>
        <p class="articlespace">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
        <img src="https://picsum.photos/id/237/200/300" class="preview" id="preview" alt="" />
      </section>
    </article>
  </main>
  <footer class="footer websiteinfo">
    <p>text in footer</p>
  </footer>
</section>

Thank you for reminding me about my css, I’ve changed it so it’s valid. Going to look into replacing clip because it’s depreciated.

6

Ah ok thanks, I can see where you are going wrong now:)

You have floated the articlespace text to the left here:

.articlespace {
  padding-left: 25%;
  padding-top: 5%;
 float: left; 
}

Then you have floated the image to the right here.


#preview {
  float: right;
}

Floats are shrink to fit elements and when no width is provided they will expand to take up all the available horizontal space. That means when you add more text to .articlespace then it will stretch to the full width of the page. The right floated image must move down out of the way because it follows after the articlespace float and there is no room left on that line for it.

What you should have done is float the image to the right but have the image above the .articlespace text in the html and then there’s no need to float the articlespace element at all.

e.g.

#preview {
  float: right;
}
.articlespace {
  padding-left: 25%;
  padding-top: 5%;
  /* float: left; remove this*/
}

Then change the html to this:

     <section>
      <img src="https://picsum.photos/id/237/200/300" class="preview" id="preview" alt="" />
        <p class="articlespace">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
      </section>

That will then display like this:

codepen.io_paulobrien_pen_LYoQZqR_6ece4701851eb3df11b247bdedde4685
codepen.io_paulobrien_pen_LYoQZqR_6ece4701851eb3df11b247bdedde4685902×347 71.3 KB

Codepen updated:

Codepen is free for basic use and a great way to set up demos especially for debugging. You only need a paid account for uploading assets and other extras.

7

Thank you very much, I changed what you said and it works!

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.