Margin % + A Few Pixels

[Deji]

Okay, obviously this doesn't work:

#id{width:77%;margin:5px 0 0 23%+5px;}

But I hope you get the idea of what I'm trying to achieve... There is a div floated to the left and I'm placing another one next to it. This means I have to set a margin of the size of the first element, otherwise it is hidden behind.However, I want to have the second div a few pixels away from the side of the first div. In order to maintain the style, it should use pixels instead of a percentage (the same amount of pixels as the margin top).Is there any way to do this without using position:relative, which doesn't seem to work well?

[dsonesuk]

why not place it in another div, and give that 5px left margin.

[Deji]

Yeah, I get the idea... but it seems like there should be a better way.If there really is no simpler way I'll have to conclude that I shouldn't ever ask questions regarding CSS... I think I have the whol language down... All 15 commands of it

[dsonesuk]

Oh well that's sorted then

[Deji]

Well, no.. It doesn't really work well.Things overlap the area they are supposed to stay inside...The one with the red border is the container of my element.. The one if the black border is the one I'm trying to position and the green border contains the whole page... or at least it will do when I'm finished.

[dsonesuk]

ooh... nice colour boxes, means absolute nothings to me, what relates to what? if you want help i suggest you your post code, so at least we know what dealing with. we currently know that there are two divs (well maybe three now), one is floated, and they use % + pixel in margins.

[Deji]

Well I managed to get it almost there... Just 1 pixel too far to the left.. Plus when I zoom out (my only real way of figuring out what higher resolutions look like) it doesn't keep in proportion.

#lhead img{position:absolute;top:3px;left:3px;}#left{float:left;width:22%;background:#444;margin-top:-1px;padding:40px 2px 0 2px;border-top:0;}#left h3{font-size:12px;text-align:center;padding:2px;background:#666;margin:15px -2px 4px -2px;}#nav{width:100%;margin:5px 6px 0 0;}#nav li{list-style:none;padding:4px;margin-right:1px;}.lmarg{width:77%;margin-left:22%;padding-left:11px;}

HTML

<div id="left"><br /><br /><br /><br /></div><div class="lmarg"><div id="nav"><ul><li><a href="/">Home</a></li></ul></div></div>

I think that is all the code you'll need.

[niche]

Generally, it's a good idea to provide a complete script (DTD and all the required tags outside the body and everything striped out of the body except the portion in question or provide a URL with everything striped out of the body except the portion in question. That way it's easier to evaluate the situation and attract as many people as possible that can help you.That's just my opinion.

[dsonesuk]

Now! we have something to work with.

*{margin:0; padding:0;} /*remove default margins and pad from elements*/body{margin:10px;} /*add margin to body*/#lhead img{position:absolute;top:3px;left:3px;}#left{float:left;width:22%;background:#444;margin-top:-1px;padding:40px 2px 0 2px;border-top:0;}#left h3{font-size:12px;text-align:center;padding:2px;background:#666;margin:15px -2px 4px -2px;}#nav{/*width:100%;margin:5px 6px 0 0;*/ /*added or amended*/ background-color:#3399CC; margin:5px 0px 0 0;} /*margin to right will force nav below left in IE7, width: 100% will force wider gap between nav and left in IE6 */#nav li{list-style:none;padding:4px;margin-right:1px;}.lmarg{/*width:77%;*/margin-left:22%;padding-left:11px;/*added*/ background-color: #CCFFCC;  padding-top:1px;} /*width 77% will force nav below left IE7 & IE6, THE ADDING of padding at top fixes margin collapse problem in IE6 & 7 where the nav margin pushes down the container div as though it had this margin instead. this can be fixed also by adding a 1px border to the top edge instead of padding*/#content{background-color:#FFFFCC; padding: 8px;}/*will move content from edge adjust to needs*/

<div id="left"><h3>left header</h3>	<br />	<br />	<br />	<br /></div><div class="lmarg"><div id="nav"><ul>	<li>	<a href="/">Home</a>	</li></ul></div><div id="content"><p>hUllamco laboris nisi ut enim ad minim veniam, ut aliquip ex ea commodo consequat. In reprehenderit in voluptate ut labore et dolore magna aliqua. Consectetur adipisicing elit, velit esse cillum dolore sunt in culpa. Ut aliquip ex ea commodo consequat.</p><p>Eu fugiat nulla pariatur. In reprehenderit in voluptate ut enim ad minim veniam, sed do eiusmod tempor incididunt. Velit esse cillum dolore duis aute irure dolor ut aliquip ex ea commodo consequat. Ullamco laboris nisi. Velit esse cillum dolore lorem ipsum dolor sit amet, cupidatat non proident.</p></div></div>

