lanmind Posted September 19, 2008 Share Posted September 19, 2008 Hello everybody,On my page here: (***Warning contains a Google Map for those of youwith low bandwidth limits****)http://www.dockhawk.com/I am trying to center two div's vertically against another div usingCSS. The two div's are <div id ="side_bar"> & <div id ="directions">.The other is <div id ="map">.The two div's are 80% the height of the map div so I'm basically usingmargins to push the two divs down 10% of the map. Which would centerthe them with 10% below and 10% above.Now I understand when I set margins it's set as a percentage of thedocument size so I converted 10% of map size to a percentage ofdocument size and came up with 8.1% (the map div is 81% of thedocument size).I'm don't know why but it seems to be double that, like I set it to16%.Any Ideas? Link to comment Share on other sites More sharing options...
rzea Posted September 19, 2008 Share Posted September 19, 2008 What do you mean with "...when I set margins it's set as a percentage of the document..."?You set the margins to an element and its margins 'push' the element away FROM the element is being held inside of, hence, it wouldn't be "the document".I understand "the document" as "the page" itself , I'm confused...--On the other hand, although this is NOT the code you need, I bet it's a starting point to do what you need to accomplish, which I think is very interesting. #whatever-div { width:200px; height:200px; position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-100px;} Hope this helps. Link to comment Share on other sites More sharing options...
lanmind Posted September 19, 2008 Author Share Posted September 19, 2008 Hi,I'm not sure why you don't understand"Now I understand when I set margins it's set as a percentage of thedocument size"if you see document as body then it would say"Now I understand when I set margins it's set as a percentage of thebody size".What I'm trying to get at is the margins that I use, are sized by a percentage of the body (document). So when I'm setting them to 8.1% its acting odd in that it seems to be double.I don't want to set these <div>'s size in pixels. Link to comment Share on other sites More sharing options...
Jerry62704 Posted September 19, 2008 Share Posted September 19, 2008 Hello everybody,On my page here: (***Warning contains a Google Map for those of youwith low bandwidth limits****)http://www.dockhawk.com/I am trying to center two div's vertically against another div usingCSS. The two div's are <div id ="side_bar"> & <div id ="directions">.The other is <div id ="map">.The two div's are 80% the height of the map div so I'm basically usingmargins to push the two divs down 10% of the map. Which would centerthe them with 10% below and 10% above.Now I understand when I set margins it's set as a percentage of thedocument size so I converted 10% of map size to a percentage ofdocument size and came up with 8.1% (the map div is 81% of thedocument size).I'm don't know why but it seems to be double that, like I set it to16%.Any Ideas?THe two right segments seem vertically centered to me in IE6.When you say "doubled" it raises a red flag. There is a bug in IE that it will double margins applied to floating divs. I can't see your css, but check that out. If it is the case, then rethink the margin on that div or change it to an inline element to get around the block problem. Link to comment Share on other sites More sharing options...
rzea Posted September 19, 2008 Share Posted September 19, 2008 I don't understand why you don't understand that I don't understand . Nonetheless, you understood me so now I understand as well : Yes, when I said "the page" I was referring to the <body>.Ok, so we're understanding each other now , lol.If: THe two right segments seem vertically centered to me in IE6.... then something is wrong.They look kind of aligned but not all the way. In FF2.x they're at the bottom, correct?So when I'm setting them to 8.1% its acting odd in that it seems to be double.Use 4.05% then. Link to comment Share on other sites More sharing options...
lanmind Posted September 20, 2008 Author Share Posted September 20, 2008 Use 4.05% then.Thanks Ricardo,I don't want to do that though. I want to figure out why the margin isn't doing what it's supposed to do. This is directly quoting W3C Schools:Sets the properties for the margins. The values comes in % (defines a margin in % of the total height/width of the document), length (defines a fixed margin), and auto (the browser sets a margin).http://www.w3schools.com/css/pr_margin.aspI'm uncomfortable with having margins that act unexpected, it worries me. I'll keep looking.Thanks again. Link to comment Share on other sites More sharing options...
lanmind Posted September 20, 2008 Author Share Posted September 20, 2008 Ok I've read that top and bottom margin percentages are % of containing widths; not heights, thats a downer : ( At least I know now, I'll see what I can do then. Link to comment Share on other sites More sharing options...
rzea Posted September 22, 2008 Share Posted September 22, 2008 Mmmm, just a 'blind shot in the dark':Why don't you try: #element {margin:auto 0;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.