Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > ASP .Net > <div style="display:inline;"> not behaving as expected

Reply
Thread Tools

<div style="display:inline;"> not behaving as expected

 
 
Steve Richter
Guest
Posts: n/a
 
      05-28-2007
I would like to use display:inline and other CSS attributes to build
an entry form. Where the heading to the left of the text box is always
a set width.

It is not working so I am experimenting with two divs to get them to
render side by side:

<div style="width:12em;border: 2px solid #EFCE8C; padding:
0.5em;display:inline;">abc</div>
<div style="width:12em;border: 2px solid #EFCE8C; padding:
0.5em;display:inline;">efg</div>

the problem is, when the div style is inline:block the border draws
correctly, 12 ems wide. When I set to display:inline the width:12em is
ignored and the div width is the width of its contents.

I want two divs side by side, the one on the left taking up 12ems of
width space. Why does display:inline ignore the width attribute?
Other than using a table or I guess the <label> tag, how can I achieve
the left to right alignment I am looking for?

thanks,

-Steve

 
Reply With Quote
 
 
 
 
Steve Richter
Guest
Posts: n/a
 
      05-28-2007
ok, float: left gives the desired effect:

<div style="float:left; width:12em;border: 2px solid #EFCE8C;
margin-right:1em; padding:0.5em;display:inline;">abc</div>
<div style="float:left; width:12em;border: 2px solid #EFCE8C;
padding:0.5em;display:inline;">efg</div>

problem is, when I use float:left I cant <br/> to a new line!
<div style="float:left; width:12em;border: 2px solid #EFCE8C;
margin-right:1em; padding:0.5em;display:inline;">abc</div>
<div style="float:left; width:12em;border: 2px solid #EFCE8C;
padding:0.5em;display:inline;">efg</div>
<br/>
<div style="float:left; width:12em;border: 2px solid #EFCE8C;
margin-right:1em; padding:0.5em;display:inline;">abc</div>
<div style="float:left; width:12em;border: 2px solid #EFCE8C;
padding:0.5em;display:inline;">efg</div>

this renders as 4 boxes across the line. What I am finding is as long
as I use float:left, display:block is ignored and the Divs render as
if display:inline is used.

Looking for a rational understanding of CSS. is that possible?

-Steve



 
Reply With Quote
 
 
 
 
Steve Richter
Guest
Posts: n/a
 
      05-28-2007
On May 28, 7:26 pm, Steve Richter <(E-Mail Removed)> wrote:
> ok, float: left gives the desired effect:
>
> <div style="float:left; width:12em;border: 2px solid #EFCE8C;
> margin-right:1em; padding:0.5em;display:inline;">abc</div>
> <div style="float:left; width:12em;border: 2px solid #EFCE8C;
> padding:0.5em;display:inline;">efg</div>
>
> problem is, when I use float:left I cant <br/> to a new line!
> <div style="float:left; width:12em;border: 2px solid #EFCE8C;
> margin-right:1em; padding:0.5em;display:inline;">abc</div>
> <div style="float:left; width:12em;border: 2px solid #EFCE8C;
> padding:0.5em;display:inline;">efg</div>
> <br/>
> <div style="float:left; width:12em;border: 2px solid #EFCE8C;
> margin-right:1em; padding:0.5em;display:inline;">abc</div>
> <div style="float:left; width:12em;border: 2px solid #EFCE8C;
> padding:0.5em;display:inline;">efg</div>
>
> this renders as 4 boxes across the line. What I am finding is as long
> as I use float:left, display:block is ignored and the Divs render as
> if display:inline is used.
>
> Looking for a rational understanding of CSS. is that possible?
>
> -Steve



a combination of float:left, float:none and display:block seems to do
the trick:

<div style="float:left; width:12em;border: 2px solid #EFCE8C;
margin-right:1em; padding:0.5em;display:block;">abc</div>
<div style="float:none; width:12em;border: 2px solid #EFCE8C;
padding:0.5em;display:block;">efg</div>

<div style="float:left; width:12em;border: 2px solid #EFCE8C;
margin-right:1em; padding:0.5em;display:block;">abc</div>
<div style="float:none; width:12em;border: 2px solid #EFCE8C;
padding:0.5em;display:block;">efg</div>
<br />

here is a good discussion:
http://www.webmasterworld.com/forum83/4961.htm




 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Java String.replaceAll() not behaving as expected William Krick Java 4 12-18-2008 03:08 PM
UpdatePanel not behaving as expected DeekoVB5@gmail.com ASP .Net 2 02-18-2008 08:32 PM
custom errors not behaving as expected ilyasdhin@googlemail.com ASP .Net 1 04-16-2007 10:32 AM
writeChars not behaving as expected Ken Kafieh Java 7 05-18-2004 11:58 PM
sys._getframe() not behaving as expected Skip Montanaro Python 0 12-01-2003 09:05 PM



Advertisments