is it possible to float elements inside a absolute div?

Question

So I'm having a little issue with my code and wanted to ask if I can float left and right elements inside an absolute div.

Should I make each element of this div absolute as well and position it to the relative element?

Or is there a way to get around this using floating or other methods?

CSS code:

#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 looks like that:

It should look like this:(final result):

I'm not sure if this can be done without using the (position) thing but I can't really avoid it since I find it fix most of my problems

Thank you for reading my question! and thanks in advance :)

hello steven, im talking about the div on the left side and not the right side, the floating didnt worked for me — Ali Zgheib, Nov 23 '18 at 04:17
Possible duplicate of [How to wrap text around an image using HTML/CSS](https://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html-css) — Ben Tegoni, Nov 23 '18 at 04:27
@AliZgheib you just need to remove the float on the paragraph then. — Steven B., Nov 23 '18 at 04:37

Vijay · Answer 1 · 2018-11-23T04:31:21.610

0

You should not use float:left with p tag Just make float:right in .img-left and remove it from paragraph tag.. And keep the image tag inside the paragraph tag

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

In order to get your desired result

edited Nov 23 '18 at 04:31

answered Nov 23 '18 at 04:17

Vijay

13
1
8

https://ibb.co/bPoScA https://ibb.co/ekAvVV I understood what you are trying to do but i applied it and it wont work. the text is still under the image – Ali Zgheib Nov 23 '18 at 04:25
@Ali Zgheib Try writing image tag nested within paragraph tag bro.. IT will work.. First write the contents of the paragraph then add the image tag – Vijay Nov 23 '18 at 04:28

score 0 · Accepted Answer · answered Nov 23 '18 at 04:18

If you simply just want to make one element go left and one element go right, you can use the following:

You can achieve this by making an inner div which you can expand to be the same size as the outer div using height and width 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>

score 0 · Answer 3 · answered Nov 23 '18 at 04:30

You can set image with content and apply to 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>

score -1 · Answer 4 · edited Nov 23 '18 at 04:33

Yes you can 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>

is it possible to float elements inside a absolute div?

4 Answers4