What is the proper way to utilize a <DIV> element when adding a border to the right side?

Currently, I am enrolled in an online HTML course through my local community college, and I must say, it's quite challenging.

"For your upcoming assignment, you are required to construct an HTML document incorporating the div element to feature your favorite movie. This will involve inputting the movie title, release year, the main actor/actress along with their character's name. The div element should be displayed on the right-hand side of the page. Refer to the example below for guidance on the structure your .html file should follow.

This is the code I have managed to put together thus far. I require some assistance with figuring out how to align the text with the border to the right side of the page without the use of CSS.

<div align="right" style="border: 1px solid black" hj>
  <h1><span>Inception</span></h1>
  <h2><span> Release year: 2010 </span></h2>
  <h3><span> Leonardo DiCaprio as Dom Cobb </span></h3>
</div>

<h2> My Three Favorite musical acts are: </h2>

<ul>
  <li>Korn</li>
  <li>Bring Me the Horizon </li>
  <li> Linkin Park </li>
</ul>

<h2> My Three Favorite Foods are: </h2>

<ol type="i">
  <li>Pizza</li>
  <li>Ceviche</li>
  <li>Burger</li>
</ol>

<h2> My dream Vacation is: </h2>
<p> Europe </p>
<dl> My dream vacation would be to visit europe and it's major cities. Paria, London, Berlin just to name a few. </dl>

Answer №1


It appears to be functioning in this manner. I have also enhanced your <dl> element, which was previously not correctly formatted, by inserting the <dt> and <dd> tags inside.

Cheers

<!DOCTYPE html>
<html>

<head>
    <title>Page title</title>
</head>

<body>
    <div style="border: 1px solid black;float:right;width:300px;padding:10px;">
        <h1><span>Inception</span></h1>
        <h2><span> Release year: 2010 </span></h2>
        <h3><span> Leonardo DiCaprio as Dom Cobb </span></h3>
    </div>

    <div style="float:left;margin-left: 10px;">
        <h2> My Three Favorite musical acts are: </h2>

        <ul>
            <li>Korn</li>
            <li>Bring Me the Horizon </li>
            <li> Linkin Park </li>
        </ul>

        <h2> My Three Favorite Foods are: </h2>

        <ol type="i">
            <li>Pizza</li>
            <li>Ceviche</li>
            <li>Burger</li>
        </ol>
        <h2> My dream Vacation is: </h2>
        <dl>
            <dt>Europe</dt>
            <dd>My dream vacation would be to visit europe and it's major cities. Paria, London, Berlin just to name a few.</dd>
        </dl>
    </div>

</body>

</html>

Answer №2

give this a shot:

<div align="right" style="border: 1px solid black;float:right;width:300px" hj>
  <h1><span>Inception</span></h1>
  <h2><span> Release year: 2010 </span></h2>
  <h3><span> Leonardo DiCaprio as Dom Cobb </span></h3>
</div>

<div style=" float:left;">
    <h2> My Top Three Bands: </h2>

    <ul>
      <li>Korn</li>
      <li>Bring Me the Horizon </li>
      <li> Linkin Park </li>
    </ul>

    <h2> The Best Foods Ever: </h2>

    <ol type="i">
      <li>Pizza</li>
      <li>Ceviche</li>
      <li>Burger</li>
    </ol>
</div>
<h2> Fantasy Vacation Spot: </h2>
<p> Europe </p>
<dl> My dream getaway includes exploring major cities in Europe like Paris, London, 
 Berlin, and more. </dl>

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

JavaScript WYSIWYG Algorithm

Despite my searches on SO, it appears that most questions revolve around simply making a div editable using contenteditable="true". I am interested in finding the most effective method for tracking all formatting tags applied to a document. Merely togglin ...

Is there a simple method to convert XML to HTML and then store the resulting HTML file?

Looking to utilize an XML file for creating HTML emails? I can create an XSL file to convert it to HTML, but am unsure how to save or copy the resulting HTML. Simply viewing the source of the XML file shows the original XML source, not the transformed HTML ...

What's the best way to continuously increase my counter using the data received from my AJAX calls?

On the final step of my first ajax project, I have implemented a thumbs-up icon that increments a column in the database when clicked. The following code achieves this: Viewable Page HTML and jQuery: <div id="comment_id">+1</div> <div id=" ...

Shift the plus-minus icon on the bootstrap accordion all the way to the right side

