I found this jQuery animate script -> http://jsfiddle.net/steweb/dsHyf/ which works perfectly fine for me when I try it standalone. But as soon as I want to include it into my responsive layout using display: table-cell and %-widths everything looks out of place.
I want the .full to fill out 100% of the width and height of the .cell.
Is it possible to adjust this to fluid layouts instead of fixed widths? I have been trying for hours... Or is there a better solution?
I simply want to exchange a first "tile" showing a headline with a second "tile" showing a text/list with a smooth animate effect.
Plus I want to use this script multiple times on the same pages. What can I do?
HTML:
<div class="container">
<div class="sidebar">
<h1>Text</h1>
</div>
<div class="cell">
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
</div>
<div class="cell">
<div id="wrapper">
<div class="full" id="div1"></div>
<div class="full" id="div2"></div>
</div>
</div>
</div>
CSS:
#wrapper{
width:100%;
overflow:hidden;
position:relative;
height:100%;
}
.full{
position:absolute;
width:100%;
height:100%;
}
#div1{
background:#FF0000;
left:0px;
}
#div2{
display:none;
background:#FFFF00;
}
.container{
display: table;
width: 100%;
}
.cell{
display: table-cell;
}
div.container div:nth-child(1){
width: auto;
}
div.container div:nth-child(2), div.container div:nth-child(3){
width: 40%
}
JS:
$('#div2').css('left',-$('#wrapper').width()).show();
$('#div1').click(function(){
$(this).animate({'left':$('#wrapper').width()});
$('#div2').animate({'left':0});
});
$('#div2').click(function(){
$(this).animate({'left':-$('#wrapper').width()});
$('#div1').animate({'left':0});
});
Related
I have a list of product divs containing two more divs each displayed vertically within - top one containing an image and bottom one text. The text is variable in size so the outer divs size also is variable. These outer divs float left and go 3 to a row until a div with long text happens then the next row starts immediately after that column, leaving a gap.
So if I have a row where the 2nd div has 3 lines of text to the other two's 1, the 4th div will start not in the first position on the next line but in the 3rd.
Here is an image demonstrating what I see now vs a second what I would like to do:
And what I'm aiming to do
Do not use float. Take a look at this fiddle:
JSFiddle Demo
CSS:
.block {
width: 33.33%;
display: inline-block;
vertical-align: top;
margin-right: -3px;
}
.inner {
min-height: 100px;
margin-bottom: 10px;
background: #000;
}
You can create a row for the div elements, this will produce the layout you need! I have also provided a CSS only solution where the class clearfix will do the same thing as row class!
CSS3:
.row{
display:flex;
}
.box{
background-color:grey;
float:left;
margin:3px;
width:100px;
height:100px;
}
<div class="row">
<div class="box">1</div>
<div class="box" style="height:200px;">2</div>
<div class="box">3</div>
</div>
<div class="row">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
CSS:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
.box{
background-color:grey;
float:left;
margin:3px;
width:100px;
height:100px;
}
<div class="clearfix">
<div class="box">1</div>
<div class="box" style="height:200px;">2</div>
<div class="box">3</div>
</div>
<div class="clearfix">
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
HTML
<div class="flex-container">
<div class="box">img</div>
<div class="box">img</div>
<div class="box">img</div>
</div>
<div class="flex-container">
<div class="box">txt</div>
<div class="box">txt</div>
<div class="box">txt</div>
</div>
CSS
.flex-container{
background:red;
display:flex;
width:100%;
height:auto;
margin:0% auto;
padding:1% 0;
}
.box{
min-width:100px;
height:auto;
padding:1%;
margin:0 1%;
flex-grow:1;
background:green;
}
Also, Please chech whether you have cleared all floats
Please see Using CSS Flexible Boxes MDNweb docs
I'm using bootstrap and my site is a responsive site.
In a row I'm having 2 divs. One is for the responsive tabs and the other is for the main content. The main content is dynamic. So the content is loaded in to this div once only at the start. The responsiveness is based on the width of the divs (not height).
My issue: I want the height of these two divs to be based on the 'dynamic content DIV height.
html:
<div class = "row">
<div class = "col-md-8 classA">
<div class="classB">
<div class="classC">
<div class="classD"></div>
<div class="classD"></div>
</div>
</div>
</div>
<div class="col-md-4 classA">
<div class="responsive-tabs"></div> <!-- bootstrap's responsive tabs -->
</div>
</div>
css:
.classA{
width: 300px;
min-height:100px;
}
.classB {
position:absolute;
width: 100%;
}
.classD{
position: absolute;
}
#media only screen and (min-width : 1224px) {
.classC{
width: 75%; /*responsiveness is based on the width here*/
height: auto; /*I think this is where the issue is?*/
}
}
A sample Fiddle
This is how it is at the moment (based on the responsive tab height):
This is what I expect it to be (to be based on the dynamic content height):
Basically if you are using jquery the answer will be the following:
Working example: Bootply Link
HTML
<div class="row" id="thedivs">
<div id="B" class="col-md-6 col-lg-6 col-sm-6">BBB
<div id="C">CCCCCC</div>
BBBB<br>
bbbbbbdsbdbsdbsbdbsbsd
</div>
<div id="D" class="col-md-6 col-lg-6 col-sm-6">DDD
<div id="A">AAAAA</div>
DDD
</div>
</div>
CSS
#A{
background-color: orange;
}
#B{
background-color: red;
}
#C{
background-color: blue;
}
#D{
background-color: green;
height:inherit;
}
#thedivs{
height:100%;
}
Use JQuery to find height of parent and set the child's height to parent's height
Javascript
$(function() {
$('#thedivs').find('#D').css('height', $('#thedivs').innerHeight());
});
for row you should use relative after that you can achieve it
Example
HTML
<div class="row">
<div class="aclass">A</div>
<div class="bclass">b</div>
</div>
CSS
.row{
position:relative;
max-width:600px;
background-color:#00ff00;
}
.aclass{
float:left;
width:48%;
height:580px;
background-color:#ff0000;
}
.bclass{
position:absolute;
width:48%;
right:0;
top:0
background-color:#0000ff;
}
I want to expand header and footer to 100% with the variable middle content width.
you can find the source at http://jsfiddle.net/9dWcZ/
HTML:
<div class="header">
this is header
</div>
<div class="content">
this is content
</div>
<div class="footer">
this is footer
</div>
CSS:
.header, .footer {
width:100%;
background:#999;
height:200px;
position:relative;
float:left;
clear:both;
display:block;
}
.content {
width:2500px;
height:100px;
background:#9B191B;
float:left;
}
I don't want fixed header and no change in structure..
Please help..
thanks,
You can achieve this layout as follows.
You need to add a .wrapper element, this is essential:
<div class="wrapper">
<div class="header">this is header</div>
<div class="content">this is content</div>
<div class="footer">this is footer</div>
</div>
For the CSS:
.wrapper {
display: table;
}
.header, .footer {
width:100%;
background:#999;
height:200px;
}
.content {
width:2500px;
height:100px;
background:#9B191B;
}
The key is to apply display: table to the .wrapper block.
See demo at: http://jsfiddle.net/audetwebdesign/7jxLC/
So you want to expand it starting from the middle point?
If that's what you want you can use:
margin-left:auto;
margin-right:auto;
It will start to grow in width from the center then.
I think it's my lack of css knowledge, but i don't get this thing working. My purpose is to have a container div which have the MAXIUMUM witdh of 800px and aligned in the middle of the page, with one or two elements per 'row', depending on the available screen-space. But in the example you see that the whole 800px is taken. How to accomplish that the 800px is only the max?
HTML:
<div style="background-color:red;max-width:800px;display: inline-block">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
CSS:
.contentgedeelte {
width:310px;
background:white;
margin:10px;
float:left;
border-radius:5px;
padding:5px;
}
http://jsfiddle.net/plunje/LmJSy/
OK, here you go:
#container {
width:800px;
margin:0 auto;
text-align:center;
}
.row {
display:inline-block;
background:red;
margin:0 auto;
}
.contentgedeelte {
width:310px;
background:white;
margin:10px;
border-radius:5px;
padding:5px;
display:inline-block;
text-align:center;
}
You'll need to add a .row element to wrap your contentgedeeltes in pairs (if that's how you want them displayed). To be honest you're better off just calculating the widths properly, but if you really can't, try this. Also, I've taken your container element, remove the inline styling and added the ID #container.
Use display: block; instead of inline.
Inline-block is for elements which line up side by side, not for pagewraps. If this is a center of the page container there is no need to display inline.
If you want the articles to display as inline elements, that seems to work.
Or just tally your styles to add up to 400px instead of 340px.
You need a little more structure. See below.
HTML
<div class="container">
<div class="row">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
<div class="row">
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
<div class="contentgedeelte">
<h2>nieuws</h2>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.container {
max-width: 800px;
background-color: red;
padding: 1em;
overflow: hidden;
}
.contentgedeelte {
width:48%;
background:white;
margin:1%;
float:left;
border-radius:5px;
padding:5px;
display: block;
}
So, i have some block, and this block must contains two divs, first div must be at left(attached to block), second at right(attached to block), and this two divs must coverage all block size.
<div id="block" style="width:800px">
<div id="left" style="float:left;width:50%;"> left </div>
<div id="right" style="float:right;width:50%;"> right</div>
</div>
Both divs have a width half of the parent's div.
But you have to be careful with borders as the width defines the width of the content (i.e. without borders). So if you use borders, the right box will be shown below the left, but still on the right side.
You would do it like this.
<div id="block">
<div id="left"></div>
<div id="right"></div>
</div>
The css would be
#block {
width:800px;
display:block //not sure if this line is required or not
}
#left {
width:400px;
float:left;
}
#right {
width:400px;
float:left;
}
There are many ways this could be done.... here's one:
<div style="position: relative; width: 100%; ">
<div style="position: absolute; left: 0; width: 50%; ">
<p>Content</p>
</div>
<div style="position: absolute; right: 0; width: 50%; ">
<p>Content</p>
</div>
</div>
Would something like this do what you want?
<div id="container">
<div id="leftside" style="width:100px; float:left">
Left Side
</div>
<div id="rightside" style="margin-left: 100px;">
Right Side
</div>
</div>
You may need to tweak the margin-left depending on the padding (and widths obviously). This is an easy way to get the two column approach (even if the two columns is a small box) :)
Or in the interests of separating the HTML and CSS, the same code represented again in two parts :) :
HTML
<div id="container">
<div id="leftside"></div>
<div id="rightside"></div>
</div>
CSS
#container:
{
/* insert any requires styles here :) */
}
#leftside:
{
width: 100px;
float: left;
}
#rightside:
{
margin-left: 100px;
}
Try this:
<div id="container">
<div id="left">
Some Content
</div>
<div id="right">
Some Content
</div>
</div>
CSS:
<style type="text/css">
#container
{
width:500px;
height:500px;
position:relative;
}
#left
{
width:250px;
height:250px;
position:absolute;
float:left;
}
#right
{
width:250px;
height:250px;
position:absolute;
float:right;
}
</style>
Adjust margin and width and you're done.
<div id="main">
<div id="left" style="float:left">
Content Left
</div>
<div id="right" style="float:right">
Content Right
</div>
</div>