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

  • Thread starter Thread starter Steve Richter
  • Start date Start date
S

Steve Richter

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
 
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
 
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
Click to expand...


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