Member Avatar for agr8lemon

I think this one is simple. I've checked Google but could not find the exact answer so I thought maybe someone here could help.

I have a Div that I would like to float 3 other elements in.

So let's say

<style type="text/css">
.alignleft {
float: left;
}
.alignright {
float: right;
}
</style>

<div id=main>
  <div id=left-float  class='alignleft'>
     <p>Left Text</p>
  </div>
  <div id=right-top class='alignright'>
     <p>Top right Text</p>
   </div>
</br>
   <div id=right-bottom class='alignright'>
      <p>Bottom right Text</p>
   </div>
</div>

So what I would like to have happen is have the left-float div on the left and then the other two divs stacked directly on top of each other. The way it is now is the right-bottom div is below but to the left of the right-top div.

Any help would be great!
Thank you.

  • 2 Contributors
  • 2 Replies
  • 77 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by agr8lemon
Member Avatar for dottomm

Hi.
Try this for your align right

.alignright {
float: right;
clear:both;
}
Member Avatar for agr8lemon

Hi.
Try this for your align right

.alignright {
float: right;
clear:both;
}

Perfect! Thank you so much.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.