Can elements be floated within an absolutely positioned div?

Question

Can elements be floated within an absolutely positioned div?

I've encountered a small issue with my code and need some guidance. Is it possible to float elements to the left and right inside an absolute div?

Do I need to make each element within this div absolute as well, positioning it relative to another element?

Alternatively, is there a way to achieve this using floating or any other methods?

Here is the CSS code snippet:

#story{
position: absolute;
margin-top:180px;
margin-left:10px;
width: 450px;
}

#story .img-left{
    float:left;
}
#story p{
    float:left;
}

#sidebar{
    position: absolute;
    margin-top:180px;
    margin-left:550px;
    background-color: white;
    border-style: solid;
    border-color:brown;
    border-width: 5px;
}

My index file currently looks like this:

The desired final result should look something like this:

I'm uncertain if achieving this layout without using the (position) property is possible, but I tend to rely on it as it fixes most of my issues.

Thank you for taking the time to read my query! Your help is greatly appreciated :)

html css

Answer 1

Answer №1

To move one element to the left and another element to the right, you can implement the following technique:

You can create an inner div that has the same dimensions as the outer div by setting its height and width to 100%.

.abs-div {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid green;
  width: 50%;
  height: 50%;
}

.inside-div {
  margin: 0 auto;
  display: block;
  width: 98%;
  height: 98%;
  border: 1px solid red;
}

.inside-div #right-elm {
  float: right;
}

.inside-div #left-elm {
  float: left;
}

<div class="abs-div">
  <div class="inside-div">
    <p id="right-elm">Right Element</p>
    <p id="left-elm">Left Element</p>
  </div>
</div>

Answer 2

To move one element to the left and another element to the right, you can implement the following technique:

You can create an inner div that has the same dimensions as the outer div by setting its height and width to 100%.

.abs-div {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid green;
  width: 50%;
  height: 50%;
}

.inside-div {
  margin: 0 auto;
  display: block;
  width: 98%;
  height: 98%;
  border: 1px solid red;
}

.inside-div #right-elm {
  float: right;
}

.inside-div #left-elm {
  float: left;
}

<div class="abs-div">
  <div class="inside-div">
    <p id="right-elm">Right Element</p>
    <p id="left-elm">Left Element</p>
  </div>
</div>

Answer 3

Answer №2

You have the option to include an image within content and align it using float:right

.abs {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid #999999;
  width: 40%;
}

.inside {
  margin: 0 auto;
  display: block;
  text-align:justify;
}

.inside .leftdiv {
  display:inline-block;
}

.inside .rightimg {
  float: right;
  width:145px;
}

.inside .rightimg img{  
  width:100%;
}

<div class="abs">
  <div class="inside">
    <div class="leftdiv"><div class="rightimg"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></div>Only an entrepreneur can decode this? Below are some pieces in the form of my thoughts, try and see if you create a picture out of it. Charles Darwin once said, “It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change."</div>
    
  </div>
</div>

Answer 4

You have the option to include an image within content and align it using float:right

.abs {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid #999999;
  width: 40%;
}

.inside {
  margin: 0 auto;
  display: block;
  text-align:justify;
}

.inside .leftdiv {
  display:inline-block;
}

.inside .rightimg {
  float: right;
  width:145px;
}

.inside .rightimg img{  
  width:100%;
}

<div class="abs">
  <div class="inside">
    <div class="leftdiv"><div class="rightimg"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" /></div>Only an entrepreneur can decode this? Below are some pieces in the form of my thoughts, try and see if you create a picture out of it. Charles Darwin once said, “It is not the strongest of the species that survives, nor the most intelligent, but the one most responsive to change."</div>
    
  </div>
</div>

Answer 5

Answer №3

Avoid using float:left with the p tag. Instead, use float:right in .img-left and remove it from the paragraph tag. Remember to keep the image tag inside the paragraph tag.

<p>paragraph contents<img src="" style="float:right" ></p>

Follow these instructions to achieve the desired result.

Answer 6

Avoid using float:left with the p tag. Instead, use float:right in .img-left and remove it from the paragraph tag. Remember to keep the image tag inside the paragraph tag.

<p>paragraph contents<img src="" style="float:right" ></p>

Follow these instructions to achieve the desired result.

Answer 7

Answer №4

Absolutely, it is possible to float the element inside the absolute div.

<html>
    <head>
        <style>
            .content
            {
              position: absolute;
              top: 50%;
              left: 50%;
              max-width: 300px;
              width: 500px;
              padding: 100px 0px;
              transform: translate(-50%,-50%);
              border: 1px solid red;
            }
            .element
            {
             float: right;
            }
        </style>
    </head>
    <body>
        <section class="card">
          <div class="content">
            <p class="element">
               Element 
            </p>
          </div>
        </section>
    </body>
</html>

Answer 8

Absolutely, it is possible to float the element inside the absolute div.

<html>
    <head>
        <style>
            .content
            {
              position: absolute;
              top: 50%;
              left: 50%;
              max-width: 300px;
              width: 500px;
              padding: 100px 0px;
              transform: translate(-50%,-50%);
              border: 1px solid red;
            }
            .element
            {
             float: right;
            }
        </style>
    </head>
    <body>
        <section class="card">
          <div class="content">
            <p class="element">
               Element 
            </p>
          </div>
        </section>
    </body>
</html>

Can elements be floated within an absolutely positioned div?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Prevent the occurrence of a fixed height problem associated with the Bootstrap Navbar (Mega Menu)

Is there a quick way to import all available font weights from a Google font?

Toggle the visibility of radio buttons by displaying a hidden div class instead. When the div is clicked, automatically select

You are unable to define a module within an NgModule since it is not included in the current Angular compilation

Python Selenium Timeout Exception Handling

Scrolling Horizontally with a <div> containing <a> and <img> elements

The minimalist responsive menu created using Pure CSS is experiencing issues on the default browser in Android

CSS failed to load on HTML page

Issues with displaying images in IE 11 when using Flex

Convert your flexible designs into dynamic HTML with our Flex to HTML/A

Conceal the scroll bar while the page preloader is active

Learn how to save an image from the uploads folder located in the same directory as your PHP program

HTML5 Embedding a redirect iframe for connection status validation [UPDATE]

Mobile devices are having issues with CSS rendering

file_put_contents - store user-defined variables

Achieving vertical alignment of a flexbox that is stretched without relying on padding or margin

Interactive Click Actions on Rotated Divs

Display and conceal different sections using hyperlinks

Drag a dropdown menu to the bottom left corner and set it to full width on mobile using CSS

Customizing the color of buttons in MUI 4