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 10 of 10
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post

    Question How to control 3 columns in CSS using FLOAT?

    Please go to http://www.uzairusman.com/css/

    Look at the right side column, it goes beneath the other 2 columns. Please guide me how can I align them horizontally.

    Regards,
    Uzair

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Just try after chnging your CSS like
    Code:
    #wrapper #contents 
    background-color:#99CCFF;
    float:left
    width:518px;
    }
    (Removed margins and added float)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Uzair (10-01-2007)

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    Thank you very much SIR. You solved my problem
    Now please do 1 more favor for me....
    Again go to the URL http://www.uzairusman.com/css/ & see I uploaded an image "Recent Members".
    Please guide me how can Arrange text with the image like that. I gave IMG "vertical-align:middle" but it only shows 1 text line, when I give a <br />, the new text comes below the image. Please Help again...

    Regards

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    OK, then update your page with html code that you have so far, and upload (giving a link which depicts your expected result would be helpful)
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    I have given the pages+image on the page >> http://www.uzairusman.com/css/
    You can see my code there...

    Waiting for your solution...

    Regards

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Again float is your friend! . Add a float:left to your images, but I think, before doing that you may have to enclose an image and it's text in separate sub-divs so as to overcome the overlap.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    Uzair (10-02-2007)

  • #7
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    Dear Sir,

    Thanks again for helping me but now I am getting another problem
    The main DIV in which I have placed both image DIV & Text DIV don't expands towards bottom
    See the page here & help me again...
    http://www.uzairusman.com/css/

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Its a known issue and the solution is given http://www.positioniseverything.net/easyclearing.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Aug 2005
    Posts
    365
    Thanks
    7
    Thanked 1 Time in 1 Post
    Sir,

    I am not very much expert and this code is very complex. I couldn't understand what is the problem & where to place the code given on that page
    Would u please guide me a little more that how can I fix this?

    Best Regards

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    See
    Code:
    <div class="profbox">
    	<div class="imglft">
    	<img width="45" height="49" border="0" src="thumb_blank.gif" alt=""/>					</div>
    	<div style="margin-left: 40px;" class="imgtxtright">
    	helloooo<br/>sdhfgsjdfs<br/>sdhfgsjdfs<br/>sdhfgsjdfs
    	</div>
    <div style="clear: both;"/>
    </div>
    Setting a margin-left would be more useful than setting float:right to your .imgtxtright
    Last edited by abduraooft; 10-03-2007 at 01:41 AM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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