/    Sign up×
Community /Pin to ProfileBookmark

widths not adding up correctly

Copy linkTweet thisAlerts:
Feb 21.2010

In ie8, the following code does not play nicely.

[CODE]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
<style type=”text/css”>
div {
padding: 0px;
margin: 0px;
}
</style>
</head>

<body>
<div style=”width: 200px;border: 1px solid #000″>
<div style=”float:left; border: 1px solid #0F0; width: 98px;”>sdfsd</div>
<div style=”float:left; border: 1px solid #0f0; width: 98px;”>dsfsf</div>
</div>
</body>
</html>

[/CODE]

I expect to see the two divs lined up horizontally next to each other. The problem may be to do with the borders, since if I remove them and set the width of each inner div to 100px it works! Also if I add another pixel to the 200 it shows correctly.

Can some one please help.

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@josephbm91Feb 21.2010 — I'm stumped too.

98px width + 2px for left and right border= 100, *2 is 200. Should add up.
Copy linkTweet thisAlerts:
@ExcavatorakFeb 21.2010 — Hello lemehaveago,

What browser are you viewing this in?

FF3.6 and IE8 both display this as expected.

IE7 displays it as though you've cleared the floats, even though you haven't.

I would need a screencap to even begin to guess how IE6 displays this. That browser often need display:inline; along with float:left/right; to make things work. There are a number of other bugs IE6 has as well, see a list here.

In a modern browser like FF3.6 that code should work just fine. Your box model is right but the layout is tight so older browsers like IE6 may have problems.

To clear the floats, try it like this - [CODE]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div {
padding: 0px;
margin: 0px;
}
</style>
</head>

<body>
<div style="width: 200px;border: 1px solid #000;[COLOR="Red"]overflow:auto[/COLOR] ">
<div style="float:left; border: 1px solid #0F0; width: 98px;">sdfsd</div>
<div style="float:left; border: 1px solid #0f0; width: 98px;">dsfsf</div>
</div>
</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@toicontienFeb 22.2010 — It might sound odd, but float one div "left" and the other "right".
Copy linkTweet thisAlerts:
@letmehaveagoauthorFeb 22.2010 — excavatorak:

adding the overflow:auto to the container div does not fix the problem. It is failing in ie8 and ie7 in standards mode. It is working as expected in firefox. I am not too worried about ie6 as yet.

toicontien:

floating the divs also doesn't work. the right one will be positioned under the left div because its width is a pixel too large to fit.

thanks, is there a fundamental problem with ie8 borders or something?
Copy linkTweet thisAlerts:
@ExcavatorakFeb 22.2010 — 

adding the overflow:auto to the container div does not fix the problem. It is failing in ie8 and ie7 in standards mode. It is working as expected in firefox. I am not too worried about ie6 as yet.

[/QUOTE]

Odd. That code I posted above works here locally in FF3.6, IE8, IE8 Compatability Mode and IE7.

Are you having a cache issue?
×

Success!

Help @letmehaveago 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.27,
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,
)...