[enter image description here][1]currently i am facing one problem.
I generated table using div with fix header and scrollbar to div row section.
but problem is both div are not taking whole 50% 50% width.
I have tried following code.but not working.
.brd2 {
height: auto;
max-height: 100px;
overflow: auto;
position: absolute;
width: 100%;
}
.back-clr {
background-color: red;
}
HTML PART
<div class="container">
<div class="row">
<div class="col-md-8">
<div style="display: table;width:100%">
<div style="display: table-row">
<div style="width:50%; display: table-cell;">
Test
</div>
<div style="width:50%; display: table-cell;">
test
</div>
</div>
<div class="brd2" style="display: table-row;">
<div class="content" style="width:50%; display: table-cell;">
<p>sdfds
fdsf</p>
<p>dsfds
fds</p>
<p> fds
fsf
dsf</p>
<p>sdfds
fdsf</p>
<p>dsfds
fds</p>
<p> fds
fsf
dsf</p>
</div>
<div class="content back-clr" style="width:50%;display: table-cell;">
this is second div
</div>
</div>
</div>
</div>
</div>
</div>
Related
I am trying to pass a horizontal scroll for a "2 columns" type container, for 1 column I can use flex easily with this :
.slider-wr{
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
}
.item{
flex: 0 0 auto;
}
However this does not work for what I intend to, you can check what I currently have in columns here :
http://jsfiddle.net/0wm2cnao/3/
You can use another additional div elements.
Something like this:
<div class="slider-wr">
<div class="package">
<div class="item">
</div>
<div class="item">
</div>
</div>
<div class="package">
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
You could also try wrapping it in another div:
<div class="slider-wr-outer">
<div class="slider-wr">
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
<div class="item">
</div>
</div>
</div>
And then limiting the slider-wr width:
.slider-wr{
min-width: 550px;
}
And making the outer div scroll:
.slider-wr-outer{
width: 100%;
overflow-x: scroll;
}
How do I align the div so that both label has the same width and right aligned and both content start at the same place. Some suggest float, but I dont perfer floating the content. Is there a flex way of doing this.
<!DOCTYPE HTMML>
<html>
<body>
<div>
<div style="display: flex; flex-direction:row;">
<div style="align: right; background: blue">
Long label:
</div>
<div style="text-align: left; background: green">
This is the content
</div>
</div>
<div style="display: flex; flex-direction:row;">
<div style="align: right; background: blue">
label:
</div>
<div style="text-align: left; background: green">
This is the content
</div>
</div>
</div>
</body>
</html>
With flexbox...NO...you can't unless you use fixed width values (whatever they are)...there is no width/height equalisation between non-siblings.
You would need to given one of the elements a fixed width value and then let the other take up the remaining space with flex:1.
.blue {
background: lightblue;
/* width: 150px; */
flex: 0 0 150px
}
.green {
background: #bada55;
flex: 1;
}
.parent {
display: flex;
}
<div class="parent">
<div class="blue">
Long label:
</div>
<div class="green">
This is the content
</div>
</div>
<div class="parent">
<div class="blue">
label:
</div>
<div class="green">
This is the content
</div>
</div>
Why not simply add a class to the content and label divs?
HTML
<div>
<div>
<div class="label-div">Long label</div>
<div class="content-div">Content</div>
</div>
<div>
<div class="label-div">Label</div>
<div class="content-div">Content</div>
</div>
</div>
CSS
.label-div {
width: 70px;
text-align: right;
}
.content-div {
text-align: left;
}
This way, you can be sure that all label divs are equal in length.
I think I tried every solution posted here on stackoverflow except the correct solution for sure.
2 hours nothing then give a div an 100% height, very frustating.
Maybe I'm just tired (Night in Germany) and someone see the correct solution in seconds.
Everything looks great, except the div with the class "layout_content_middle" which have an repeatable background image.
The "id=content" div has the correct 100% height, but the conainer div inside the content div doesn't and this is the problem.
Here my current code.
Important note, this is an bootstrap project, so I work with container and grid classes.
html,
body {
height: 100%;
}
#content {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent header and footer by its height */
margin: -80px auto -165px;
/* Pad bottom by header and footer height */
padding: 80px 0 165px;
}
/* Set the fixed height of the header here */
#header {
height: 80px;
}
/* Set the fixed height of the footer here */
#footer {
height: 165px;
}
<div id="header">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="layout_content_top"></div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container" style="max-width: 983px; background-color: red; height: 100%">
<div class="row">
<div class="col-xs-12">
<div class="layout_content_middle">
asdasd asd ad as das d as
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12" style="padding-left: 16px">
<div class="layout_footer"></div>
</div>
</div>
</div>
</div>
You have the !important rule set for height: auto, which overrides your height: 100%, making your height automatic which causes your to expand only as much as necessary to fit the content.
So the following rule needs to be removed:
#content {
height: auto !important;
}
See it in action here:
html,
body {
height: 100%;
}
#content {
min-height: 100%;
height: 100%;
/* Negative indent header and footer by its height */
margin: -80px auto -165px;
/* Pad bottom by header and footer height */
padding: 80px 0 165px;
}
/* Set the fixed height of the header here */
#header {
height: 80px;
}
/* Set the fixed height of the footer here */
#footer {
height: 165px;
}
<div id="header">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12">
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="layout_content_top"></div>
</div>
</div>
</div>
</div>
<div id="content">
<div class="container" style="max-width: 983px; background-color: red; height: 100%">
<div class="row">
<div class="col-xs-12">
<div class="layout_content_middle">
asdasd asd ad as das d as
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />asd
<br />
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="container" style="max-width: 983px">
<div class="row">
<div class="col-xs-12" style="padding-left: 16px">
<div class="layout_footer"></div>
</div>
</div>
</div>
</div>
You can use position: relative on the parent, then add position: absolute; top: 0; bottom: 0; and left and right if you want to fill the width.
I'm not using the tag, so I can't use the colspan attribute.
I'd like to create a table with three cells in the first row, one cell in the last row and two cells in the other rows.
Here's my code (minimal):
.row {
display: table-row;
}
.cell {
display: table-cell;
}
HTML:
<div style="display: table;">
<div class="row" style="width: 100%;">
<div class="cell" style="width: 33% !important;">
aaaa
</div>
<div class="cell" style="width: 33% !important;">
bbbbb
</div>
<div class="cell" style="width: 33% !important;">
ccccc
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 50% !important;">
ddddd
</div>
<div class="cell" style="width: 50% !important;">
eeeee
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 50% !important;">
fffff
</div>
<div class="cell" style="width: 50% !important;">
ggggg
</div>
</div>
<div class="row" style="width: 100%;">
<div class="cell" style="width: 100% !important;">
last cell
</div>
</div>
</div>
And this is what I get (I can't post images): http://gyazo.com/cc036ed406f6c1a166955522d40e05b0.png
I would build this layout as follows.
For the HTML:
<div class="parent">
<div class="row r3">
<div class="cell">aaaa</div>
<div class="cell">bbbbb</div>
<div class="cell">ccccc</div>
</div>
<div class="row r2">
<div class="cell">ddddd</div>
<div class="cell">eeeee</div>
</div>
<div class="row r2">
<div class="cell">fffff</div>
<div class="cell">ggggg</div>
</div>
<div class="row r1">
<div class="cell">last cell</div>
</div>
</div>
and apply the following CSS:
.row {
display: table;
border: 1px dashed blue;
width: 100%
}
.cell {
display: table-cell;
border: 1px dotted blue;
}
.r3 .cell {
width: 33.333333%;
}
.r2 .cell {
width: 50%;
}
.r1 .cell {
width: 100%;
}
Use display: table for each div.row block element with 100% width.
You don't need to explicitly define a CSS table row, one will be created anonymously as needed.
See reference: http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes
See demo: http://jsfiddle.net/audetwebdesign/72yb5th2/
You're trying to emulate a table with divs. Why? The <table> tag is made for exactly this kind of tabular data.
I have the following HTML:
<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
<div style="display: table-row">
<div class="grid_6" style="display: table-cell;">
<div class="block-border">
<div style="background-color: red; height: 100px;"></div>
</div>
</div>
<div class="grid_6" style="display: table-cell;">
<div class="block-border">
<div style="background-color: red; height: 200px;"></div>
</div>
</div>
</div>
</article>
I am using display: table-row because I heard that this would make my DIVs work like table cells and I was wanting the DIVs to be the same height. However it seems like the first grid_6 grid has a small height while the second has at least 100px. How can I make it fill to be the same height?
Here's an example: fiddle
<div class="block-border">
<div style="background-color: red; height: 100px;"></div>
You have set the height of second element i.e Height = 100px .
Set the height to both the div elements .
Both grid_6 elements are the same height. The reason why you see one red rectangle larger than the other is you are coloring the inside divs. If you put the color on the grid_6 elements - they are the same. http://jsfiddle.net/A7yXc/
<article id="articlesss" class="container_12 clearfix" style="margin-top: 2em; display: table;">
<div style="display: table-row">
<div class="grid_6" style="display: table-cell; background-color: red;">
<div class="block-border">
<div style="height: 100px;">das</div>
</div>
</div>
<div class="grid_6" style="display: table-cell; background-color: red;">
<div class="block-border">
<div style="height: 200px;">das</div>
</div>
</div>
</div>