[RESOLVED] [CSS] Align a div next to a div (side by side)

Hi guys :wave:

Here's my current code:

html Code:

<div style="margin:5px; padding:7px; border: 1px solid #3c91e8; font-size:11px;">
                <div style="width:250px;">You can blah blah here...
                <br />
                And more blah blah goes here
                <br /><br />
                If you want a blah blah, click here...
                <br /><br />
                Thanks for reading this blah blah...
                <br />
                </div>
                
                <span style="float:left;"><a href="#"><img src ="images/mypic.png" /></a></span>
            </div>

The above code is inside a div with 430px width. What I want is, after the inner div, I have to display an image (with link). ie., the span in the above code !
I want it side by side. ie, 3/4 of the width is filled with text(from the inner div) and then in the rest of the place the span (image) is displayed.

I have included a demo image(photoshopped image). The present position of the image is shown in red. But what I want is shown in blue.

Any ideas ?
:wave:

float it to the right, not left....

-tg

Quote:

---

Originally Posted by techgnome

float it to the right, not left....

-tg

---

Yeah.. I have already tried that. But that will just display the image to the right and 15% of the image will be above the bottom portion of the border of the box and the rest below it.

I have tried added a float left to the inner div and float right to the span. And that worked. But the new problem is, the border is shrink to a 2px height. :)

Ok.. I found a workaround for the border problem...

I have added a min-height to the outer div. Now it's showing the border.

But isn't there a better way ?

The changes are as follows:

Code:

---

<div style="margin:5px; padding:7px; border: 1px solid #3c91e8; font-size:11px; min-height:100px;">
    <div style="float:left;width:350px;">
    ...............
    ...........
    <span style="float:right;">...........
    ..............

---

:wave:

well, part of that is you're mixing spans and divs... I'd use DIVs exclusively in this case.

anyways, the problem with the shrunken div is that when you float the contents, it no longer knows how large the container needs to be. The way to deal with it is to either 1)define a height for the container div... or 2) anchor the larger inner div and float the other. Since the image is larger than your text, I'd align it to the right, then float your other div tag to the left... at least that's what I'd try doing next.

-tg

Here's what I'd do:

Code:

---

<div style="margin:5px; padding:7px; border: 1px solid #3c91e8; font-size:11px;">
  <a href="#" style="float:right;"><img src ="images/mypic.png" /></a>
  <div style="width:250px;">You can blah blah here...
    <br />
    And more blah blah goes here
    <br /><br />
    If you want a blah blah, click here...
    <br /><br />
    Thanks for reading this blah blah...
    <br />
  </div>
</div>

---

Don't get too crazy with floats if you don't have to, and you don't really need the span around the linked image (as far as I can tell from the markup you've provided) - ideally you want to use as little markup as is necessary to achieve what you want.

Quote:

---

The way to deal with it is to either 1)define a height for the container div... or 2) anchor the larger inner div and float the other.

---

You can also 3) float the container div (floats will contain floats) or 4) assign overflow:auto to the containing div to get it to contain the nested floats, though this may not be appropriate in all contexts (and it requires a valid doctype to work in some browsers - but you should always have a doctype).

Sorry guys, for being late.. I didn't got enough time to stare at this project... :)

I have checked it now and it looks like placing the image above the content and float it to right do the trick :thumb:

Thanks :wave: