I require assistance in adjusting my text to properly wrap around the div image

Struggling to make my text fit around the div on this web page.

<div id="othermain">
Are you getting ready for your big day? Do you need alterations or remodeling done to your Wedding Dress, Bridesmaid Dress, or any other Bridal Wear? You're in luck because that's our specialty! </ p><br><br> At Bobbin Alterations, we are committed to ensuring that your dress is tailored perfectly to suit your style and needs for any special occasion. Whether it's a wedding, prom, dinner event, or any other important day in your life, we understand the stress of planning such events and aim to make the process as smooth and worry-free as possible.<br><br> Looking great and feeling comfortable is essential, and with our expertise, we can modify and tailor a dress to accentuate your best features and make you feel amazing.
    <div id="testimonial"></div>
    <br><br>Our standard dress alteration services include:<br>
    <br> - Shortening
    <br> - Seams
    <br> - Hemlines
    <br> - Beading
    <br> - Shoulder Adjustments
    <br> - Straps
    <br> - Veils
    <br> - Zips<br>
    <br>We have had the pleasure of working on countless weddings and proms, taking immense pride in creating happiness through our work.<br>
    <br><br>Use the order form to submit your request, or give us a call at 01325 59976 if you have any questions, to ensure top-notch service and an unforgettable experience.
</div>

Above is the code for bridal.html, and below is the CSS styling for the two elements mentioned:

#testimonial{background: url(../img/testimonial.fw.png); width: 700px; height: 300px; margin-left:320px;  display: block; background-repeat:no-repeat;}

#ordermain {width:1024px; height: 700px}

Any assistance would be greatly valued. I've attempted various approaches. Thank you.

Answer №1

Eliminate the margin on the left side and set the div to float towards the right.

#testimonial{
background: url(../img/testimonial.fw.png);
width: 700px;
height: 300px;
display: block;
background-repeat: no-repeat;
float: right;
}

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

Discover if every single image contains a specific class

HTML : <div class="regform"><input id="username" type="text" name="username" placeholder="Username" required><h3 class="check"><img src=''/></h3></div> <div class="regform"><input id="password" type=" ...

Tips on extracting the image URL from a canvas element using Selenium in Java and leveraging JavascriptExecutor

My main objective is to extract the image URL from a canvas container. Here is what I have attempted: JavascriptExecutor jse = (JavascriptExecutor) driver; Object imageURL = jse.executeScript("arguments[0].toDataURL('image/png');", canvas); Un ...

Adjustable Greybox Overlay Resizes Window Dimensions

Utilizing greybox on my business website allows users to easily log in and access their accounts. View an example of my site However, when the login or sign up window is activated at the top of the page, the page or window size changes, causing scroll bar ...

Creating resizable rows of DIVs using jQuery

I'm currently developing a scheduling widget concept. The main idea is to create a row of DIVs for each day of the week. Every row consists of a set number of time periods represented by DIVs. My goal is to enable the resizing of each DIV by dragging ...

The iPhone screen is unresponsive, causing the webpage to zoom in to the top left corner repeatedly

I've been wracking my brain trying to solve this issue, searching high and low on this site and others for a solution. I've attempted various configurations with the viewport meta tag, removing the fb-root div, ensuring there is no height=100%, b ...

Focusing on a specific image using Jquery

I am looking to specifically target the image within the "hero1project3" class, however, the image is currently set as a background. Is there a way in jQuery to apply effects like blur only to the image itself, for example, using ".hero1project3 img"? HTM ...

Learn the process of generating sequential heading numbers for topic headings in each HTML document using DTA or XHTML

I attempted to include hierarchical numbers for topic headings in dita2xhtml_eclipsehelp.xsl. (DITA OT HTML output) However, I am facing difficulty in producing numbers similar to the following in each html file: 1 heading text 1.1 heading text 1.1.1 Head ...

Hover effect transition malfunctioning

I've been attempting to incorporate a hover image effect on my website. I included the script in the link below. However, I'm struggling to achieve a smooth fade transition and a 2-second delay on the hover image. Can someone please assist me wit ...

Seeking animated SVGs using CSS styling

I've been trying to animate my SVG icon, but I seem to be missing something. I'm still fairly new to CSS animations. The issue I'm facing is that the position of the SVG isn't correct when the website loads. Additionally, during the an ...

Has Apache initiated a forced logout process?

Running a LAMP server, I have implemented Apache basic authentication to log in users accessing the server homepage. I am currently seeking a way to enforce user logout, but my attempts with mod_session & mod_auth_form have not been successful. The page ...

What is the best way to move the Grid upward when the above content is not visible?

Let me demonstrate what I have been working on. Currently, I am creating a weather application to explore the functionalities of https://material-ui.com/. I am attempting to prototype an animation inspired by Google Flights, which can be seen here: https: ...

HTML5 - Pictograms and Visual Elements

I'm having an issue with Font Awesome displaying a symbol as a box instead of what I want. Can anyone provide assistance? Thank you <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Home< ...

Examining website design on an IOS device from a Windows computer

Is there a way for me to test HTML files from Windows on iOS8 (Local Files)? I have tried Adobe Edge Inspect, but it only works with servers. Are there any free cloud hosts that allow for HTML, CSS, and JS files? Edit: I apologize if my question was not c ...

HTML code with embedded messages

I am interested in creating a straightforward message forum system. My goal is to organize messages in a nested structure (answering questions). For my website, I want it to be in Hebrew (dir="rtl"). I am considering generating <ol> elements dynam ...

Issues with AngularJS ng-bind-html failing to display list items

I am working with a basic HTML document that looks like this... <ol> <li><strong>Test 1</strong></li> <li><strong>Test 2</strong></li> </ol> ...and I am attempting to connect it to a div ...

Instructions on deploying static files to Vercel including HTML, CSS, and JavaScript files

I have encountered an issue and would like to share my solution - please see my initial response. Currently, I am facing a challenge while trying to deploy a repository from my GitHub account. The repository consists of various static files: ├─js ...

Accessing the value of a hidden field within an ng-repeat loop when binding to an HTML table

I am working on a project where I have an HTML table with data being bound from AngularJS. The structure looks something like this: <tr ng-repeat="item in List| filter: { MachineType: 'Physical' }"> <td>{{item.MachineType}}< ...

Is there a method to achieve a similar effect as col-md and col-sm but for adjusting height instead?

I'm looking for a way to adjust the height based on the device size like how sm, md, and lg classes work. I'm designing a login form that looks great on cell phones, but appears too tall with excessive spacing when viewed on an iPad. There are la ...

How to determine if an Angular list has finished rendering

I am facing an issue where I have a large array that is being loaded into a ul list using ng-repeat in Angular. The loading of the list takes too long and I want to display a loader while it's loading, but hide it only when the ul list is fully render ...

Page refresh enhances hover effect style

Is there a way to maintain a "hover" style even after a page refresh if the user does not move their mouse? The hover effect is only activated on mouse enter/mouseover events, so when the page refreshes, the style doesn't persist unless the user inter ...