Geek Answers Handbook

Css float and border problem

I got this css:

.post-user { background:black; color:white; width:auto; float:left; } .img-side { border-style:solid;border-width:medium;width:75px;margin-bottom:2px; } .top-head { background:cyan; width:100%; height:20px; display:block; } .main-box { border-style:solid; border-width:1px; display:block; height:auto; }

And the html looks like this:

 <div class="main-box"> <div> <div class="top-head"><span>At top</span> </div> <div class="side"> <div class="img-side"> <img src="http://st2.gsmarena.com/vv/pics/htc/htc-snap-1.jpg" width="75px" height="75px" /> </div> <div class="post-user">User name</div> </div> </div> </div>

demo

But the post-user div goes overseas.

How can i fix this? (PS: something like a forum layout)

+4
source share
3 answers

http://jsfiddle.net/PGFTz/5/ I added a clear post-user fix that allows it to stay inside the field.

+8
source

add overflow:hidden in .main-box css

A detailed explanation of how and why it works can be found here.

http://www.quirksmode.org/css/clearing.html

A great guide to working with float can be found here:

http://www.alistapart.com/articles/css-floats-101/

+6
source

You can change float:left to text-align:left

 .post-user { background:blue; color:white; width:auto; /*float:left;*/ text-align:left; }

It worked for me =)

+1
source

More articles:


All Articles