I'm struggling to adjust the position of the plus-minus icon on a Bootstrap accordion to the far right, but my current code isn't producing the desired result. Here's the CSS snippet: .mb-0 > a:before { float: right !important; ...

Unable to display images in the ngImgCrop upload preview modal screen

Currently, I am utilizing ngImgCrop to enable an upload preview and square crop feature for profile pictures. Unfortunately, I am experiencing issues where neither the image preview nor the cropping functionality are being displayed. 'use strict ...

Utilizing CSS3 Animation for enhanced hover effects

I have a setup with two divs. One of the divs expands in height when I hover over it. What I'm trying to achieve is to display text with a fade-in effect somewhere on the screen when I hover over that specific div. Additionally, I want to show another ...

Ways to showcase a website within an HTML document using a URL?

Is it possible to show 2 webpages on a single aspx webpage? For instance, When a user opens the link for www.mywebsite.com, I would like to display both www.google.com and www.bing.com on my homepage. Behind the scenes, I will call two separate URLs an ...

A method for determining the quantity of <li> elements within a <ul> container while applying specific conditions

I am currently using document.querySelectorAll('ul > li').length to count the total number of items in my list. However, I am wondering if there is a way to count only those items that meet a specific condition. For example: <ul> < ...

Navigating to another division segment within an HTML document using the arrow keys: a guide

There are three main div boxes colored pink, red, and green.  I would like to enable movement of all segments using arrow keys. When the page is loaded, the active box will initially be in the 'pink' segment at the center. We can then navigate ...

Display the PHP variable's contents as a text string within an HTML document

Looking at a WordPress PHP script, I came across the following snippet: echo '<div class="slide-media">' . $slide_media . '</div><!--/.slide-media-->' . "\n"; } I am interested in viewing the ...

Using ReactJS and JavaScript to transform an array into a fresh array

I am working with an array that looks like this: var oldArray = [ {number: '12345', alphabet: 'abcde'}, {number: '54321', alphabet: 'abcde'}, {number: '67891', alphabet: 'abcde'}, ...

Unveiling the Mystery: How Browser Thwarts Server Push in HTTP/2.0

After studying the documentation of HTTP/2.0, I discovered that it is feasible to completely close a referenced stream using the RST_STREAM frame. Check it out here: ()! I am curious about how this feature can be implemented in popular web browsers such a ...

JavaScript and CSS animations out of sync in terms of timing

I've been encountering some issues. I have an array containing 5 lines of text that change with a timer, but it seems that the css timer animation might not be synced properly or my @keyframes slidesdown setup could be incorrect. The delay between te ...

The TreeView control displays as a <div> element, which results in an unexpected line break

I am currently working on designing a layout that includes an ASP.NET TreeView control on the left-hand side. However, I am facing an issue where the TreeView renders as a div, causing a line break. I have tried using display:inline, but it doesn't se ...

Issue with Thickbox - showing up towards the end of the page

I'm encountering a strange issue with a PHP page in Wordpress. When I include an inline Thickbox on the page and try to open it, the Thickbox appears at the very bottom of the page, below the footer. Interestingly, I copied the generated HTML code an ...

Scrollbar generation causing spacing issues in Internet Explorer

So I've been working on implementing a scrollable div with a specific code overflow: auto; However, for some reason, when viewed in Internet Explorer, the scroll creates an unexpected margin on the right side. It functions properly on both Chrome an ...

Using either Javascript or jQuery, I want to set a value within an if statement

Can I set a value within an if statement, like this: if (a = jQuery("#user > .mask.fix > .a1").css('display') != 'none'){ b = a + 'hello'; //b=jQuery("#user > .mask.fix > .a1").css('display')+&apos ...

Why does my dialog box only open the first time and not the second time?

I have created my own custom dialog box using jQuery and it seems to be working fine initially. However, after closing it once, when I try to open it again nothing appears. Can anyone help me identify what's causing this issue? Below is the source co ...

Both radio buttons are being chosen simultaneously

<div class="container"> <div class="row"> <form> <div class="form-group"> <label>username</label> <br /> <input type="text" class=" ...

Is it possible to apply capital spacing in CSS for OpenType fonts without using font-feature-settings?

Is it possible to adjust capital spacing (cpsp) for an element without impacting any other applied OpenType features? Unfortunately, utilizing the font-feature-settings is not a viable solution. For example, if we use font-feature-settings: 'cpsp&apo ...