Welcome to WebmasterWorld Guest from 54.167.58.159

Forum Moderators: not2easy

Message Too Old, No Replies

display: inline with br tag

     

kpop

11:18 pm on Aug 2, 2008 (gmt 0)

5+ Year Member



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

2:05 am on Aug 3, 2008 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Yep. Remove the <br> ;)

Fotiman

4:15 am on Aug 3, 2008 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month



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

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

kpop

10:43 am on Aug 3, 2008 (gmt 0)

5+ Year Member



@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

8:08 pm on Aug 3, 2008 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You need to float your divs.

float: left
will do the trick

kpop

9:25 pm on Aug 3, 2008 (gmt 0)

5+ Year Member



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 :(