Tips on arranging text around an image to prevent any overlapping

CLICK HERE FOR THE ISSUE This is the outcome. I prefer the text to be separate from the image.

Answer №1

If you are unsure about how to position your image with text wrapping around it, you can use the 'float' property in CSS to achieve that effect.

HTML:

<div id="container">
    <img src="http://images.all-free-download.com/images/graphiclarge/natural_beauty_highdefinition_picture_166133.jpg"/>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam cursus. Morbi ut mi.</p>
</div>

CSS:

img {
    float: left;
    margin: 0 20px 20px 0;
    width: 160px;
    height: 150px;
}

p {
    text-align: justify;
    text-indent: 2em;
}

Here is a jsfiddle

For more information, you can search for the 'float' property in CSS on Google.

Answer №2

Not entirely clear on your objective, but implementing z-index may resolve the issue:

            <div class="container-fluid" id="circle_div"></div>

            <div class="container" id="div">
                <div class="container box"><h3>Apple</h3>
                    <div id="box1"></div>
                    <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p>

                </div>
                <div class="container box"><h3>Orange</h3>
                    <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p>
                </div>
                <div class="container box"><h3>Banana</h3>
                    <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p>
                </div>
                <div class="container box"><h3>Mango</h3>
                    <p class="mytext">Lorem Ipsum ...Lorem Ipsum.</p>
                </div>
            </div>

            <style>
                .mytext{
                    z-index:1000
                }
            </style>

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 compiler throwing an error claiming that the indexOf method is not a valid

Currently, I am working on a simple form that collects user input and aims to validate the email field by checking for the presence of "@" and "." symbols. However, every time I attempt to run it, an error message stating that indexOf is not a function p ...

Determining the best scenarios to utilize Redux for fetching data from an API call

I decided to incorporate Redux into my project for managing state, along with using Axios for handling API requests. One question that arises is when should I make API calls through Redux actions and when should I directly call the API in a component? Do ...

Building a loading bar using dots

<span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot"></span> <span class="dot">< ...

Having trouble retrieving exchange rates from the state in React after making an API call

import React, { Component } from 'react'; import axios from 'axios'; class SearchCurrency extends Component { constructor() { super(); this.state = { data: {} } } componentDidMount() { axios .get(&apo ...

In PHP/HTML, input submit does not work with CSS styling

I am struggling with styling the input submit button in my form. I want the button to appear as text with a change in background and font color on hover. Any solutions? input[type="submit"] { font-family: made, mirage; text-decoration: none; backg ...

Ways to identify changes in an HTML page following a form redirection

views.py class UpdatePasswordView(PasswordChangeView): form_class = UpdatePasswordForm success_url = reverse_lazy("login") login.html {% if passwordChanged %} <p style="color:green;">Your password has been successfu ...

The forward button on the UI grid pagination remains active even when there are no records to display

I have implemented the ui-grid for my tables, utilizing externalpagination and externalfiltering set to true. However, I am facing an issue where even after the $http request returns no records, the page-forward button remains enabled causing problems in t ...

Assess the equation twice using angular measurement

I am attempting to assess an expression that is originating from one component and being passed into another component. Here is the code snippet: Parent.component.ts parentData: any= { name: 'xyz', url: '/test?testid={{element["Te ...

Include a cancellation symbol to close the Material-UI Drawer

Utilizing an IconButton with an onClick attribute to handle the event of closing a persistent right-hand side Drawer has been effective. Here is the code snippet: const styles = { list: { width: 250, }, fullList: { width: 'auto', ...

Display a modal as the first screen appears in a React Native application

Trying to implement a non-animating modal before the main screen loads on my react-native app. The goal is to display a login screen in a modal view if no user is logged in. Encountering an issue where the main screen briefly appears before the modal, ins ...

Choosing the state object name dynamically within a React JS component

I have a quick question about updating state in React. How can I change a specific object in a copy of the state that is selected using e.target.name and then set to e.target.value? For example, if I want to change newState.age when e.target.name = age i ...

BS4 Dynamic Countdown Clock

I have successfully integrated a countdown timer into my website, utilizing the following HTML code: <div id="clockdiv"> <div> <span class="days"></span> <div class="smalltext">Days</ ...

HTML checkbox utilizing JavaScript

<input type="checkbox" name="smoker"> Is there a way for JavaScript to determine whether the checkbox is checked or unchecked without making changes to the HTML code above? ...

Static Sidebar integrated with Twitter Bootstrap version 2.3.5

Currently, I am in the process of learning how to incorporate a fixed sidebar using Twitter Bootstrap 2.3.5. Below is a snippet of the code I have been working on: <div class="container"> <div class="row"> <div class="span4" id="sid ...

Substitute all web links contained within the DIV

Is there a way to change the URLs within a specific DIV? Here's an example of what I want to do: <div id="SearchList"> <a href="www.google.com/up">up</a> <a href="www.google.com/down">down</a> <a href="www.google.com/ ...

Establishing specific categories for a universal element

I have been working on creating an input component that functions as a custom select for enums in my application. I have tried defining them for different types using concise one-liners but have run into various typing issues. Here is what I have so far: ...

Creating multiple thumbnails and storing them in various folders using CodeIgniter

I am looking to organize my images into different folders - one for original pictures and another for thumbnails. However, when I try to upload an image to the thumb directory, it shows up as empty. https://i.stack.imgur.com/5Fybz.png Below is the code s ...

A layout featuring nested buttons and links within a card element, utilizing the power of Link in NextJs

After extensive searching on S.O., I have been unable to find a solution that works flawlessly. The issue at hand involves a card component in a NextJs application that is encompassed within a <Link> tag. Additionally, there is another <Link> t ...

The functionality of the AJAX Script is failing to load properly on mobile devices

Currently, I am undertaking a project that involves ESP32 Arduino programming to create a webpage where users can interact with buttons to activate relays. Additionally, I have implemented a slider using a short script. This project is inspired by the ESP3 ...

Achieve a stylish layout by displaying three cards per row using Vue.js and Bootstrap 4

I'm facing an issue with my code where I am trying to display Bootstrap cards in rows of three, but the layout is not rendering correctly. It starts with one card, then two, and eventually adds a new column, resulting in some empty spaces with offsets ...