Position the text to the right of the div or image and allow

My attempt to align the lorem ipsum sample text next to the image and div container by setting the float to right has not been successful. The text still remains below the image.

Click here for visual reference

Appreciate any help in advance.

#outer {
  float: left;
  background-color: white;
  border-style: outset;
  border-width: 5px;
  border-color: rgb(127, 127, 255);
  padding: 5px;
}
#inner {
  float: left;
  position: relative;
  color: white;
  border-style: outset;
  border-width: 5px;
  border-color: rgb(191, 233, 191);
  padding: 5px;
  margin: 5px;
}
#image {
  clear: both;
}
#paragraph {
  float: right;
  margin: 25px;
}
<html>

<head>
  <title>Div Test</title>
  <link rel="stylesheet" type "text/css" href="chandra.css" />
</head>

<body>
  <div id="outer">



    <h1> The Chandra space-based X-Ray Observatory</h1>

    <div id="inner">
      <a href="http://science.nasa.gov/astrophysics/focus-areas/black-holes/">Nearby black hole</a>
      <br>
      <a href="http://www.nasa.gov/mission_pages/chandra/news/07-139.html" />'Death Star' Galaxy Black Hole</a>
      <br>
      <a href="http://www.nasa.gov/content/black-holes-have-simple-feeding-habits/">Black Holes feeding</a>
      <br>
      <a href="https://www.nasa.gov/jpl/nustar/tale-of-two-black-holes/">Two Black Holes</a>
      </br>
    </div>

    <div id="image">
      <img src="binary.jpg" alt="Binary" style="width:226px;height:170px;">
    </div>


    <div id="paragraph">
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </br>
        </br>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </br>
        </br>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
        survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
        publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>

  </div>
</body>

</html>

Answer №1

Here's a breakdown of my process:

#container {
    float: left;
    background-color: white;
    border-style: outset;
    border-width: 5px;
    border-color: rgb(127, 127, 255);
    padding: 5px;
}
#box {
    position: relative;
    color: white;
    border-style: outset;
    border-width: 5px;
    border-color: rgb(191, 233, 191);
    padding: 5px;
    margin: 5px;
    clear: both;
    width: 200px;
}
#pic {
    //clear: both;
    float:left;
}
#text {
    //float: right;
    margin: 25px;
    text-align: justify;
}

Check out the JSFiddle demo for more details

Answer №2

Give this a try :)

<head>
    <title>Explore the Universe</title>
    <link rel="stylesheet" type "text/css" href="cosmos.css" />
</head>
<style>
    #side {
        width: 30%;
        height: auto;
        padding-bottom: 20px;
        float: left;
    }

    #details {
        width: 70%;
        height: auto;
        float: right;
    }

    #picture {
        width: 30%;
        height: auto;
        position: static;
    }
</style>

<body>
    <h1> Discover the Mysteries of Space with NASA</h1>
    <div id="side">
        <a href="http://science.nasa.gov/astrophysics/focus-areas/black-holes/">Exploring black holes</a>
        <br>
        <a href="http://www.nasa.gov/mission_pages/chandra/news/07-139.html" />'Death Star' Galaxy Black Hole</a>
        <br>
        <a href="http://www.nasa.gov/content/black-holes-have-simple-feeding-habits/">Understanding Black Holes</a>
        <br>
        <a href="https://www.nasa.gov/jpl/nustar/tale-of-two-black-holes/">Insights into Black Holes</a>
        </br>
    </div>
    <div id="details">
        <p>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </br>
            </br>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </br>
            </br>
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galle...

        </p>
    </div>
    <div id="picture">
        <img src="galaxy.jpg" alt="Galaxy" style="width:226px;height:170px;">
    </div>
    </div>
</body>

</html>

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

Is it possible to run a query directly from HTML code?

