PDA

Click to See Complete Forum and Search --> : using display inline and display block

dave17
05-25-2007, 02:50 PM
Hi,

I am trying to display div boxes with specific heights and widths inline, but I am not having much success since display:inline divs seem to ignore specified height/widths.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>testing</title>
<style>
div.box {
display:inline;
width:100px;
height:50px;
background-color:yellow;
border:1px solid;
padding:3px;
margin:3px;
}
img {
height:16px;
width:16px;
}
</style>
</head>
<body>

<div class="box">
<img/>
<span>some text</span>
</div>
<div class="box">
<img/>
<span>some text</span>
</div>
<div class="box">
<img/>
<span>some text</span>
</div>

</body>
</html>

That is the broken down problem. With that code, the divs are displayed inline, but the div isnt displayed properly since the width/height are disregarded (in ff and ie7) and the 1px border is screwed up (in ie7).

The annoying this is that is does EXACTLY what I want when you remove the doctype in ie7 (not much change in ff). So what is the solution to have divs with specified height/widths displayed inline?
holyhttp
05-25-2007, 03:43 PM
Since you want your div box to have a fix width and height, you can add overflow:hidden; as well as the float:left;

As for the border you only specified the border type and width but no color.
This style below works both in IE and FF

div.box {
display:inline;
width:100px;
height:50px;
background-color:yellow;
border:1px solid #000000;
padding:3px;
margin:3px;
overflow: hidden;
visibility: visible;
float: left;
}
dave17
05-25-2007, 03:49 PM
I use overflow hidden in my actual application. I am actually using the float left method as well, but I really want to be able to align the divs in the center, which of course isnt possible if you use float left.
holyhttp
05-25-2007, 04:05 PM
You can align then in the center.
Just define a wrapper box with a specific width and with left and right margin set to auto.
dave17
05-25-2007, 04:07 PM
Sorry to be difficult, but I wanted to avoid that since I wont always know what the width of the wrapper would be (ie its not constant).
holyhttp
05-25-2007, 04:13 PM
In that case you need to give the first box a left-margin:auto and to the third box right-margin:auto
By the way since you specify the width of the each box to be 100px therefore the width of the wrapper could be 300px;
cliffycoder
05-28-2007, 11:57 AM
Did you get this to work, Dave?

This doesn't work for me in IE7 or 6. The best you can do is put the three divs in a container div (at least the width of the 3 divs plus margins) with margin:0 auto. Unfortunately this means you can't have variable width divs (or you can but the float:left will always put them off centre. Exclude the float:left and the widths and heights are ignored as you've found due to display:inline. margin-left:auto and right:auto applied respectively to the left and right divs are resolutely ignored. Overflow and visibility properties are also apparently ignored, as is white-space:nowrap to try and keep the three divs on one line!

I toyed with using spacer images to hold the divs open at the specified widths but display:inline doesn't handle it, just putting the three divs underneath each other.

I would be interested to know the answer.

Red rag to a bull - use a table with 3 cells in place of the 3 divs!!!!

Andy