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 Coder
    Join Date
    Dec 2011
    Posts
    41
    Thanks
    14
    Thanked 0 Times in 0 Posts

    align left (or float: left) for img in embedded <div> element?

    I have a HTML code like:

    <div class=inline">
    <div class="aaa">
    <div class="image">
    <a href="..."><img .... src="...."></a>
    <a class="magnifier" href="..."></a>
    </div>
    <p class="caption">
    <a href="...."></a>
    </p>
    </div>
    </div>
    <div class="bbb">
    texttext....
    </div>

    As you can see the text does NOT follow directly the <img> element but it is somehow separated by nested <div> elements.
    So the image shows up with NO text at the right side.
    Instead the text starts currently BELOW the image.

    I want however to let start the texttext (from inside the <div class="bbb"> element directly right of the image.

    How can I change (with CSS and without removing <div> elements) the HTML code so that I achieve a text floating ?

    Simply changing

    <img .... src="....">

    to

    <img .... float:right src="....">

    does NOT help. Text still starts BELOW the image.

    BTW: Whats the difference to "align:left"?

    Peter
    Last edited by pstein; 03-03-2014 at 11:59 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,335
    Thanks
    5
    Thanked 363 Times in 360 Posts
    <img .... float:right src="blah blal">
    is not valid mark up. It would be style="float:right;". But, I suggest that you not use inline styles, but rather use external style sheets for styling your markup.

    Could you provide a link to your page? or all your html AND css you have,
    Teed

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,105
    Thanks
    23
    Thanked 594 Times in 593 Posts
    This is one way, maybe not the best, but it gets the job done:
    Code:
    <div class=inline" style="width:200px;float:left;">
    <div class="aaa">
    <div class="image">
    <a href="..."><img .... src="images/1.jpg"></a>
    <a class="magnifier" href="..."></a>
    </div>
    <p class="caption">
    <a href="...."></a>
    </p>
    </div>
    </div>
    <div class="bbb" style="float:left;">
    texttext....
    </div>
    Evolution - The non-random survival of random variants.

    "If you leave hydrogen alone, for long enough, it begins to think about itself."

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    I was gonna say, make sure if you're floating something, you're floating the block wrappers, not the inline elements.


  •  

    Posting Permissions

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