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 ?
If my post was helpful to you, then express your gratitude using Rate this Post.
And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video) My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet Social Group:VBForums - Developers from India
Re: [CSS] Align a div next to a div (side by side)
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.
If my post was helpful to you, then express your gratitude using Rate this Post.
And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video) My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet Social Group:VBForums - Developers from India
If my post was helpful to you, then express your gratitude using Rate this Post.
And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video) My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet Social Group:VBForums - Developers from India
Re: [CSS] Align a div next to a div (side by side)
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.
Re: [CSS] Align a div next to a div (side by side)
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.
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).
Re: [CSS] Align a div next to a div (side by side)
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
Thanks
If my post was helpful to you, then express your gratitude using Rate this Post.
And if your problem is SOLVED, then please Mark the Thread as RESOLVED (see it in action - video) My system: AMD FX 6100, Gigabyte Motherboard, 8 GB Crossair Vengance, Cooler Master 450W Thunder PSU, 1.4 TB HDD, 18.5" TFT(Wide), Antec V1 Cabinet Social Group:VBForums - Developers from India