Margin, position and indentation do not work on display: built-in. also strange behavior from a relative position

Question

I have two CSS classes:

.class1 { height: 100%; width: 300px; border: 1px none #B0B0B0; position: relative; display: inline; left: 10px; } .class2 { height: 100%; width: 200px; position: relative; display: inline; margin-left: 15px; background-color: #00CCCC; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; } 

Now, as you can see, both of them should be displayed in a line (there are no line breaks between lines). Which is working correctly. But for some reason, since I set the display to string, Padding, Positioning and Margin CSS have completely stopped working. I can add a left marker 10inches and nothing will happen. The same with padding and positioning.

Can someone explain how to fix this?

In addition, I have a relative position set for both classes, but when viewing a page in a .class2 browser on top of laps .class1 , when it should be right after .class1 .

Any ideas?

EDIT

Ok, so I made a JSFiddle, but it seems to play even more there ....

It seems that Width not working.

here he is:

http://jsfiddle.net/zYbwh/1/

Answer 1

You need to use

 display: inline-block; 

instead of this. margin does not work with display: inline elements, however with inline-block it does. Then you can have an inline element with margins and an explicit width / height.

To make this work in IE7, add the following two lines:

 *display: inline; zoom: 1; 

This is terrible, but it works.

Answer 2

I know this is a rather late answer, but I wrote a jQuery plugin that supports the addition of inline elements (with a break), see this JSfiddle:

http://jsfiddle.net/RxKek/

Plugin code:

 $.fn.outerHTML = function () { // IE, Chrome & Safari will comply with the non-standard outerHTML, all others (FF) will have a fall-back for cloning return (!this.length) ? this : (this[0].outerHTML || ( function (el) { var div = document.createElement('div'); div.appendChild(el.cloneNode(true)); var contents = div.innerHTML; div = null; return contents; })(this[0])); 

};

 /* Requirements: 1. The container must NOT have a width! 2. The element needs to be formatted like this: <div>text</div> in stead of this: <div> text </div> */ $.fn.fixInlineText = function (opt) { return this.each(function () { //First get the container width var maxWidth = opt.width; //Then get the width of the inline element //To calculate the correct width the element needs to //be 100% visible that why we make it absolute first. //We also do this to the container. $(this).css("position", "absolute"); $(this).parent().css("position", "absolute").css("width", "200%"); var width = $(this).width(); $(this).css("position", ""); $(this).parent().css("position", "").css("width", ""); //Don't do anything if it fits if (width < maxWidth) { return; } //Check how many times the container fits within the box var times = Math.ceil(width / maxWidth); //Function for cleaning chunks var cleanChunk = function (chunk) { var thisChunkLength = chunk.length - 1; if (chunk[0] == " ") chunk = chunk.substring(1); if (chunk[thisChunkLength] == " ") chunk = chunk.substring(0, thisChunkLength); return chunk; }; //Divide the text into chunks var text = $(this).html(); var textArr = text.split(" "); var chunkLength = Math.ceil((textArr.length - 1) / times); var chunks = []; var curChunk = ""; var curChunkCount = 0; var isParsingHtml = false; //Loop through the text array and split it into chunks for (var i in textArr) { //When we are parsing HTML we don't want to count the //spaces since the user doesn't see it. if (isParsingHtml) { //Check for a HTML end tag if (/<\/[a-zA-Z]*>/.test(textArr[i]) || /[a-zA-Z]*>/.test(textArr[i])) { isParsingHtml = false; } } else { //Check for a HTML begin tag if (/<[a-zA-Z]*/.test(textArr[i])) { isParsingHtml = true; } } //Calculate chunks if (curChunkCount == (chunkLength - 1) && !isParsingHtml) { curChunk += textArr[i] + " "; chunks.push(cleanChunk(curChunk)); curChunk = ""; curChunkCount = -1; } else if ((i == (textArr.length - 1))) { curChunk += textArr[i]; chunks.push(cleanChunk(curChunk)); break; } else { curChunk += textArr[i] + " "; } if (!isParsingHtml) { curChunkCount++; } } //Convert chunks to new elements var el = $($(this).html("").outerHTML()); for (var x in chunks) { var new_el = el.clone().html(chunks[x]).addClass("text-render-el"); var new_el_container = $("<div/>").addClass("text-render-container"); new_el_container.append(new_el); $(this).before(new_el_container); } //Finally remove the current element $(this).remove(); }); 

};

Answer 3

This is the problem you get when using templates, ive programmed the site in php, but the design kills me. So I tried some rocket fuel for web designers.

And these are the problems that I continue every step of the way ... Inline-block does not work for me, nothing works, because it is not my design, and I do not know the settings.

Ive tryd doing the design itself, but I don't have enough time, I need the design yesterday.

I suggest that you take what you need from the templates and remove everything else that will annoy your problem and save your time.