Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    DIV fills remaining horizontal space left by unknown image width to the side - HELP!

    This is a tricky one, and it's nearly making me want to resort to a table... how do you do it??

    What I want is this -

    An image to the left, who's width cannot be specified in the CSS, and then a DIV to the right of it, which fills the remaining space not taken by the image.

    +---------------------------------------------------+
    |+------------++-----------------------------------+|
    || UNKNOWN || NON-FIXED WIDTH DIV ||
    || WIDTH IMG ||
    |+------------++-----------------------------------+|
    | REMAINING SPACE IN BROWSER |
    | |
    +---------------------------------------------------+

    Obviously I can't use float left and then put a left margin on the right hand DIV, because I don't know the margin amount needed.

    This is for a portfolio site where I will have many news articles. Each article will have an image and the text to the right. But the image width will be changing for each news item.

    Please help!

  • #2
    New to the CF scene
    Join Date
    Apr 2009
    Posts
    8
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I may not be much help but what if you set it to float to the left and then set the margin to auto?

    It should then go far left and then adjust the margin to suit?

    I may be wrong, But i've started working with CSS

  • #3
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Unfortunately it doesn't work. It has the same effect as having margin: 0

    Any other suggestions?

  • #4
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    Quote Originally Posted by blondeh View Post
    This is a tricky one, and it's nearly making me want to resort to a table... how do you do it??

    What I want is this -

    An image to the left, who's width cannot be specified in the CSS, and then a DIV to the right of it, which fills the remaining space not taken by the image.

    +---------------------------------------------------+
    |+------------++-----------------------------------+|
    || UNKNOWN || NON-FIXED WIDTH DIV ||
    || WIDTH IMG ||
    |+------------++-----------------------------------+|
    | REMAINING SPACE IN BROWSER |
    | |
    +---------------------------------------------------+

    Obviously I can't use float left and then put a left margin on the right hand DIV, because I don't know the margin amount needed.

    This is for a portfolio site where I will have many news articles. Each article will have an image and the text to the right. But the image width will be changing for each news item.

    Please help!
    Why do you need a div for the text? The general approach to this would be to have the image (floated left), followed by the text (using <p> tags) inside of a container.

    Something like this:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Example</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    </head>
    <body>
    <div style="width:800px;margin:0 auto;">
      <img style="float:left;" src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="an image" />
      <p>Some text next to an image. Add enough text and it will flow underneath the image as well.<br /><br />Here is some lorem ipsum to illustrate:<br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis libero a erat laoreet placerat. Aenean sapien risus, facilisis nec ultricies id, suscipit ac tellus. Mauris quis euismod erat. Donec eu diam a magna imperdiet dictum. Sed sagittis, ipsum imperdiet mattis feugiat, mauris massa iaculis neque, in pellentesque ligula arcu eget lectus. Curabitur luctus hendrerit rutrum. Nullam vehicula tempor convallis. Mauris ac aliquam justo. Maecenas lacinia dignissim sapien nec facilisis. Duis ut sapien orci. Praesent sodales pellentesque malesuada. Vivamus interdum risus et risus ullamcorper at commodo sapien varius. Ut iaculis ligula sit amet orci varius vulputate. Vestibulum pellentesque turpis a nulla venenatis quis mollis dolor consectetur. Maecenas sit amet ornare lacus. In consequat vulputate elit, ac luctus purus fermentum eget.</p>
    </div>
    </body>
    </html>
    Or are you worried about having text wrap underneath the image? If so, then this can be worked out fairly easily with some php. Does your host allow you PHP access?
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting


  •  

    Tags for this Thread

    Posting Permissions

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