/    Sign up×
Community /Pin to ProfileBookmark

using display inline and display block

Copy linkTweet thisAlerts:
May 25.2007

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.

[CODE]<!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>[/CODE]

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?

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@holyhttpMay 25.2007 — 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;

}
Copy linkTweet thisAlerts:
@dave17authorMay 25.2007 — 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.
Copy linkTweet thisAlerts:
@holyhttpMay 25.2007 — 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.
Copy linkTweet thisAlerts:
@dave17authorMay 25.2007 — 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).
Copy linkTweet thisAlerts:
@holyhttpMay 25.2007 — 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;
Copy linkTweet thisAlerts:
@cliffycoderMay 28.2007 — 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
×

Success!

Help @dave17 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.13,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...