Results 1 to 7 of 7

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

  1. #1

    Thread Starter
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

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

    Hi guys

    Here's my current code:
    html Code:
    1. <div style="margin:5px; padding:7px; border: 1px solid #3c91e8; font-size:11px;">
    2.                 <div style="width:250px;">You can blah blah here...
    3.                 <br />
    4.                 And more blah blah goes here
    5.                 <br /><br />
    6.                 If you want a blah blah, click here...
    7.                 <br /><br />
    8.                 Thanks for reading this blah blah...
    9.                 <br />
    10.                 </div>
    11.                
    12.                 <span style="float:left;"><a href="#"><img src ="images/mypic.png" /></a></span>
    13.             </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 ?
    Attached Images Attached Images  

    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


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  2. #2
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,531

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

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

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  3. #3

    Thread Starter
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

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

    Quote Originally Posted by techgnome View Post
    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


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  4. #4

    Thread Starter
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

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

    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;">...........
        ..............

    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


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

  5. #5
    Smooth Moperator techgnome's Avatar
    Join Date
    May 2002
    Posts
    34,531

    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.

    -tg
    * I don't respond to private (PM) requests for help. It's not conducive to the general learning of others.*
    * I also don't respond to friend requests. Save a few bits and don't bother. I'll just end up rejecting anyways.*
    * How to get EFFECTIVE help: The Hitchhiker's Guide to Getting Help at VBF - Removing eels from your hovercraft *
    * How to Use Parameters * Create Disconnected ADO Recordset Clones * Set your VB6 ActiveX Compatibility * Get rid of those pesky VB Line Numbers * I swear I saved my data, where'd it run off to??? *

  6. #6
    Frenzied Member
    Join Date
    Apr 2009
    Location
    CA, USA
    Posts
    1,516

    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).

  7. #7

    Thread Starter
    Freelancer akhileshbc's Avatar
    Join Date
    Jun 2008
    Location
    Trivandrum, Kerala, India
    Posts
    7,652

    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


    Skills: PHP, MySQL, jQuery, VB.Net, Photoshop, CodeIgniter, Bootstrap,...

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width