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

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
 
S

Steve Richter

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
 
S

Steve Richter

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top