homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

display: inline with br tag

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


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?




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

Yep. Remove the <br> ;)


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

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)

@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">
border: 1px solid #cc0000;
width: 300px;

display: inline;
border: 1px solid purple;
width: 100px;

display: inline;
border: 1px solid #0000cc;
width: 100px;

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

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.



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

You need to float your divs.

float: left will do the trick


 9:25 pm on Aug 3, 2008 (gmt 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 :(

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved