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 5 of 5
  1. #1
    Junior Member
    Join Date
    Jul 2007
    Posts
    7
    Member #
    15596
    Hi!

    I want to right and left align two pictures in a text. I'd like to use css and I heard that I will use float. It works great if there's enough text around, but there isn't.

    The code looks like this
    Code:
    <html>
    <head>
    <style type="text/css">
    body {
    background-color: #f00;
    }
    
    #container {
    background-color: #fff;
    }
    
    .right
    {
    float:right;
    }
    
    .left
    {
    float:left;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="container">
    <p>
    <img class="right" src="http://www.w3schools.com/images/w3default80.jpg"/>
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    <img class="left" src="http://www.w3schools.com/images/w3default80.jpg"/>
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    </div>
    
    
    </p>
    </body>
    
    </html>
    Replace the code in http://www.w3schools.com/css/tryit.a...e=trycss_float with my code and you'll see what I mean. The "container" div ends to soon.

    What should I do? I would rather not use tables for this.

  2.  

  3. #2
    Member
    Join Date
    Jan 2004
    Posts
    62
    Member #
    4758
    You have to play with the overflow option for #container. And if you don't want the images right on the edge of the div you could also use padding or margin. Padding is the easy way out. Also if you want some space between your text and the image padding or margin will do the job.


    Try using this once... it works fine in Firefox but I doubt it will work in IE. Just do a search on Overflow css and you'll find some helpful info.
    Code:
    <html>
    <head>
    <style type="text/css">
    body {
    background-color: #f00;
    }
    
    #container {
    background-color: #fff;
    overflow: hidden;
    }
    
    .right
    {
    float:right;
    padding: 3px;
    }
    
    .left
    {
    float:left;
    padding: 3px;
    }
    
    </style>
    </head>
    
    <body>
    
    <div id="container">
    <p>
    <img class="right" src="http://www.w3schools.com/images/w3default80.jpg"/>
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    <img class="left" src="http://www.w3schools.com/images/w3default80.jpg"/>
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    </div>
    
    
    </p>
    </body>
    
    </html>
    - flipjargendy

  4. #3
    Junior Member
    Join Date
    Jul 2007
    Posts
    7
    Member #
    15596
    You're right, it doesn't work in IE. But I would like it to work with IE as well.
    I heard of the clear property so I tried to do a real ugly hack that worked.
    It looks like this:
    Code:
    <html>
    <head>
    <style type="text/css">
    body {
    background-color: #f00;
    }
    #maincontainer {
    background-color: #fff;
    }
    #container {
    background-color: #fff;
    }
    #containerend {
    background-color: #fff;
    }
    #containerend p {
    clear: left;
    }
    .right
    {
    float:right;
    }
    .left
    {
    float:left;
    }
    </style>
    </head>
    <body>
    <div id="maincontainer">
    <div id="container">
    <p>
    <img class="right" src="<A href="http://www.w3schools.com/images/w3default80.jpg"/">http://www.w3schools.com/images/w3default80.jpg"/>
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    <img class="left" src="<A href="http://www.w3schools.com/images/w3default80.jpg"/">http://www.w3schools.com/images/w3default80.jpg"/>
    This is some text. This is some text. This is some text.
    This is some text. This is some text. This is some text.
    </p>
    </div>
    <div id="containerend"><p></p></div>
    </div>
    </body>
    </html>
    The reason why I have the maincontainer is simply to make the background white in the gap between the div's. It's super lame but it works. I would appreciate if there is another way to make it work in IE.

  5. #4
    Member
    Join Date
    Jan 2004
    Posts
    62
    Member #
    4758
    Your new code works in Firefox.

    I don't have IE but you could try using margin: 3px; in the float classes. It's just like padding but better. Maybe I misunderstood what you were asking for though... is that what you were thinking of?
    - flipjargendy

  6. #5
    Junior Member
    Join Date
    Jul 2007
    Posts
    7
    Member #
    15596
    The problem is that the lower picture goes further down the page than what the end of #container does. I would like #container to end (e.i. the background seizes to be white and becomes red again) below the picture. When trying your code with firefox I get the right result. That is the result I want for IE as well.


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 11:14 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com