Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 10 of 10
  1. #1
    Member
    Join Date
    Dec 2008
    Posts
    52
    Member #
    17852
    So I have a div, and inside the div I have 2 images. I want the images to sit on top of each other and have my text float to the right of both the images. The problem is when I set a float to the images, one image ends up floating to the right of the other, but I want the images to remain vertical. What is the best way to accomplish this? Am I forced to create another div just for the images, or is there a better way?

  2.  

  3. #2
    Senior Member filburt1's Avatar
    Join Date
    Jul 2002
    Location
    Maryland, US
    Posts
    11,774
    Member #
    3
    Liked
    21 times
    I believe you need a container for them, too. The container itself is floated and the images are block.
    filburt1, Web Design Forums.net founder
    Site of the Month contest: submit your site or vote for the winner!

  4. #3
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    <div id="whatever">
    <img class="whateverclass" src="http://whatever1" />
    <img class="whateverclass" src="http://whatever2" />
    </div>

    #whatever { position: whatever; }
    #whatever .whateverclass{ float: left; clear: both; }

    while($get_it !== true){ continue; }

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I would put each img and corresponding text in their own div. Then float the images left using css. You could wrap them too to keep the width under control.

    View example here

    Something like this:

    <div id="wrap">

    <div class="img_text">
    <p><img src="pic.jpg"/> Then your text would go here</p>
    </div>

    <div class="img_text">
    <p><img src="pic.jpg"/> Then your text would go here</p>
    </div>

    </div>


    CSS

    #wrap {width:500px;} /*add whatever parameters you want*/
    .img_text {clear: both;} /*keeps the image below the div above it and not overlapping*/
    .img_text img {float: left;} /*floats your image*/

    This is bare bones but you can add your padding and stuff to your needs.

  6. #5
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    sizing pics by code is bad practice. you still suffer the load time of the full size image, why would you take more time to load an image then needed for the size image you are viewing. better to have it at the size it will be viewed at instead of wasting load time.

    while($get_it !== true){ continue; }

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Are you referring to my post? I didn't put the image dimensions in there to save me some time, is that what you are talking about?

  8. #7
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    ok well i assumed an undersized div would adversely effect the image size, well i was wrong. so that leaves me in question as to the context of your statement
    " You could wrap them too to keep the width under control "

    look at the source on this to see the div size.
    http://www.studio378d.com/display.php

    while($get_it !== true){ continue; }

  9. #8
    Senior Member Dorky's Avatar
    Join Date
    Jun 2009
    Location
    Destin Florida
    Posts
    1,430
    Member #
    19103
    Liked
    4 times
    oh i see. well i didnt understand the question to be one about div sizing for text and all. for me the question was about floating the images. at least that was how i undersrood it.

    while($get_it !== true){ continue; }

  10. #9
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Yeah it will overflow the div. I meant to control the overall box in which all the divs reside. That's me as I wrap things up even when they don't need to be maybe. In this case it will allow to not specify a width for those img_text divs. There's a few ways to do it. Mine is probably 1 in 10 ways.

  11. #10
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Quote Originally Posted by Dorky
    oh i see. well i didnt understand the question to be one about div sizing for text and all. for me the question was about floating the images. at least that was how i undersrood it.
    Right but floated elements behave much more predictable when they are inside something with a width. So there was 2 issues there I wanted to address. Like I said, there are a few ways to do it, that's just mine.;-)


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 04:58 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com