I have a divider containing x tables in the form:
<div class="container">
<table>....</table>
<table>....</table>
<table>....</table>
<table>....</table>
</div>
The CSS code that corresponds to this is:
.container{
width: 100%;
clear: both;
border-bottom: solid 2px #036;
white-space: nowrap;
}
table{
display: inline-table;
border-bottom: solid 1px #000;
}
However, when this is applied, there is a gap of ~12px from the bottom border of the table and the bottom border of the divider. If I set "margin-bottom: -12px;" on the table it corrects the positioning error, but not in all browsers.
Does anyone know why there is a margin being made?
There seems to be a problem with display: inline-table, when you replace this with float: left the problem is gone. I have also set overflow: hidden on the .container div, so it takes the full height of the floating tables inside.
EDIT: In order to prevent the tables from wrapping, you could place the tables inside another left floating div that has white-space: nowrap; set.
CSS
* {
margin: 0;
padding: 0;
}
.container {
overflow: hidden;
border-bottom: solid 2px #036;
}
.nowrap {
float: left;
overflow: hidden;
white-space: nowrap;
}
table {
float: left;
border-bottom: solid 1px #000;
border-spacing: 0px;
padding: 0px;
}
HTML
<div class="container">
<div class="nowrap">
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
<table><tbody><tr><td>test test test test test</td></tr></tbody></table>
</div>
</div>
Test<br />
See this updated JSFiddle
Do you have to use <table>? I strongly recomended you to use <div> instead.
However in table (possibly you should add td in your css) set border to 0. This should help.
Related
How can I make two elements that are inline-block fit within a fixed width?
I don't necessarily know the width of the first element, and the second, longer, element (with white-space: nowrap) takes the width of the fixed element, so overflows the container.
/---------------------/
/Label: |Other content/ that just |
/ |keeps going a/nd overflows|
/---------------------/
JSFiddle
.fixed-width-container{
border: 1px red solid;
width: 200px;
white-space: nowrap;
}
.inline-block-1{
display: inline-block;
border: 1px blue solid;
vertical-align: top;
}
.inline-block-2{
display: inline-block;
white-space: normal;
}
<div class="fixed-width-container">
<div class="inline-block-1">Label:</div>
<div class="inline-block-2">Some really long text that is going to go down to the next line</div>
</div>
I would use display: table and display: table-cell. This is supported by all modern browsers (and IE > 7), and it isn't a float hack.
.fixed-width-container{
border: 1px red solid;
width: 200px;
display: table;
}
.inline-block-1{
white-space: nowrap;
display: table-cell;
border: 1px blue solid;
vertical-align: top;
}
.inline-block-2{
display: table-cell;
}
<div class="fixed-width-container">
<div class="inline-block-1">Label word:</div>
<div class="inline-block-2">Some really long text that is going to go down to the next line</div>
</div>
I'm a bigger fan of the float-overflow trick.
Change the css to this:
.fixed-width-container{
border: 1px red solid; /* Get rid of white space rule */
width: 200px;
}
.inline-block-1{
float: left;
border: 1px blue solid;
}
.inline-block-2{
display: block;
overflow: hidden;
}
Also, I would suggest using css class names that don't rely on "inline-block" in the name. If you ever need to change the display to something else (block, table-cell, etc.) it could get confusing.
Here is an example I'm working with:
http://jsfiddle.net/adyjzbuh/18/
Here is the code:
<div class="box1">
<div class="box2">Some text</div>
</div>
<div class="box1">
<div class="box2">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box3">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box4">Some more text, actually, 2 lines of textalicious text</div>
</div>
Here is the CSS:
.box1 {
width: 300px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box2 {
display: table;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box3 {
display: inline-block;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box4 {
display: table-cell;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
As you can see, the first block does exactly what I want. The margins automatically adjust, the block is centered as intended. The issues come when there is multiple lines of text. When I use the same style for the next block with multiple lines of text, the block adjusts the width to 100% of the available space, leaving a big gap on the first line and block not appearing centered.
I tried changing the display to inline-block and table-cell but it does not work (as evidenced by the third and fourth block). I've searched everywhere for solutions and none have worked.
The outer container will always be 300px and the inner block will always have to be flexible and adjust to multi-line text. Any solutions/examples would be greatly appreciated, thank you.
EDIT I forgot to mention the client specifically wants the text to align to the left.
I would add:
text-align: center
or
text-align:justify
instead of:
text-align:left
Is that what you expected to look like?
You might want to put a max-width: 50%; on your innerboxes. The reason is your solution doesn't really work the way you want is your margins are set to auto, so the margin is calculated of the width. So if say your width would be 50% of the parent container (in this case .box1), the margins are automatically calculated to fill up the other 50%, 25% for each side.
Max-width could fix your problem, the innerboxes are still flexible, but only will take up 50% of the width.
.box1 {
width: 300px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box2 {
display: table;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
max-width: 50%;
}
Not sure what you are looking for ultimately, but here is a working example, with using table method, like you have, but using
display:table;
display:table-cell;
accordingly with text aligned in the middle, and centered or left aligned.
Here is my fiddle,
HTML
<div id="wrapper">
<div class="notes">One</div>
<div class="notes">two</div>
<div class="notes">three</div>
<div class="notes">four</div>
</div>
CSS
#wrapper {
width: 300px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid black;
}
.notes {
color: red;
border: 1px solid green;
margin: 5px;
width: 200px;
height: 150px;
display: inline-block;
}
I have a wrapper div which has 300px width.
The inner divs are generated dynamically based on the server request and has the width of 200px each.
Now i need to set side by side in the wrapper and when it reach 300px it needs to be displayed in a scrolled mode..
Seems i have some issues in my code. Pls help...
You could give white-space: nowrap; to the wrapper, then reset it to white-space: normal; for each item.
Example Here
#wrapper { white-space: nowrap; }
.notes { white-space: normal; }
You might also want to remove the white-space between inline block elements. There are several approaches to achieve that, one of them could be setting font-size: 0 to the parent, then resetting it to font-size: 16px on the children.
Updated Example
I'm trying to understand the basics of css applied to a test site that I'm working with.
Reducing the problem to it barest case I have three equal , two of which should contain lists, the third of which does not.
The html is as follows:
<div id="Div1" class="Results">
<select id="FirmList" size=10></select>
</div>
<div id="Div2" class="Results">
</div>
<div id="Div3" class="Results">
<select id="PersonList" size =10></select>
</div>
And the css as thus:
div {
border: 1px dashed black;
border-radius: 5px;
padding: 10px;
margin: 8px;
}
select {
width: 290px;
}
.Results {
border: 2px solid black;
width: 300px;
height: 500px;
display: inline-block;
}
If I comment out the elements the three s align correctly.
Bringing in either causes it's parent to move down the page. None of the other elements on the page (tables, headers and other divs) seem to affect the alignment in the same way.
Any suggestions?
Add vertical-align:top to the .Results rule
.Results {
border: 2px solid black;
width: 300px;
height: 500px;
display: inline-block;
vertical-align:top;
}
Demo at http://jsfiddle.net/QBVz9/1/embedded/result/
It has nothing to do with the select elements. even if you put a single letter in the .Results elements it will cause the problem.
It has to do with the fact that you have turned the div elements to display:inline-block.
.float-left {
float:left;
}
Fiddle example
A solution could be to add float on select element.
Alright, this one should be pretty easy for you front-end guys out there. I have the styled purple link all set to go. I'm just having trouble getting the vertical line to look OK. Assume the line is 1px #000 solid
I kind-of got it working making a div w/ a bottom-border and floating the styled link to the right. If I do that, I can't seem to get there to be space between the divider line and the link.
The following involves some extra markup and uses table-cells.
HTML:
<div class="wrapper">
<span class="leader">
<b></b>
</span>
<span class="cell">
<button>Sample Button</button>
</span>
</div>
CSS:
.wrapper {
border: 1px dotted gray;
display: table;
width: 100%;
}
.wrapper .leader, .wrapper .cell {
display: table-cell;
vertical-align: middle;
}
.wrapper .leader {
width: 100%;
padding: 0 10px;
}
.wrapper .leader b {
display: block;
border-bottom: 1px solid red;
}
.wrapper button {
white-space: nowrap;
}
Demo at: http://jsfiddle.net/audetwebdesign/8aSBA/
There are a few advantages to this approach:
You can control the spacing to the left and right of the horizontal line
Vertical alignment is independent of font-size, line-height
You don't need to specify the width of the button
You can use a :before selector in css, though im not sure is compatable in < ie7
.button:before {
background: none repeat scroll 0 0 #000000;
content: "";
float: left;
height: 1px;
margin-top: 12px;
width: 59%;
}