[niche]

What does the asterisk mean, *{margin:0; padding:0;}? Reference?Thanks

[niche]

I should've also asked how is this interpreted, #lhead img{position:absolute;top:3px;left:3px;}?An id just for <img>?

[dsonesuk]

1) * 'wild card', 'universal' meaning everything - *{margin:0; padding:0;} all elements margins and padding will be set to 02) #lhead img{position:absolute;top:3px;left:3px;} means exactly that! an image within a element with id lhead will position itself 3px from top and left, FROM its parent element, be that an element with a position relative, or the body of the page.

[niche]

That's what I thought it might be, but hadn't seen that that format before and couldn't find a reference. Thanks for the follow-up. Knowing for sure beats know for a feel.Niche

[Deji]

Hmm... It seems to work on high resolutions fine, but for me the text breaks out of the main (right/content) div...On Google Chrome and Opera the div goes beyond where it is supposed to by a few pixels.What is the main idea of that CSS? Does margin-right:0; always make the image get pulled as far right as possible? Does this apply to all of the browsers?Hehe, the logo just looks so much better when it isn't in a box... And is allowed to overlap anything it wants. Relative positioning doesn't work for IE (although I don't see the point in it anyway, when margin exists). IE's helpful "Compatibility Mode" shows which things don't work in IE6... So really, everything.I'm not fussed for IE6 compatability... Just IE7+, FF and Chrome... Opera I will not attempt to go beyond effort for (thing doesn't even listen to min-width) but I will try and fit it in.Edit: I managed to fix the overflowing text. Now it's just the extra pixels in those browsers that remains.

[dsonesuk]

not quite sure what you mean by

text breaks out of the main (right/content) div...

the overlap is caused by the padding on the left div.if you remove this you will have to correct header -2px margins.Then adjust left padding on .lmarg, this should make all boxes tight against each, and give fixed width gap between them#left {background:#444444 none repeat scroll 0;border-top:0 none;float:left;margin-top:-1px;padding:40px 0 0;width:22%;}#left h3{font-size:12px;text-align:center;padding:2px;background:#666;margin:15px 0px 4px 0px;}.lmarg {background-color:#CCFFCC;margin-left:22%;padding-left:8px;padding-top:1px;}tested in IE6-8, FF and Opera

Does margin-right:0; always make the image get pulled as far right as possible?

margin only affect the outer boundaries of element edge by adding outer space outside that edge, using margin-left: 10px; or by drawing that edge outward by using margin-left:-10px;(for non-fixed width element). margin:0; just zeros all element margins it does not pull it anywhere, that would controlled text-align, float: and positioning, or another element expanding it width and forcing it in a set direction.

[Deji]

That just seemed to do something unrelated.. To do with the headers on the left navigation.Here is the problem:Firefox/Internet Explorer (-1px)Opera/Chrome (+1px)I hope I'm not seen as crazy for obsessing over a pixel misplacement, but this isn't just a web design.. it's a re-design. Has teh be special, y'know.Thanks for your help so far, anyway.

[dsonesuk]

My guess is it maybe down to the fact you are using fluid width left element, browsers have different viewport areas, scroll bar widths are different, which means percentage wise your left side element will be larger or small by a few pixels depending on the browser you use.with maximized browser windowsALL IE= 308pxFF and Opera = 309px;

[Deji]

Soo... any fix? Is full cross-browser compatibility just not doable when using dynamic width pages?Stupid Chrome and Opera... If it was just down to good ol Firefox and IE I could fix this

[dsonesuk]

Think about it! the left is a problem because it is dynamically fluid in design ummmm. if only there was a way to make it non fluid so the width, image position and layout will be the same size in all browsers, luckily i don't have to worry so much about the right fluid layout being it not so critical....ummm puzzling.

[Deji]

Uhh.. yes I do... It all has to be fluid.EditGetting rid of the border on all the elements makes them all inline... Is this the issue?* Fixes in Firefox and Internet Explorer... Still exists in Chrome and Opera :/

[dsonesuk]

borders are treated differently in IE, but you said IE and FF are the same.still say using fluid is causing the issue, you are going to have to accept difference between browsers, as i said thinner vertical scrollbars, amongst other thing are going to lead to a slight difference, and i can't help anymore, either live with it, or make left fixed.