I am trying to create very flexible grid, my code is approximately as
<div class="grid">
<div class="grid-row">
<td class="grid-cell">TEST</td>
<td class="grid-cell">TEST</td>
<td class="grid-cell">TEST</td>
</div>
</div>
But I have problems:
If I am using td elements inside row, then CSS class styles are not applied sometimes. Styles are applied in React environment, but are not applied in JSFiddle pure Bootstrap environment.
If I am suing div elements inside row, then those div elements are not positioned in one line but each div is in separate line inside the greater div (row) element.
So - is it possible (advisable) to use td elements inside div and without table elements? And if not, then how can I organize div elements (belonging to one row) in one row/line?
This question is related to my other question (there is the links to JSFiddle code as well):
Container div that contains scrollable table and that fills all the client area and that removes page scrolls
Use a list element and set the child elements to inline..
Set list-style-type to none to remove the bulletpoints markers.
ul{
list-style-type: none;
}
ul li{
display: inline;
}
<ul>
<li>
TEST
</li>
<li>
TEST
</li>
</ul>
Also, your div issue.. that's divs desired behaviour since a div is a block element compared to span which is an inline-block element. You should either use spans or set div to inline-block.
If you want a table layout then use display:table
.grid {
display: table;
border: 1px solid;
}
.grid-row {
display: table-row;
border: 1px solid red;
}
.grid-cell {
display: table-cell;
border: 1px solid green;
}
<div class="grid">
<div class="grid-row">
<div class="grid-cell">TEST</div>
<div class="grid-cell">TEST</div>
<div class="grid-cell">TEST</div>
</div>
<div class="grid-row">
<div class="grid-cell">TEST</div>
<div class="grid-cell">TEST Test</div>
<div class="grid-cell">TEST</div>
</div>
</div>
Related
I have 3 divs like so:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
with the following CSS:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
}
When the divs are empty, this code works fine. All divs align along the same horizontal plane. But! When I put any content in 1 or 2 divs, the divs with the content move down about 90% of the height:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3"></div>
Divs 1 and 2 are now spaced down in comparison to the normally aligned div 3. The plot really thickens when I add content to the final div:
<div class="div1">X</div>
<div class="div2">Y</div>
<div class="div3">Z</div>
Now all three divs are properly aligned at page top again. Not sure what's happening here or the proper work around?
This is happening because the default vertical-align for a inline block element is baseline*.
This image from CSS Tricks helps to demonstrate the baseline of text:
As you can see, the baseline isn't how far down the text goes, it is the line that the text is aligned on. With vertical-align:baseline, the div with no content aligns with the baseline created by the <div>'s with content.
This image may help you visualize what's happening(or, you can play with the jsfiddle):
To make all your <div>'s align, no matter the content, set vertical-align:top;:
div {
border: 1px solid black;
display: inline-block;
height: 100px;
width: 100px;
vertical-align:top;
}
This article also helps explain vertical-align some more
* W3 Specs
As this fiddle shows, I have an outer DIV with an inner DIV on the left and two inner SPANS. I want the two SPANS to sit next to the DIV but if I separate them with a BR the outer DIV only resizes based on the width of the first SPAN. If the second SPAN is narrower than the first it sits in the correct position. If it is wider than the first it drops below the inner DIV.
CSS and HTML:
#wrapper {
border: 2px solid blue;
display: inline-block;
}
#imageContainer {
border: 1px solid red;
background-color: yellow;
display: inline-block;
height: 60px;
width: 60px;
}
.slab {
display: inline-block;
}
<div id="wrapper">
<div id="imageContainer">
Image
</div>
<span id="line1" class="slab">Sample Text</span>
<br>
<span id="line2" class="slab">Sample Text 2</span>
</div>
Your code is behaving exactly as it should have been. You have mentioned inline-block for imageContainer and other spans. That means if there is enough space within current line - that inner div imageContainer and other span will try to fit and if not enough space - span will fall to next line subsequently the last and then the first span.
Recommended approach is to structure your code properly in following manner:
<div class="outer">
<div class="img"> <!-- you can use inline-block or float (must have width) -->
Put image here
</div>
<div class="content"> <!-- you can use inline-block or float (must have width) -->
Put your spans here.
</div>
</div>
JSFiddle: Example
I'm looking for a way to have a container div with a height equal to its tallest child.
Every other child should be sized to the height of the container.
I also need the container to scroll horizontally if the children would exceed its width.
So far I have tried using inline-block and float: left but have not gotten the results I want. Setting height: 100% on the children also doesn't have the desired effect. Using overflow: auto on the container still wrapped the last element onto the next line.
I'm pretty confident that I could accomplish this with JavaScript by grabbing the height of the tallest child and resizing appropriately and setting a fixed height on the container. I'd prefer to not use JavaScript though and I think this might be possible just with CSS trickery.
HTML
<div>
<div class='boxed'><ul><li>1</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li></ul></div>
</div>
<div class='container'>
<div class='boxed'><ul><li>1</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li><li>3</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li></ul></div>
<div class='boxed'><ul><li>1</li><li>2</li></ul></div>
</div>
CSS
.boxed { display: inline-block; border: 1px solid black; }
.container { overflow-x: auto; }
For the first issue, you could make the elements display:table-cell as opposed to inline-block. This will cause them to take the height of the tallest sibling element. I'd also suggest adding vertical-align:bottom to the elements in order to align them to the bottom of the parent element. If that's not the behavior you were going for, there is middle, and top too.
UPDATED EXAMPLE HERE
.boxed {
border: 1px solid black;
display:table-cell;
vertical-align:bottom;
}
For the second issue, just add white-space:nowrap to the parent element to prevent the children elements from wrapping. A horizontal scrollbar will be created when the children elements exceed the width of the parent elements.
.container {
border:1px solid red;
white-space:nowrap;
overflow-x: auto;
}
I have a very straightforward HTML page that displays content in two columns. To format the columns I'm using <div> as the outer container (display: table-row) and two inner <div> as the actual columns (display: table-cell). One of these columns has a padding at the top. The markup looks like the following - extra markup and styles omitted for clarity:
<style>
.row { display: table-row }
.cell { display: table-cell; border: 1px solid black; width: 150px }
.content { background-color: yellow }
</style>
<div class="row">
<div class="cell">
<div class="content">Some content; this is not padded.</div>
</div>
<div class="cell">
<div class="content">More content; padded at the top.</div>
</div>
</div>
I'm getting this:
But I expected this:
The behavior is the same whether the padding-top is applied to the cell or the content. Am I missing anything? Thanks.
You can achieve your two desired results just by using padding and margin on your div with the class content. Remember, padding will contribute to the overall width and height of an object, so that will extend the background color.
First screen shot:
<div class="content" style="margin-top: 10px">More content; padded at the top.</div>
Second screen shot:
<div class="content" style="padding-top: 10px">More content; padded at the top.</div>
The following table element in the "center" div causes the contents in the "left" divs to be offset by several pixels from the top (8 in my browser). Adding some text prior to the table removes this offset.
Why? How do I stop this from happening without requiring a "dummy" line of text before my table?
<html>
<head>
<style type="text/css">
#left {
display: table-cell;
background-color: blue;
}
#menu {
background-color: green;
}
#center {
background-color: red;
display: table-cell;
}
</style>
<body>
<div id="left">
<div id="menu">
Menu 1<br>
Menu 2<br>
</div>
</div>
<div id="center">
<table><tr><td>This is the main contents.</tr></td></table>
</div>
<div id="left">
<div id="menu">
Menu 1<br>
Menu 2<br>
</div>
</div>
</body>
</html>
Update0
Note that with floats, I am unable to get a centered column expanding to its content. The source from which I extracted this example uses display: table; margin-left: auto; margin-right: auto; to center everything in the body.
I was able to fix it by adding vertical-align:top; to the '#left' style.
You should wrap the display: table-cell divs in another div with display:table-row
At a guess, I'd say you have a margin-top set on your <table>. Have a look in Firebug.
table {
margin-top: 0;
}
Any particular reason you're laying out like this? You can float divs and do advanced layouts without setting display: table-cell. Besides, tables should only be used for tabular data.