What steps can I take to ensure that the text content stays within the borders and does not overlap with the photo?

click here for the image description Html

 <p><img src="index-foto1.jpg" align="left" width=65% style="border-radius: 10px;" margin-right: 2px>
      <div class="tant"><h3>More detailed information about Vyshny Volochok can be found at the following links:</h3></div></p>

CSS

.tant{
border:solid;
background-color: d18924;
}

How can I prevent the borders from extending beyond the photo?

The screenshot demonstrates my issue. I attempted using margins, thinking it would help. I also tried to confine the div to the elements.

htmlcss

Answer №1

It appears that when you specify align: left, you may actually intend to use float: left instead. If that's the case, you can implement the following CSS:

img {
  border-radius: 10px; 
  float: left; 
  margin-right: 10px;
}
.tant {
  background-color: pink; 
  border: 1px solid; 
  display: flow-root;
}
<p><img src="//unsplash.it/800/800" width=65% >
  <div class="tant">
  <h3>More detailed information about Vyshny Volochyok can be found at the following links:</h3>
  </div>
</p>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The jQuery toggle functionality seems to be malfunctioning

I have created a form that should toggle (hide and show) with the click of a button, but for some reason it's not working. Can someone please take a look at my code below and let me know what I'm doing wrong? $(document).ready(function () { ...

javascriptjqueryhtmlcss

Navigating the browser view across an extensive HTML page without relying on scrollbars

I have a large HTML page (approximately 7000x5000) and I need to be able to move the user's view around with JavaScript. Disabling the ability for the user to scroll by hiding the browser scrollbars using overflow:hidden on the HTML element is easy. ...

javascriptjqueryhtmlview

Is there a way to hide my jQuery menu?

Can anyone help me figure out how to make it close when I click on a link? <nav class="navigation"> <a href="" class="menuIcon"><i class="fa fa-bars"></i></a> <ul class="nav"> <li class="clearfix"&g ...

jqueryhtmltwitter-bootstrapdrop-down-menumenu

Dynamically insert <td> elements into <tr> element using both jQuery and JavaScript

I am facing an issue with adding a new table data (td) element dynamically to the first table row (tr) in my JavaScript code. Here is the original table before adding the new td element: <table> <tbody> <tr> <t ...

javascripthtmljqueryangularjsjquery-ui

Enhanced jQuery Embed Code validation for user input using a textarea

Currently, I am developing a website that allows users to input embed codes from popular platforms such as Twitter, YouTube, Instagram, Facebook, and so on. The embed code undergoes validation checks and is saved if it meets the criteria. However, when us ...

javascriptjqueryhtmlvalidationembed

Enhance the spacing between the UL-LI navigation menu and the currently selected item

I'm struggling with adjusting the spacing between items in my navigation menu, specifically the li elements that are currently too close together. I've attempted to increase the margin-left within the .main_menu li CSS rule, but it doesn't s ...

htmlcss

What is the method for linking an icon in an iconfont using a keyword?

For my project, I would like to incorporate icon fonts and customize the font file using FontForge. I understand that glyphs can be referenced by unicode in HTML or CSS, for example <i>&#xe030;</i> and &::before{content: "\e030";} ...

cssfont-facewebfontsicon-fonts

Developing interactive filter buttons with unique identifiers to sort and display elements that share the same identifier

My website has filtering buttons labeled "UI, DEVELOPMENT, DATABASE, etc." <ul class="tags_list"> <li><a href="#" id="tag_ui">Ui</a></li> <li><a href="#" id="tag_database">Database</a></li> ...

jqueryhtmlfilter

choose a selection hopscotch

Is there a way to prevent the input field from jumping out of alignment when an option is selected in these q-select inputs? I want to fix this issue so that the field remains in line with the horizontal alignment. https://codepen.io/kiggs1881/pen/RwENYEX ...

cssvue.jsquasar-framework

Steps for setting a background image for a div

I am facing an issue with 3 horizontally aligned images and a background image. The problem is that when I set the background image for the aligned images, it flows over them instead of staying behind. I want the 3 aligned images to be on top of the backgr ...

htmlcss

Turn off the nicescroll scroll bar that appears as a default feature

Is there a way to disable the nicescroll scroll bar that appears in red by default on my html page? It's causing issues with zooming in and breaking the layout. ...

javascripthtmltwitter-bootstrapjsp

Angular: Implementing asynchronous data retrieval for templates

I am currently facing the following issue: I need to create a table with entries (Obj). Some of these entries have a file attribute. When an entry has a file attribute (entry.file), I need to make a backend call to retrieve the URL of that file: public g ...

htmlangulartypescriptrxjs

Styling borders of an image

I am working on an application where I have a collection of images. When the user clicks on an image, it receives a thick border around it at a certain distance. Now, I want to customize this border to reduce the spacing between the image and the border b ...

androidcss

Struggling with configuring a personalized version of Bootstrap 4 in Sass

I am currently in the process of creating a custom version of Bootstrap 4. One of the main changes I want to make is switching the default color ("primary") from Bootstrap Blue to something different. Initially, I made the edits directly to the Bootstrap ...

cssbootstrap-4sasscustomization

Differences in React projects utilizing materialize-css compared to those using react-toolbox or material-ui

Is there a difference in technical benefits or code reliability when directly using material-css in JSX versus utilizing JSX specific libraries like material-ui or react-toolbox? Conversely, could using JSX libraries like material-ui or react-toolbox provi ...

javascriptcssreactjsmaterializematerial-ui

My images seem to lose control and go completely wild when I try to turn them into hyperlinks

Seeking advice on why my social icons are behaving strangely. This is a new issue for me and I suspect that some other CSS is causing the problem, but I can't seem to locate it. I want to ensure that the formatting of these images remains consistent ...

htmlcssanchor

Assign the two values to variables in the CSS script

My challenge lies in passing two values to the CSS within the <style> tags. The values are: (background-color: --placeholder; color: --placeholdtext;). I am able to pass either one of the values successfully, but not both at the same time. When I cop ...

javascriptjquerycss

Personalized text hues for your WordPress product page

As someone who is new to all of this, please keep that in mind :/ I decided to remove the "add to cart" button from my theme (blocksy) so I could insert my own buttons within the product page under the "short description" text. I needed two "download" but ...

csswordpressbuttoncolors

The functionality of my PHP code for email transmission is currently malfunctioning

I'm having trouble sending mail from my HTML form using PHP. I've uploaded the necessary files to my hosting server but the mail is still not being sent. Here is my HTML code: <!-- Form --> <form action="http://example.com/sendEmail.php ...

phphtmlemail

How can we prevent the modal from extending beyond the boundaries of the phone screen when zoomed in

I am currently developing a web application that features a large content page, specifically a map which should display detailed information upon zooming in similar to Google Maps. The interactive elements on my map are clickable, triggering a modal popup ...

javascriptcssangularjstwitter-bootstrapbootstrap-modal