Float: right; is causing distortion to the appearance of Div elements

Question

Float: right; is causing distortion to the appearance of Div elements

I would like to style this image and text so that they float to the right with some spacing around them. However, when using float: right;, they end up extending beyond the default resolution excessively.

#pageMain {
  margin: 100px;
}

#aboutGame {
  float: right;
  width: 420px;
  padding: 10px;
}

#aboutGame span {
  width: ;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

#aboutGame img {
  border: 3px solid black;
}

<section id="pageMain">
  <div id="aboutGame">
    <span>
As if awakening from a deep sleep, you find yourself in a strange, contradictory world of ancient ruins and advanced technology. Tasked by your creator with solving a series of increasingly complex puzzles, you must decide whether to have faith, or to ask the difficult questions: Who are you? What is your purpose and what are you going to do about it?</span>
    <img src="http://cdn.akamai.steamstatic.com/steam/apps/257510/ss_ded5cd1a34df5b4d9015f71caf35db247b2579c4.1920x1080.jpg?t=1498680189" height="500px" width="800px" />
  </div>
</section>

html css

Answer 1

Answer №1

#pageMain {
  margin: 100px;
  overflow: hidden;
}

#aboutGame {
  float: right;
  width: 420px;
  padding: 10px;
}

#aboutGame span {
  width: ;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

#aboutGame img {
  border: 3px solid #000;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
}

<section id="pageMain">
  <div id="aboutGame">
    <span>
As if emerging from a deep slumber, you awaken in a mysterious world of ancient remains and cutting-edge technology. Assigned by your maker to unravel a series of increasingly intricate puzzles, you must choose whether to have faith or confront the tough questions: Who are you? What is your purpose, and how will you respond? </span>
    <img src="http://cdn.akamai.steamstatic.com/steam/apps/257510/ss_ded5cd1a34df5b4d9015f71caf35db247b2579c4.1920x1080.jpg?t=1498680189" height="500px" width="800px" />
  </div>
</section>

I believe this achieves what you intended, as I included some styling for the image tag and added overflow:hidden to the parent #pageMain div to address clearing issues caused by its floated children elements.

Answer 2

#pageMain {
  margin: 100px;
  overflow: hidden;
}

#aboutGame {
  float: right;
  width: 420px;
  padding: 10px;
}

#aboutGame span {
  width: ;
  font-size: 20px;
  font-family: 'Lato', sans-serif;
}

#aboutGame img {
  border: 3px solid #000;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px 0;
}

<section id="pageMain">
  <div id="aboutGame">
    <span>
As if emerging from a deep slumber, you awaken in a mysterious world of ancient remains and cutting-edge technology. Assigned by your maker to unravel a series of increasingly intricate puzzles, you must choose whether to have faith or confront the tough questions: Who are you? What is your purpose, and how will you respond? </span>
    <img src="http://cdn.akamai.steamstatic.com/steam/apps/257510/ss_ded5cd1a34df5b4d9015f71caf35db247b2579c4.1920x1080.jpg?t=1498680189" height="500px" width="800px" />
  </div>
</section>

I believe this achieves what you intended, as I included some styling for the image tag and added overflow:hidden to the parent #pageMain div to address clearing issues caused by its floated children elements.

Answer 3

Answer №2

Your inquiry seems a bit unclear, but let me know if this solution works for you

#pageMain {
  margin: 100px;
}

#aboutGame {
  float: right;
  width: 420px;
  padding: 10px;
}

#aboutGame span {
  width: 100%;
  text-align:right;
  display: block;
  font-size: 20px;
  margin-bottom: 50px;
  font-family: 'Lato', sans-serif;
}

#aboutGame img {
  border: 3px solid black;
  width:100%;
  height: auto;
}

<section id="pageMain">
  <div id="aboutGame">
    <span>
    As if awakening from a deep sleep, you find yourself in a strange, contradictory world of ancient ruins and advanced technology. Tasked by your creator with solving a series of increasingly complex puzzles, you must decide whether to have faith or to ask the difficult questions: Who are you? What is your purpose and what are you going to do about it? </span>
    <img src="http://cdn.akamai.steamstatic.com/steam/apps/257510/ss_ded5cd1a34df5b4d9015f71caf35db247b2579c4.1920x1080.jpg?t=1498680189" />
  </div>
</section>

Updates made in your code:

1. Eliminated the width and height attributes from image tag as per recommendation by showdev since it was causing the image to appear larger than the container itself.

2.

#aboutGame span {
    width: 100%; //Determines the width taken by the span
    text-align:right; //Right aligns the text, other options include left/center/justify based on your requirements
    display: block; //Displays elements as blocks 
    margin-bottom: 50px; //Adds space between image and text
  }

  #aboutGame img {
    height: auto; //Adjusts height according to the width
  }

Answer 4

Your inquiry seems a bit unclear, but let me know if this solution works for you

#pageMain {
  margin: 100px;
}

#aboutGame {
  float: right;
  width: 420px;
  padding: 10px;
}

#aboutGame span {
  width: 100%;
  text-align:right;
  display: block;
  font-size: 20px;
  margin-bottom: 50px;
  font-family: 'Lato', sans-serif;
}

#aboutGame img {
  border: 3px solid black;
  width:100%;
  height: auto;
}

<section id="pageMain">
  <div id="aboutGame">
    <span>
    As if awakening from a deep sleep, you find yourself in a strange, contradictory world of ancient ruins and advanced technology. Tasked by your creator with solving a series of increasingly complex puzzles, you must decide whether to have faith or to ask the difficult questions: Who are you? What is your purpose and what are you going to do about it? </span>
    <img src="http://cdn.akamai.steamstatic.com/steam/apps/257510/ss_ded5cd1a34df5b4d9015f71caf35db247b2579c4.1920x1080.jpg?t=1498680189" />
  </div>
</section>

Updates made in your code:

1. Eliminated the width and height attributes from image tag as per recommendation by showdev since it was causing the image to appear larger than the container itself.

2.

#aboutGame span {
    width: 100%; //Determines the width taken by the span
    text-align:right; //Right aligns the text, other options include left/center/justify based on your requirements
    display: block; //Displays elements as blocks 
    margin-bottom: 50px; //Adds space between image and text
  }

  #aboutGame img {
    height: auto; //Adjusts height according to the width
  }

Float: right; is causing distortion to the appearance of Div elements

Answer №1

Answer №2

Similar questions

The icon on the left displaying peculiar conduct

Showing the total quantity of products, reminiscent of a virtual shopping basket

Create a `div` element that transforms into a box when hovered over and displays text

Guide to displaying a table enclosed in a div based on a selected value in a select dropdown?

Display a still image in cases where the browser does not support 3D images

Highlighting the current menu item by comparing the URL and ID

Analyzing comma-separated values file and transforming the information into a modifiable format

extracting values from an HTML document to populate a Java email template

Guide to eliminating the arrow from a dropdown menu in Bootstrap 4

Conflicts in SwiperJS Timeline Management

Tips for extracting the src attribute from a dynamically generated iframe

"Enhance Your Design with Hovering CSS Backgrounds

Issues with ng-bind-html in AngularJS and JavaScript are preventing it from functioning

`How can I use JavaScript to display a modal?`

Does a pointer event match the 'click' event?

Can you explain how to set a title to align with the object on the far left within a Grid component using justify="space-between" in Material UI?

The new button placed on a <div> was not initialized to trigger my greasemonkey functions

Ways to conceal text links on mobile devices using Bootstrap 4

Eliminate any space from the navigation bar on my website

How to position Bootstrap inline checkboxes to the left or right within a form well?