I have a table with two rows and three columns. The two right cells are smaller in width than the two left ones. Why is this? The content is the same in both. Thx for help.
<div id="tableContain">
<div id="tabRow1">
<div id="tabCell">The gibberish (nonsense text) presented here </div>
<div id="tabCell"> <img src="images/Flora/tree-of-life.jpg" /> </div>
<div id="tabCell">The gibberish (nonsense text) presented here </div>
</div>
<div id="tabRow2">
<div id="tabCell">The gibberish (nonsense text) presented here </div>
<div id="tabCell"> <img src="images/Flora/tree-of-life.jpg" /> </div>
<div id="tabCell">The gibberish (nonsense text) presented here </div>
</div>
</div>
#tableContain {
display: table;
width: 600px;
margin: auto;
border-spacing: 10px;
}
#tabRow1, #tabRow2 {
display: table-row;
}
#tabCell {
display: table-cell;
border: 2px solid gray;
padding: 10px;
border-collapse: collapse;
}
img {
width: 200px;
}
I added width: 33%; to #tabCell. FIDDLE
This makes all the columns equal in width.
Try this.
#tabRow1, #tabRow2 {
display: table-row;
width: 600px;}
Related
My issue is that I wanted side-by-side elements with borders, but I noticed without doing some margin-hack it was difficult to use the border property and it still didn't look right. However when I use outline or box-shadow, I get this alignment issue at the end.
.inner {
outline: 1px solid black;
width: 50%;
height: 50px;
float: left;
margin: 0;
display: inline-block;
box-sizing: border-box;
position: relative;
background: #fff;
}
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
<div class="inner">
</div>
It looks alright when there's an even number of elements but when I have this last element it looks odd. Some might suggest I just make it fit to the end which would be okay but the size can be configurable sometimes so this could be a common occurrence.
What is the proper way to achieve this where the last element lines up the border(or outline) correctly?
Because you're using outline to create your border, the outlines at the center are actually overlapping one another. When you get to the bottom where there is only one div the outline is not being overlapped and therefore looks misaligned. You could solve this issues by building it as a table:
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.column {
display: table-row;
}
.inner {
display: table-cell;
border: 1px solid black;
width: 50%;
height: 50px;
background: #fff;
}
<div class="table">
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
<div class="inner"></div>
</div>
<div class="column">
<div class="inner"></div>
</div>
</div>
I want to make a responsive table that will show 2 sections a time, the labels and the values.
The labels would be fixed and the data would be a slider.
So far I have this:
[class^=col] {
float: left;
}
.row {
width: 100%;
overflow: hidden;
}
.frame {
overflow: scroll;
}
.col-6 {
width: 50%;
}
.col-12 {
width: 100%;
}
.sub-row {
border: 1px solid;
height: 30px;
}
.sub-row:first-child {
font-weight: bold;
}
<div class="row">
<div class="col-6">
<div class="sub-row"></div>
<div class="sub-row">Test1</div>
<div class="sub-row">Test2</div>
</div>
<div class="col-6">
<div class="col-12">
<div class="sub-row">Col1</div>
<div class="sub-row">bla</div>
<div class="sub-row">bla</div>
</div>
<div class="col-12">
<div class="sub-row">Col2</div>
<div class="sub-row">bla</div>
<div class="sub-row">bla</div>
</div>
</div>
</div>
But notice that the data is being displayed one below each other. I want it to be displayed side by side, hidden in the panel so I can slide it. How can I do this?
Here you can see a working example:
This is acheived using flexbox
thead, th{
display:flex;
}
http://codepen.io/dbushell/pen/wGaamR
This code:
#content {
width: 100%;
vertical-align: top;
}
#primo {
*display: inline-block;
width: 100%;
background-color: #aaaaff;
vertical-align: top;
}
#secondo {
*display: inline-block;
width: 100%;
background-color: green;
vertical-align: top;
}
<div id="content">
<div id="primo">
some content
<br />some content
<br />some content
<br />
</div>
<div id="secondo">
some
<br />content
<br />some
<br />content
<br />some
<br />content
<br />
</div>
</div>
is rendered as two <div> vertically aligned, one on the top of the other, plotting two different texts.
I would like to split the top-div into two subareas (two further sub-<div>) horizontally aligned, to plot within these two different texts.
How to achieve this?
It is like creating a two-lines matrix, whose first line has two columns, and the second line has only one column spanning over the full width.
EDIT
I would like to learn the basic code for doing something like this mockup:
Not sure if I understood your question correctly, but is this kind of layout you want to create(see the code snippet)?
EDIT: edited the code now the same layout but done in divs.
If this is the kind of things you want, I recommend you take a look at Flexbox layout, a good guide here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
EDIT2: Just saw your mock up picture, it is achievable using the Flexbox layout, but you need to tweak a lot of pixels/percentage/numbers to get the exact layout you want, see example in the second snippet.
.container {
width: 200px;
}
.flex {
display: flex;
}
.sameRow {
border: 2px solid black;
height: 40px;
width: 100%;
}
.normal {
height: 40px;
border: 2px solid red;
}
<div class="container">
<div class="flex">
<div class="sameRow">Content</div>
<div class="sameRow">Content</div>
</div>
<div class="flex">
<div class="sameRow">Content</div>
<div class="sameRow">Content</div>
</div>
<div>
<div class="normal">Content</div>
<div class="normal">Content</div>
</div>
</div>
.container {
width: 200px;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.flexColumn {
flex-direction: column;
}
.block {
border: 2px solid black;
height: 40px;
width: 20px;
}
.a0 {
width: 80%;
background: red;
}
.a1 {
height: 84px;
}
.a2 {
height: 50px;
background: green;
}
.a3 {
height: 30px;
background: blue;
}
.a4 {
width: 112px;
}
.a5 {
height: 18px;
background: orange;
}
<div class="container">
<div class="flex">
<div class="block a0 a1"></div>
<div class="flexColumn">
<div class="block a2"></div>
<div class="block a3"></div>
</div>
<div class="block "></div>
<div class="block a4"></div>
<div class="flexColumn">
<div class="block a5"></div>
<div class="block a5"></div>
</div>
<div class="block"></div>
</div>
</div>
You can use float left and float right .
I think is this that you want. check it out :
`http://jsfiddle.net/ss7e0aso/`
I have trouble with textarea inside a div whose display style is table-cell. You can see the problem here. The last div has a textarea and somehow it causes an empty area below itself and above other divs.
BTW I am trying to have a structure like this. According to selection, cells will be displayed in a fixed height area with equal widths having a total 100%. Problem occurs when there is a textarea inside any div. If there is an existing component that behaves like this any recommendation will be appreciated.
HTML
<div class="panes">
<div id="pane1" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane2" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane3" class="pane">
<div class="pane-content">
<textarea></textarea>
</div>
</div>
</div>
CSS
.panes {
display: table;
table-layout: fixed;
width:100%;
height:100px;
}
.pane {
display: table-cell;
border: solid 1px;
}
.pane-content {
display: block;
overflow: auto;
height: 100px;
border: solid 1px red;
}
.pane-content textarea {
display: block; /*This fix the issue in IE but other browsers still broken*/
width: 100%;
height: 100px;
}
make it like this:
.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}
I have an issue with floating divs. I have a container st to fixed width, and I have child elements inside that which are all div elements. What I want is that, I need two elements to be shown in a row. The code that I wrote is as follows.
CSS
#container
{
width: 400px;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 180px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
HTML
<div id="container">
<div class="item1">1</div>
<div class="item1">2</div>
<div class="item1">3</div>
<div class="item1">4</div>
<div class="item1">5</div>
<div class="item1">6</div>
<div class="item1">7</div>
<div class="item1">8</div>
<div class="item1">9</div>
</div>
This can be viewed at Demo1
But what I want is like this result. The only thing is that the height of the individual items can be different.
Hope I have made everything clear.
Thanks in advance
Additional clarification
The content elements will be generated dynamically in server and will be passed to the client.
Also the order should be like 1,2,3,4,...
The only thing is that in a row there should be two items and the first one should be aligned to the left side of the container.
You can't accomplish that with CSS only, but there is a jQuery plugin to do the trick. It's called jQuery Masonry, give it a try
You need a second wrapper:
<div id="container">
<div class="wrapper"><div class="item1">1</div></div>
<div class="wrapper"><div class="item1">2</div></div>
...
</div>
Float the wrapper and give it a fixed size. The items inside can have their own height.
I prefer using lists for this type of thing. Better HTML semantics.
<div class="container">
<ul>
<li><div class="item1">1</div></li>
<li><div class="item2">2</div></li>
</ul>
</div>
style:
.container ul {
width:400px;
}
.container li {
float:left;
height:200px;
width:180px;
}
If you want each pair of items to be in a row, and you have control over the dynamic generation of the content, see my edits to your fiddle here
To summarize:
Markup -
<div id="container">
<div class="itemrow">
<div class="item1">1</div>
<div class="item1">2</div>
</div>
<div class="itemrow">
<div class="item2">3</div>
<div class="item1">4</div>
</div>
<div class="itemrow">
<div class="item2">5</div>
<div class="item1">6</div>
</div>
<div class="itemrow">
<div class="item1">7</div>
<div class="item2">8</div>
</div>
<div class="itemrow">
<div class="item1">9</div>
</div>
</div>
CSS -
#container
{
width: 400px;
}
.itemrow
{
float: left;
clear: both;
}
.item1
{
width: 180px;
height: 200px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
.item2
{
width: 190px;
height: 250px;
border: 1px solid red;
float: left;
margin: 10px 0 0 10px;
}
Edit: Just read your above comment about having to edit the server side logic for rendering. Obviously this will only work if you can control that.
you're specifying item2 to be 10 pixels wider than item1 so I'm not clear on what you're trying to do....