display: inline with br tag

[kpop]

Hi,

I'm learning css. I try to use display inline, but whenever I use a "br" tag inside a div, then any div tag after that (with display: inline) will be pushed down 1 line. Why is it? Is there a way to fix that?

Thanks.

[DrDoc]

Yep. Remove the <br> ;)

[Fotiman]

Have you tried setting display:none on the <br> element?

[edited by: Fotiman at 4:26 am (utc) on Aug. 3, 2008]

[kpop]

@DrDoc: so we can't use <br> with inline? it seems like so.

@Fotiman: I just tried, it worked (or just like DrDoc said, I just need to remove <br> tag), but my main goal is to add a line break (in between texts) to one div while keeping the other divs where they are. Otherwise one div will keep getting wider and wider (with texts) while the one after it will have no room left and gets push down 1 line.

Example below: here "second" div will be pushed down to second line even though it is inlined. then "third" div will be in both 2nd and 3rd line.

<style type="text/css">
<!--
.first{
border: 1px solid #cc0000;
width: 300px;
}

.second{
display: inline;
border: 1px solid purple;
width: 100px;
}

.third{
display: inline;
border: 1px solid #0000cc;
width: 100px;
}
-->
</style>

<div class="first">
display: block asd as asdasd asd asdasdas
<div class="second">display: inline asdasd asd asdasdas</div>
<div class="third">display: inline</div>
</div>

any idea? I want all DIVs to stay on top and whichever has texts longer than the div default width will break and go to a new line.

Thanks

[DrDoc]

You need to float your divs.

float: left

will do the trick

[kpop]

I did that, but let say if I have another wrapper div outside of all of them, then if the inside DIV on the right has very little text in them while the one on the left (float: left) has some big stuff in it then it will overflow the wrapper div because wrapper div only expand (horizontally) according to the right div.
I hope you understand what i'm trying to say :(