I am trying to retrieve data from my table that includes two columns: Judul, Isi. <head><link type="text/css" rel="stylesheet" href="addnewpage.css"/</head> <body> <?php $k = mysqli_connect("local ...

Font size transition on pseudo elements is not functioning properly in Internet Explorer when using the "em" unit

When I hover over, the font awesome icon and text on this transition increase in size. All browsers work well with this effect except for IE 11. This example demonstrates the same transition using px (class test1) and em (class test2). While using px wor ...

Position the li elements within the ul at the bottom

I am trying to align a li element at the bottom of a ul list. +------+ | li1 | | li2 | | li3 | | | | | | | | li4 | +------+ Any suggestions on how to achieve this? MY ATTEMPTED SOLUTION: li4 { position: fixed; bottom: 0; } W ...

I am puzzled as to why my text and div boxes are displaying in my navbar/hamburger menu instead of at the bottom of the page

Greetings, everyone! This is my debut post here so bear with me if it's not presented in the correct format. Currently, I am deep into creating a website using HTML, CSS, and just a hint of JavaScript. My primary focus right now is on building the ho ...

Toggle the visibility of a div by clicking on another div in a

I have created a unique design where a div features a background image of a face, along with a paragraph, two buttons, and an input box inside it. While I know this question has been asked before, my scenario is slightly different. I want the div with the ...

Creating a new web application, I require a loading overlay to appear during transitions between pages

I've checked high and low, but I can't seem to find the solution! My webapp has a page that is bogged down with data causing it to load slowly. Is there a way to display a loading div while transitioning to the next page? Perhaps something like ...

Ways to maneuver the vehicle by using the left or right key inputs

I am a beginner with canvas and game development. I am currently working on a project where a car moves in a straight line, but I want to add functionality for the car to turn anti-clockwise when the left key is pressed, and clockwise when the right key is ...

Scrollspy in bootstrap incorrectly highlights the navigation item as active

I seem to be having an issue with bootstrap scrollspy. For example: <header class="header pb-4 pb-lg-0 pt-4 sticky-top bg-white"> ... </header> <div class="container-fluid width content-main" data-bs-spy=" ...

Can an identification be included in a label element?

My inquiry is as follows: <label for="gender" class="error">Choose</label> I am interested in dynamically adding an id attribute to the above line using jQuery or JavaScript, resulting in the following html: <label for="gender" class="err ...

The synergy between HTML and JavaScript: A beginner's guide to frontend coding

I have primarily focused on server-side development of enterprise applications (Java EE, Spring framework). However, I am now exploring client-side technologies for better understanding (not necessarily to become an expert). I have studied HTML and CSS th ...

Mobile device scrolling glitch

I'm currently working on my website, which can be found at . After testing it on mobile devices, I came across an issue that I just can't seem to fix. For instance, when viewing the site on a device with 768px width, you can scroll to the righ ...

What methods are available for drawing on an HTML canvas using a mouse?

I am facing two challenges: how can I create rectangles using the mouse on an HTML canvas, and why is my timer not visible? Despite trying various code snippets, nothing seems to be working. Grateful for any help! HTML: <!DOCTYPE html> <html lan ...

The div remains unchanged when the button is clicked

My webpage is filled with several large div elements. There's a button on the page that, when clicked, should switch to the next div. Despite my efforts, the code I've written doesn't seem to be working as expected. :( This is the HTML st ...

Guide to activating form elements using a JQuery function

I need help setting up a form with 11 rows and 11 columns. By default, the form fields should be disabled, but when I click on an "EDIT" button, they should become enabled. Any assistance would be greatly appreciated. Thank you in advance. Here is my edit ...

Trigger the function in ng-change each time the same option is clicked repeatedly

Here is the code I am working with: angular.module("myApp", []).controller("myController", function($scope) { $scope.currentOption; $scope.showWindow = false; $scope.myOptions = [{ id: 1, name: 'This opens the window' }, { ...

Having trouble aligning the image to the center

After researching and trying various solutions suggested for aligning an image, I am still unable to get it to align as desired. Here is the HTML code snippet: <section> <img class="seattle" src="img/Seattle Pier.jpg" alt="Seattle docks"> ...

Background cutting off right side of HTML website

While updating my supervisor's university website, I noticed a problem with the responsiveness. When resizing the browser window, a horizontal scroll bar would appear and the right side of the website would get covered by the background. On mobile dev ...

Tips on arranging check-boxes horizontally in this code repository

We are working with an autogen form in PHP, and the way the checkboxes are currently displayed is demonstrated in the following code: case FIELD_CHECK_BOX: $fieldHtml = printCheckbox($mode, $field->getId().'[]', $field->get ...

Can we define a style or CSS for one element depending on the characteristics of another element?

One challenge I'm facing involves a 3rd party library (fullcalendar) that automatically sets the height of elements based on internal calculations to ensure they look good in any viewport: <div style="height: 72px;"> Unfortunately, not all ele ...