I try to build fluid layout using percentages as widths. Do do so i tried this:
<div style="width:50%; display:inline-table;">A</div>
<div style="width:50%; display:inline-table;">B</div>
In that case they wont stand in one line, but if i remove line break between them, like this:
<div style="width:50%; display:inline-table;">A</div><div style="width:50%; display:inline-table;">B</div>
then it works fine. Where is the problem? How can i do someting like that but without using absolute position and float.
p.s. sorry for english. p.s.s. i hope i good explain my problem
Sorry but all the answers I see here are either hacky or fail if you sneeze a little harder.
If you use a table you can (if you wish) add a space between the divs, set borders, padding...
<table width="100%" cellspacing="0">
<tr>
<td style="width:50%;">A</td>
<td style="width:50%;">B</td>
</tr>
</table>
Check a more complete example here: http://jsfiddle.net/qPduw/5/
<div id="wrapper" style="width: 400px">
<div id="left" style="float: left; width: 200px;">Left</div>
<div id="right" style="float: right; width: 200px;">Left</div>
<div style="clear: both;"></div>
</div>
I know this question wanted inline block, but try to view http://jsfiddle.net/N9mzE/1/ in IE 7 (the oldest browser supported where I work). The divs are not side by side.
OP said he did not want to use floats because he did not like them. Well...in my opinion, making good webpages that does not look weird in any browsers should be the maingoal, and you do this by using floats.
Honestly, I can see the problem. Floats are fantastic.
How can i do something like that but without using absolute position and float?
Apart from using the inline-block
approach (as mentioned in other answers) here are some other approaches:
.container {_x000D_
display: table;_x000D_
width: 100%;_x000D_
}_x000D_
.container div {_x000D_
display: table-cell;_x000D_
}
_x000D_
<div class="container">_x000D_
<div>A</div>_x000D_
<div>B</div>_x000D_
</div>
_x000D_
.container {_x000D_
display: flex;_x000D_
}_x000D_
.container div {_x000D_
flex: 1;_x000D_
}
_x000D_
<div class="container">_x000D_
<div>A</div>_x000D_
<div>B</div>_x000D_
</div>
_x000D_
For a reference, this CSS-tricks post seems to sum up the various approaches to acheive this.
The problem you run into when setting width to 50% is the rounding of subpixels. If the width of your container is i.e. 99 pixels, a width of 50% can result in 2 containers of 50 pixels each.
Using float is probably easiest, and not such a bad idea. See this question for more details on how to fix the problem then.
If you don't want to use float, try using a width of 49%. This will work cross-browser as far as I know, but is not pixel-perfect..
html:
<div id="a">A</div>
<div id="b">B</div>
css:
#a, #b {
width: 49%;
display: inline-block;
}
#a {background-color: red;}
#b {background-color: blue;}
Give this parent
DIV font-size:0. Write like this:
<div style="font-size:0">
<div style="width:50%; display:inline-table;font-size:15px">A</div>
<div style="width:50%; display:inline-table;font-size:15px">B</div>
</div>
basically inline-table
is for element table, I guess what you really need here is inline-block
, if you have to use inline-table
anyway, try it this way:
<div style="width:50%; display:inline-table;">A</div><!--
--><div style="width:50%; display:inline-table;">B</div>
The problem is that if you have a new line between them in the HTML, then you get a space between them when you use inline-table
or inline-block
50% + 50% + that space > 100% and that's why the second one ends up below the first one
Solutions:
<div></div><div></div>
or
<div>
</div><div>
</div>
or
<div></div><!--
--><div></div>
The idea is not to have any kind of space between the first closing div tag and the second opening div tag in your HTML.
PS - I would also use inline-block
instead of inline-table
for this
Wrap them around a div with the following CSS
.div_wrapper{
white-space: nowrap;
}
Source: Stackoverflow.com