Related: Use CSS to reorder DIVs
In my case, my HTML looks more like this:
<div class="container">
<div class="gallery">
<div class="image-wrap"> stuff </div>
<div class="thumbnails"> stuff </div>
</div>
<div class="info"> stuff </div>
</div>
I want .thumbnails and .info to switch places visually, but without affecting the styles or position of anything else. The all the html (and most of the css) inside .gallery is generated by a plugin that I can't edit.
This is what you can assume about the styling:
.thumbnails {
width: 100%;
height: 100px;
}
.info {
width: 100%;
min-height: 125px;
}
I considered using absolute positioning, but .info has a variable height because it has variable content length.
I'd prefer pure a CSS solution, but I'm open to jQuery/JS solutions if necessary.
If .info has a known height, then you can trick this using the float properties and behavior:
.thumbnails {
float:left;
clear:left;
width:100%;
}
.gallery:before {
content:'';
float:left;
height:130px;/* this should be the height and margins used by .info .... but js do not access pseudo element */
}
.info {
height:100px;
display:flex;
border:solid tomato;
justify-content:center;
align-items:center;
background:turquoise;
color:white;
font-size:2em;
}
<div class="container">
<div class="gallery">
<div class="image-wrap"> image-wrap </div>
<div class="thumbnails"> thumbnails </div>
</div>
<div class="info"> info </div>
</div>
codepen to play with
You can use flexbox to reorder flex items, and display: contents to make all the elements participate in the same flex formatting context.
.container {
display: flex;
flex-direction: column;
}
.gallery {
display: contents;
}
.thumbnails {
height: 100px;
order: 1;
}
.info {
min-height: 125px;
}
<div class="container">
<div class="gallery">
<div class="image-wrap"> image-wrap </div>
<div class="thumbnails"> thumbnails </div>
</div>
<div class="info"> info </div>
</div>
Currently, display: contents is only supported by Firefox.
Right, so I don't think you'll be able to achieve this just with css, because you want to actually change the structure... Javascript definitely will be required here:
(function($) {
$(function() {
$(".container").each(function() {
var container = $(this);
var gallery = container.children(".gallery");
container.children(".info").appendTo(gallery);
gallery.children(".thumbnails").appendTo(container);
});
});
})(jQuery);
Hope this helps!
Related
Been looking all over stack for answers and nothing fits my specific scenario:
I have a parent div and within that I have two child divs aligned horizontally next to each other. I want to pretty much fill up all that extra space in the parent div (shown in purple color). I want to take the div in red and pull it up and down to fill the parent so that column background is all red and similarly, the right div fills up and down and the background for that entire fills up to be blue. Below is my div structure
<div class="container">
<div id="parent" class="btn row-height" style="width:100%; margin:0%; margin-top:5%; padding-top:10%; padding-bottom:10%; border-solid:1px; border-radius:10px; background:#d3d3e5; overflow:hidden" type="submit">
<div class="row">
<div class="col-height col-middle col-xs-4 pull-left card" style="background-color:red">
<div class="col-xs-12 text-center">
<h3 class="heading-s1">TEXT</h3>\
</div>
</div>
<div class="col-height col-middle col-xs-8 pull-right card" style="background-color:blue;">
<div class="col-xs-12 text-center">
<h4>TEXT</h4>
<p>TEXT</p>
</div>
</div>
</div>
</div>
</div>
To make it clearer: I want my final thing to look like this:
I think you might be looking for something like this.
.container {
height:500px;
}
.container #parent {
height:100%;
}
.container #parent .row {
height:100%;
position: relative;
}
.container #parent .row #child-left {
height: 100%;
width:30%;
background-color: blue;
float:left;
}
.container #parent .row #child-right {
height: 100%;
width:70%;
background-color: yellow;
float: right;
}
I am not sure what styles .container, #parent and row have, so I included what could possibly be their styles. But the meat of the of the answer/solution here is the last two blocks of the styles. The idea is that both children of the parent must have 100% height of whatever is containing them.
Check demo here: https://jsfiddle.net/an6t1yj3/
In case you can't, this is the output of the fiddle:
You display: table values.
<style>
#parent {background: purple; overflow: hidden;}
.row {display: table; height: 300px; width: 100%}
.row > div {display: table-cell; text-align: center; vertical-align: middle;}
#child-left {background: red; width: 40%;}
#child-right {background: blue; width: 60%;}
</style>
<div class="container">
<div id="parent">
<div class="row">
<div id="child-left" class="pull-left">left<br>left</div>
<div id="child-right" class="pull-right">right<br>right<br>right</div>
</div>
<div>
<div>
https://jsfiddle.net/mj87kucy/
I am trying to use javascript to show a larger version of my image on mouseover. I have the functionality working however the display property is not right and I need the image to be shown ontop of the page content i.e like a popout.
How an I add this to my code. The problem I have is that my page is divided into columns so the image is restricted by the width of the column so I need a way to override that i.e. use a popout.
DEMO - js fiddle
html:
<div class="column1">
<div class="enlarge">
<img id="test" src="example.jpg" onmouseover="bigImg(this)" onmouseout="normalImg(this)" width="400" height="300" class="img-responsive" alt="image">
<div id="test1" class="test1" style="display:none;">
<img width="800" src="example.jpg" alt="" />
</div>
</div>
</div>
<div class="column2">
A LOT OF TEXT IN HERE
</div>
javascript:
function bigImg() {
$("#test1").show();
}
function normalImg() {
$("#test1").hide();
}
It would be restrictive to code your script using specific elements (IDs). Would advice you to use element classes instead.
You can achieve what you want several ways, here is one using absolute positioning for the big image:
$('.small-image').on('mouseenter', function(e) {
$(this).siblings('.big-image').show();
}).on('mouseleave', function(e) {
$(this).siblings('.big-image').hide();
})
body {
overflow-x: hidden;
}
.row::after {
content: ' ';
display: block;
clear: both;
}
.column {
float: left;
}
.column1 {
width: 20%;
}
.column2 {
width: 80%;
}
img {
max-width: 100%;
height: auto;
display: block;
}
.enlarge {
position: relative;
}
.big-image {
display: none;
position: absolute;
left: 100%;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="column column1">
<div class="enlarge">
<img src="http://lorempixel.com/400/300/" class="small-image" alt="image">
<div class="big-image">
<img src="http://lorempixel.com/400/300/" alt="" />
</div>
</div>
</div>
<div class="column column2">
A LOT OF TEXT IN HERE
</div>
</div>
Also on Fiddle.
Try putting the img tag outside of the column1 div and then it will no longer be restricted.
If the img is not showing ontop of the text try add css value z-index.
img {
z-index:2;
}
use :
$("#test" ).hover(function() {
$("#test1").show();
},function(){
$("#test1").hide();
});
https://jsfiddle.net/2rt836co/4/
I think similar question must have been asked already, but I don't know how to find it...
I want to create a multi-column HTML layout with autostretching columns. Let's say 2 columns. When there's only one column on a page it fills 100% of container width, when I add a second column of 25% the first one automatically squeeze to 75%.
<div class="wrapper">
<div class="content">...</div>
<div class="sidebar">...</div>
</div>
I'm sure this can be done with JavaScript (checking if second column exists), but what about plain CSS? Is it actually possible? I need to support IE 9+.
This can be done with css selectors:
.content{
width:100%;
}
.sidebar{
width:25%;
}
.content:not(:only-child){
width:75%;
}
Pen: http://codepen.io/vandervals/pen/zGqorj
I think this is far more elegant than the table solution and the support is really wide: http://caniuse.com/#search=only-child
You need something like following. Use display:table to parent and display:table-cell to child element.
.wrapper{
display:table;
width: 100%;
}
.content{
display:table-cell;
background-color:yellow;
}
.sidebar{
display:table-cell;
width:25%;
background-color:blue;
}
<div class="wrapper">
<div class="content">...</div>
<div class="sidebar">...</div>
</div>
Hope it helps.
I know you ask for a CSS solution, but here is a simple jQuery script to have a dynamic sizing (no matter the number of column, it will be divided and fit in the row).
$(document).ready(function() {
$('.row').each(function(k, v) {
var col = $('.column', this),
colNumber = col.length,
percent = 100 / colNumber;
console.log(percent);
col.css({'width' : percent + '%'});
});
});
* {
box-sizing: border-box;
}
.wrapper {
width: 960px;
margin: 0 auto;
}
.column {
float: left;
height: 200px;
margin: 0 auto;
border: 1px solid black;
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="row">
<div class="column"></div>
<div class="column"></div>
</div>
<div class="row">
<div class="column"></div>
</div>
<div class="row">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
</div>
I have a div with other 3 divs inside.
<div id="buttons">
<div id="button1"></div>
<div id="button2"></div>
<div id="button3"></div>
</div>
The width of the main div (buttons) is 100%. If my 3 buttons are visible the width of each button will be 33%, if 2 are visible will be 50% and if only one so 100% the same of the parent...
I know how to modify this values with javascript... but its possible modify only with javascript the display and css modify the width
SORRY BY MY ENGLISH
You can achieve that layout using table & table-cell props, OR via flexbox (or maybe some other methods, but these ones come in mind atm).
Both these methods have pros & cons, but depending on what you're going with you're layout, these should help you out.
According to http://caniuse.com/, flexbox doesnt go to well with older browsers, mainly IE9 and bellow that, check it out: http://caniuse.com/#search=flex
As for the table trick, it has a much better support with older browsers, http://caniuse.com/#search=table, but it has its own little quirks depending on what you want to accomplish using this.
Option 1 - Table Trick:
set the container to display: table & width: yourwidth;
set the children of the container to display: table-cell, this rule will make sure theyll stretch evenly across their parent
done.
View demo here or snippet bellow:
/*option 1*/
.buttons {
display: table;
width: 100%;
}
.buttons > div {
display: table-cell;
}
/*styling purposes*/
.buttons{
margin: 10px 0;
text-align: center;
}
#button1{
background: red;
}
#button2{
background: green;
}
#button3{
background: cyan;
}
<h1>Table trick</h1>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
<div id="button3">3</div>
</div>
<div class="buttons">
<div id="button1">1</div>
<div id="button2">2</div>
</div>
<div class="buttons">
<div id="button3">3</div>
</div>
Option 2 - Flexbox:
set the container to display: flex
set the childrent to flex: 1 100% so that theyll stretch evenly across their parent
View demo here or snippet bellow:
.buttons-flex {
display: flex;
}
.buttons-flex > div {
flex: 1 100%;
}
/*styling purposes*/
.buttons-flex {
margin: 10px 0;
text-align: center;
}
#button4 {
background: red;
}
#button5 {
background: green;
}
#button6 {
background: cyan;
}
<h1>Flexbox trick</h1>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
<div id="button6">3</div>
</div>
<div class="buttons-flex">
<div id="button4">1</div>
<div id="button5">2</div>
</div>
<div class="buttons-flex">
<div id="button6">3</div>
</div>
Hope this help you out!
Try using the following CSS...
<style type="text/css">
#buttons
{
width:100%;
display:table;
}
#button1
{
background:red;
width:34%;
display:table-cell;
}
#button2
{
background:green;
width:34%;
display:table-cell;
}
#button3
{
background:blue;
width:34%;
display:table-cell;
}
</style>
As the buttons are hidden, the remaining buttons take up the remaining space of the #buttons container.
Think of this as displaying a set of tds in a table
I have two div's next to each other - left one and right one.
There is possibility, that the right one will be gone, then i want the left one to be centered.
HTML
<div class="contener">
<div class="left"></div>
<div class="right></div>
</div>
CSS:
.left {
width: 75%;
height: 240px;
float: left;
}
.right {
width: 25%;
height: 250px;
float: right;
}
.contender{
text-align:center;
}
.left {
width: 75%;
height: 240px;
text-align:left;
display:inline-block;
zoom:1;
*display:inline;
}
.right {
width: 25%;
height: 250px;
text-align:left;
display:inline-block;
zoom:1;
*display:inline;
}
the asterisk(*) is used to fix ie7 so it's a bit of a hack.
You can set the display property of .left and .right to inline-block and set the text-align:center for the parent element as jayaguilar pointed out. However, not that this won't work with the exact html and css you've.
You need to either remove the line break between inline elements in your html markup as follows:
<div class="container">
<div class="left"></div><div class="right"></div>
</div>
or comment it out
<div class="container">
<div class="left"></div><!--
--><div class="right">
</div>
or reduce their width to something less than 100% in order to accommodate the whitespace after inline-block elements.
Demo (click the remove button)
<div class="contener">
<div class="left"></div>
<div class="right"></div>
</div>
And now some easy jQuery:
$(".right").click(function() {
$(this).hide();
$(".left").css({ 'text-align': 'center'});
});
So with that we make "desapear" the right one, and then you do what you want with the left one! :)