I'm trying to figure out how to align an image to the left, some text to the top right, and some text to the bottom right. The parent div contains a background image.
<div id="parent" style="background: url(bg.jpg) repeat-x left top">
<img src="a.png"> <!--align left-->
"Some text A" <!-- align on right top -->
"Some text B" <!-- align on right bottom -->
</div>
Any help would be appreciated. Thank you!
Check out this code snippet
<div id="parent" style="position:relative;width:300px;height:300px;background: url(http://wallpaperplus.org/wp-content/gallery/019-wallpaper-wallpaper-03/desktop-wallpaper-52.jpg) repeat-x left top">
<img width=100 height=300 src="http://stichtingpani.nl/wp-content/uploads/2011/11/google_logo.jpg" align="left"> <!--align left-->
<span style="position:absolute;top:10px;"> "Some text A"</span> <!-- align on right top -->
<span style="position:absolute;bottom:10px;v-align:top;">"Some text B" </span><!-- align on right bottom -->
</div>
MODIFICATION
I have made some alterations to the example provided
REVISION 2
To achieve the desired outcome, ensure that your parent div has a position:relative. This will cause all "absolute" positioned elements to be aligned relative to the container div, not the top right corner of the browser viewport.
Specify the width and height of the container div so that it occupies the necessary space for your design. This way, you can work with defined dimensions.
Add span containers for the text and position them absolutely at the top and bottom for proper alignment.
For the <img> tag, utilize the align="left" attribute to align it to the left, allowing text flow to the right.
If you're looking to achieve a similar effect, you might want to consider the following code snippet: Check out My Fiddle
Preview
Cascading Style Sheets
.text1 {
position: absolute;
right: 10px;
display: block;
}
.text2 {
position: absolute;
top: 30px;
display: block;
}
HyperText Markup Language
<div id="wrapper" style="background: url("") repeat-x left top">
<img src="https://example.com/image.png" style="float: left;"> <!--align towards left-->
<span class="text1">"Some text One"</span> <!-- align on upper right corner -->
<span class="text2">"Some text Two"</span> <!-- align on lower right corner -->
</div>
Can the HTML be tweaked slightly? Maybe something like this:
<div id="container" style="background: url(bg.jpg) repeat-x left top">
<div class="right">"Some text A" <!-- align on right top --></div>
<div><img src="a.png"> <!--align left--></div>
<div class="right">"Some text B" <!-- align on right bottom --></div>
</div>
.right {text-align: right;}
Alternatively, if you prefer the text to align within the image, a small CSS adjustment may be needed:
#container {position: relative;}
.right {text-align: right; position: absolute; bottom: 0; right: 0;}
.right:first-child {bottom: auto; top: 0;}
One suggestion to consider is the following setup:
<div id="parent" style="background: url(bg.jpg) repeat-x left top">
<span style="float:right">"Some text A"</span> <!-- aligned on the right top -->
<img src="http://static.adzerk.net/Advertisers/e395a21294854772970cdd37e15bbb78.png"> <!-- aligned on the left -->
<span style="float:right">"Some text B"</span> <!-- aligned on the right bottom -->
</div>
Here's a demo of this setup in action: http://jsfiddle.net/kbpBK/1/
Is there a more efficient method to compile my sass files with sourcemap enabled other than using the command below? sass --compass --sourcemap --style compact --watch sass:css In the case of utilizing compass, 'compass watch' would be the pref ...
While browsing the web, I came across a website with a strange red blob in the URL. It's something I've never seen before. What could possibly be the reason for this unique feature?! Note that you have to visit the page to see it for yourself. T ...
Any tips on how to apply a 'transparent' style background property to my SwipeableDrawer component from Material UI? I'm having difficulty changing the background directly from my code since the component generates another component in the H ...
Issue with Multiple Drop Down Checkbox Functionality: The first parameter is always received as undefined, and the onchange event only captures the value of the first checkbox selected. <select name="multicheckbox[]" multiple="multiple" class="4colacti ...
I have noticed that my custom CSS file does not override the bootstrap.min.css unless I include the !important tag in the class. Specifically, when I try to change the color of my background header. .bg-grey{ background-color:#333 !important; } The ...
Exploring the visualization of waveform and FFT generated by the audio stream from the microphone through the WebAudio API. Curiosity strikes - what is the size of each data array available at a given moment? Delving into the getByteTimeDomainData, it men ...
I recently created a website that is optimized for tablet screens and included images. However, I noticed an unwanted gap between the first column and third column that needs to be fixed. My plan is to adjust the layout using Bootstrap code or another meth ...
I have implemented animate.css for a login form, but it is not behaving as desired. Currently, I am utilizing the fadeInDown animation, however, it is fading in from a greater distance than intended. I would prefer it to fade in from just around 20px below ...
I have used an Ajax call to fetch data from a function that returns an entire HTML table. $.ajax({ url: "/admin/project/getProjectTrackedTimes", headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('cont ...
I would like to retain form values after submission. I have come across some techniques that claim to do just that: However, when I try to run the HTML file, I encounter two issues: firstly, the code does not function as intended and secondly, PHP snippet ...
When submitting my HTML form, the hidden elements with display:none are also being posted. How can I prevent this from happening? ...
My goal is to design a simple webpage with two full screen background colored divs. On top of these background divs, I want to add two smaller divs where I can input text and place a button underneath to randomize the words (refer to the attached screensho ...
Let's discuss the problem at hand: I have an HTML code snippet: <div id="container"> <div id="fixedImg"></div> <div id="content" class="clearfix"> asdf <br /> asdf <br /> df<br />asdf & ...
Imagine having this example tag <root> <foo> </foo> </root> with the following html form <form action="foo.php method="post"> <input type="text" name="something"> <input type=" ...
I'm dealing with a webpage that pulls in a long section of divs from another application. Unfortunately, I can't filter the divs before they appear, but I urgently need to hide any duplicate data within certain values using jQuery. The duplicate ...
I'm encountering difficulties with a simple task. My goal is to display a PDF using the HTML <object> tag within a Bootstrap modal. I've put together a Plunkr to illustrate the issue. Essentially, there is a straightforward <object> ...
I recently launched a WordPress website dedicated to education. In order to make some adjustments, I added subheaders to each page with a simple display:none setting. Surprisingly, while everything looked perfect on desktop view, I noticed some extra spa ...
I have a straightforward form with a file input and a submit button. Our 508 compliance testers are encountering an issue during testing. When navigating to the FILE input field and pressing 'enter,' Internet Explorer submits the form. As far as ...
I am struggling to extract data from a specific webpage (). Even though I can successfully gather information from the initial page, whenever I attempt to navigate to subsequent pages, it continues to display the same dataset. It seems to retrieve the iden ...
I am attempting to fade out a div upon click while also adjusting some CSS properties. The problem I am encountering is that the CSS properties change during the fade out transition, instead of after it has completed. I would like the values to change onc ...