homepage Welcome to WebmasterWorld Guest from 54.205.52.110
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
display: inline with br tag
kpop




msg:3714036
 11:18 pm on Aug 2, 2008 (gmt 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.

 

DrDoc




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

Yep. Remove the <br> ;)

Fotiman




msg:3714113
 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]

kpop




msg:3714189
 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">
<!--
.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




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

You need to float your divs.

float: left will do the trick

kpop




msg:3714402
 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