PDA

View Full Version : Going insane with div positioning


sirbrent
12-08-2007, 03:38 AM
Hello! I really hope someone can help me, im going insane trying to do something that *should* be simple.

I am trying to have three divs nested inside a div (empty just using as a container). I want to have these three divs to be like columns.

so basically i have a div (acting as container for the next three divs) at 300px width and 300px height

and i want to put three divs inside that are each 100px width by 300px height.

I cant seem to make this work, I have tried every position setting combination, float setting, and setting all divs margins and padding to 0px and nothing is working. what am i doing wrong?

A sincere thank you to anyone who can give me a simple solution and a possible explanation!
Seb
12-08-2007, 05:51 AM
<style type="text/css">
#container { width: 300px; height: 300px; }
#container .column_right { float: right; width: 100px; }
#container .column_left { float: left; width: 100px; }
#container .column_center { margin: auto 100px; }
</style>

<div id="container">
<div class="column_right">
right
</div>
<div class="column_left">
left
</div>
<div class="column_center">
center<br /><br /> hello
</div>
</div>
sirbrent
12-08-2007, 05:58 AM
Thank you.

That worked perfectly, with the exception being when viewed in Internet Explorer 3px margins appear (an ie "bug" -- described here (http://positioniseverything.net/explorer/threepxtest.html)).
Seb
12-08-2007, 08:16 AM
I don't have access to < IE7 right now so I wouldn't know. You should also set a height: 100px; on them, I forgot. You are not testing it in quirks mode?
deportu
12-08-2007, 10:31 AM
When setting margins for IE you need to leave a few pixels for it to breathe. IE sucks big balls.
sirbrent
12-08-2007, 12:50 PM
the three pixel gap happens in IE <7. And happens in both quirks and standards mode. There is a code hack on the link i provided in my second post on this thread, but i cant seem to get it to work where there are two floats (left and right) involved, in fact it invokes some even crazier behavior (margins start working backwards.. on the right div when setting margin-left the expected results were flipped, 3px gave you a visual result of -3px and -10px gave you a visual result of 10px, etc.) Anyway. I guess the best way to deal with this would be to give it some slack for IE to "breath" but the divs have splices of background images that dont line up in that case. I was trying to a table-less design, but always maybe its not going to work out this time.

any thoughts?
shadmego
12-08-2007, 01:29 PM
It might be helpful to see exactly what you are talking about.
sirbrent
12-08-2007, 03:06 PM
This is the simplified version for example... it exhibits the behavior i am talking about in IE (except IE 7). I have tried many different things, changing the positioning, setting 0px borders, 0px padding, etc....



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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">
<!--
body {
background-color: #333333;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding: 0px 0px 0px 0px;
}
.textboxcontainer {
height: 31px;
width: 140px;
/* clear: both; */
}
.textboxleft {
background-color: red;
float: left;
height: 31px;
width: 11px;
position: relative;
}
.textboxfill {
background-color: red;
height: 31px;
width: 117px;
margin-left: 11px;
margin-right: 12px;
}
.textboxright {
height: 31px;
width: 12px;
background-color: red;
float: right;
position: relative;
}
-->
</style>
</head>

<body>
<div class="textboxcontainer"><div class="textboxleft"></div>
<div class="textboxright"></div>
<div class="textboxfill"></div>
</div>
</body>
</html>


im trying to have these divs touch without any spacing because they will have spliced images as backgrounds that need to line up correctly. And I dont want to code something that will address the issue in IE but break standards compliant browsers. There is a IE hack described here: http://positioniseverything.net/explorer/threepxtest.html. But it cant get it to work, and i think its because there is both a right and left float declared in my example, it seems to work only with one or the other, not both. Even if the hack worked Im worried that it would push the hack onto IE 7 (which doesnt have the bug) and break it.

Gosh, I really hate Internet Explorer.
I always code for standards first.

How do you guys code? For Standards first, or IE?
shadmego
12-08-2007, 03:25 PM
This reminds me an awful lot of the box model hack for IE. I can't look up the URL right now ... studying for staticstics ... but I think that's your answer.

~regards

http://css-discuss.incutio.com/?page=BoxModelHack