473,287 Members | 1,582 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

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

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
2 8662
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

0
by: Moluske | last post by:
The web site was on another server i switch to a new one but this server hav now PHP Safe Mode to ON so i get error when creating thumbnail. I cant put PHP Safe mode to OFF. is ther any thing i...
5
by: Richard Barnet | last post by:
I'm trying to style a line break, something like this: <br class="spacer" /> via CSS, but none of the following seems to have any effect. Any ideas? br.spacer { clear: both; height: 50px;...
5
by: Mikko Rantalainen | last post by:
See example at <URL:http://www.cc.jyu.fi/~mira/moz/formtest.php>. The problem is that the label of submit button is always centered on the button regardsless of 'text-align' property in CSS....
4
by: Francesco Moi | last post by:
Hi. I'm trying to place three "<div class=foo>" boxes in the same line: ----html-------------------- <HTML><HEAD> <link href="test.css" rel="stylesheet" type="text/css" /> </HEAD> <body>...
3
by: laredotornado | last post by:
Hi, Below I have an unordered list that is displayed on the same horizontal plane (thanks for the help yesterday). What I am wondering now is I would like the contents of the DIV with class...
1
Fary4u
by: Fary4u | last post by:
Hi Guys i'm trying to upload a file, i've tried 3 different methods but still not work out i don't know how to over come this problem hidden file value, multiple form or popup uploading. 1-...
0
Fary4u
by: Fary4u | last post by:
Hi Guys i'm trying to upload a file, i've tried 3 different methods but still not work out i don't know how to over come this problem hidden file value, multiple form or popup uploading. 1-...
5
matheussousuke
by: matheussousuke | last post by:
Hello, I'm using tiny MCE plugin on my oscommerce and it is inserting my website URL when I use insert image function in the emails. The goal is: Make it send the email with the URL...
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.