CSS Width Problem

[Whiskey]

Hello here come something i have work whit for a while. But it seems that im stuck and can´t slove it myself! Först it come a note, then an example and last a picture. This is just cuz if you look on the example in chrome it will prob show correct of some reason, Its work whit some chrome browsers

This is the espected result i don´t get. Note that i have set a wdith on class infoView-Name but it just to make sure that the espected result shows right, and its just that i try to avoid to set a width "link" Image:

This is the result i get that is wrong "link" Image:

What i try to do is really simple. between every <tr> there is two <td> one left and one right, there is always two <td> in every <tr> there is also left and right row, This should be be symmetric same width based on the one whit longest content. But as you can see this not working in "Test: 9" Insted it make a linebreak of some reason. And i can´t understand that. If you are unsure what i mean you can test here "here" <-- that does exactly what i try to explain whit that every should be be symmetric Remember that its not allowed to set "width" it can be diffrent content in the box and it need to be dynamic Some examples what i have try 1: Link <- This increases / decreases the width by content2: Link <- This don´t have same width on left/right side3: Link <- This one i don´t get cell-spacing and border to work /Slaktarn

Edited January 2, 2013 by Whiskey

[davej]

Hmmm, I'm not sure what you want. Yes there is a word-wrap action that occurs inside blocks. There is also a css overflow option that can sometimes be helpful.

[Whiskey]

Hmmm, I'm not sure what you want. Yes there is a word-wrap action that occurs inside blocks. There is also a css overflow option that can sometimes be helpful.

Davej, Look at this http://tinkerbin.com/3HAAdFAu that how it happens in my example, this is how it shuld look http://tinkerbin.com/fTQtyIzF the rows have same width Edited January 2, 2013 by Whiskey

[jeffman]

The problem goes away if you don't use CSS to make the body display as a table. If you are doing that to affect the size, use another technique. In general, you will get unpredictable results if you tell an element to display as something it's not, and this is especially true with table-related elements.

[davej]

You have spans inside divs inside one-celled tables inside two-celled tables inside three divs. I have no idea what you are trying to do but it looks like you need to start over from scratch.

[Whiskey]

What i try to do is to set width of one div based on another

[Whiskey]

The problem goes away if you don't use CSS to make the body display as a table. If you are doing that to affect the size, use another technique. In general, you will get unpredictable results if you tell an element to display as something it's not, and this is especially true with table-related elements.

Deirdre's Dad: The whole thing actully works as i espect from this one i try to slove, and i don´t think it has anything to do that i have table in the body. It make the content just use the width that it needs witch is exactly what i try to do here also

You have spans inside divs inside one-celled tables inside two-celled tables inside three divs. I have no idea what you are trying to do but it looks like you need to start over from scratch.

I don´t get why you ppl is so blind i have try everything, thats why i ask someone of you to help me cuz i can´t slove it. What you see in this example is that the lines grows whit the data thats are on them, and make them 50% etch witch is exaclty what i try to do! http://tinkerbin.com/fTQtyIzF This is where i try to get it to work: http://tinkerbin.com/3HAAdFAu Whit other words i try to have the two rows to have equal width, and width after the content Edited January 3, 2013 by Whiskey

[Whiskey]

We can make it more easy for all of you by say this Look here if you check it whit Chrome you will get correct view, whit Firefox/Internet Explorer it will fails

[davej]

Well, you might look at this. http://pastebin.com/1D3vRPtb

[Whiskey]

Well, you might look at this. http://pastebin.com/1D3vRPtb

What about it i dont understand? you have set width on it you are not allowed to do that, its shuld be dynamic width, use the width it needs inside the box Edited January 4, 2013 by Whiskey

[davej]

Ok, I always use a fixed width. I don't see anything wrong with a fixed width unless I am targeting mobile devices. What about this version? http://pastebin.com/w4CbnSRY

Edited January 4, 2013 by davej

[Whiskey]

Ok, I always use a fixed width. I don't see anything wrong with a fixed width unless I am targeting mobile devices. What about this version? http://pastebin.com/w4CbnSRY

Sorry davej its not working like i want it. This is the closest i have link But thats missing if the border is to long the rows will not know it, but else it equal sized, them don´t make new line or anything just work as i want it! The only bad is that it need JavaScript to work, but it maybe makes it more clear to see what im after for result / Slaktarn

[davej]

Well, I don't do JQuery. There is an apparent problem subdividing a width of 100% when borders, margin or padding are used. http://pastebin.com/zCrN6NUf

Edited January 5, 2013 by davej

[Whiskey]

Well, I don't do JQuery. There is an apparent problem subdividing a width of 100% when borders, margin or padding are used. http://pastebin.com/zCrN6NUf

Im not sure if you have look at my examples, or if you missunderstand me somewhere, anyway here is a 100% working example of what i wanted to do The only problem is that it need to use JavaScript and can´t do it by itself whit just HTML/CSS and that what i try to make Note: You need to klick run to make it work, it look a bit weird when you first come in, and you also need to click run everytime you change anything / Slaktarn Edited January 5, 2013 by Whiskey

[davej]

Ok, the negative margins are interesting but I'm not understanding what key features you were seeking here. You wanted to enforce a blank section in each line and two equal width columns? The overall width is set by the line length and the enforced blank section?

[dsonesuk]

This seems to work, had to use hack for opera, but the it seem to do what you want, never use display: table; cell much, had hard time centering header had to use meathod i use for centering floated elements at end.

<!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">        body {    background-color: black;    color: white;    font-family: Verdana,'Microsoft Sans Serif',sans-serif;    font-size: 11px;}.infoViewBox {    border: 1px solid white;    display: table;    margin: 0 auto;    text-align: center;    }    .infoView-Name {    font-size: 12pt;    font-weight: bold;    left: 100%;    padding: 5px;    position: relative;}.infoView-Name span {	 position: relative;    right: 50%;}    .inner, .spacer {    display: table-row;    clear:both;     }     .spacer {    font-size: 0;    height: 4px;}.left, .right { display:table-cell;white-space: nowrap;width: 50%; text-align:left;border-top:1px solid #fff;border-bottom: 1px dashed #6473A0; padding: 4px 8px 0;}.infoViewLineRight { float:right; margin: 0 4px; }.infoViewLineLeft {float:left; margin: 0 4px;}*:-o-prefocus,.infoViewLineLeft {float:none;}</style></head><body><div class="infoViewBox"><span class="infoView-Name"><span>This is the funny CSS Test</span></span><div class="inner"><div class="left">    <span class="infoViewLineLeft">left start </span>    <span class="infoViewLineRight">the end</span></div><div class="right">    <span class="infoViewLineLeft">right start </span>    <span class="infoViewLineRight">the end</span></div></div><div class="spacer"> </div><div class="inner"><div class="left">    <span class="infoViewLineLeft">left start </span>    <span class="infoViewLineRight">the end</span></div><div class="right">    <span class="infoViewLineLeft">right start </span>    <span class="infoViewLineRight">the end</span></div></div><div class="spacer"> </div></div></div></div></body></html>

[Whiskey]

Thats not fully correct ether, but i have change to JavaScript and hope that will slove my problem its not working 100% ether atm but it works batter Its need to work whit "display: table" in body this one does not do that, its also not allow me to just have a few chars on every line its still have a width somewhere that makes it take more space then needed / Slaktarn

[Whiskey]

Here is a 100% working example of what i try to do whitout JS Link / Slaktarn