...

View Full Version : How to control 3 columns in CSS using FLOAT?



Uzair
10-01-2007, 09:59 AM
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

abduraooft
10-01-2007, 10:42 AM
Just try after chnging your CSS like

#wrapper #contents
background-color:#99CCFF;
float:left
width:518px;
}

(Removed margins and added float)

Uzair
10-01-2007, 10:57 AM
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

abduraooft
10-01-2007, 11:57 AM
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)

Uzair
10-01-2007, 12:08 PM
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

abduraooft
10-01-2007, 12:23 PM
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.

Uzair
10-02-2007, 06:08 AM
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/

abduraooft
10-02-2007, 06:11 AM
Its a known issue and the solution is given http://www.positioniseverything.net/easyclearing.html

Uzair
10-02-2007, 06:33 AM
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

abduraooft
10-03-2007, 01:35 AM
See

<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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum