CODEWITHSUNDEEP
csscss-float
kritya
kritya

Reputation: 3362

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 html looks such :

<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 div post-user is going outside the border.

How can i fix it ? (P.S. : Its something similar to layout of forums)

Upvotes: 4

Views: 16443

Answers (3)

Ben
Ben

Reputation: 13615

add overflow:hidden to your .main-box css

extensive explenation about how and why it works can be found here

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

A great guide for the working of float can be found here:

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

Upvotes: 6

Josh Darnell
Josh Darnell

Reputation: 11433

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

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

That worked for me =)

Upvotes: 1

ayyp
ayyp

Reputation: 6598

http://jsfiddle.net/PGFTz/5/ I added a clear fix after post-user which allows it to stay within the box.

Upvotes: 8

Related Questions