By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,505 Members | 1,206 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,505 IT Pros & Developers. It's quick & easy.

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

P: n/a
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 <labeltag, how can I achieve
the left to right alignment I am looking for?

thanks,

-Steve

May 28 '07 #1
Share this Question
Share on Google+
2 Replies


P: n/a
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

May 28 '07 #2

P: n/a
On May 28, 7:26 pm, Steve Richter <StephenRich...@gmail.comwrote:
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


May 28 '07 #3

This discussion thread is closed

Replies have been disabled for this discussion.