Welcome to WebmasterWorld Guest from 54.167.46.29

Forum Moderators: not2easy

Message Too Old, No Replies

display: inline with br tag

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

New User

5+ Year Member

joined:June 10, 2006
posts:34
votes: 0


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.

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

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


Yep. Remove the <br> ;)
4:15 am on Aug 3, 2008 (gmt 0)

Senior Member from US 

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

joined:Oct 17, 2005
posts:4965
votes: 10


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

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

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

New User

5+ Year Member

joined:June 10, 2006
posts:34
votes: 0


@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

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

Senior Member

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

joined:Mar 15, 2002
posts:6807
votes: 0


You need to float your divs.

float: left
will do the trick
9:25 pm on Aug 3, 2008 (gmt 0)

New User

5+ Year Member

joined:June 10, 2006
posts:34
votes: 0


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

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members