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/
Related
In the below code, I want to hide the scrollbar of the first block (div1) without using overflow property in all the browsers.
Any suggestions would be helpful.
Fiddle:
http://jsfiddle.net/mvn1ngby/12/
$('#div1').scroll(function(){
$('#div2').scrollTop( $('#div1').scrollTop() );
});
$('#div2').scroll(function(){
$('#div1').scrollTop( $('#div2').scrollTop() );
});
div.outer {
display:inline-block;
width:150px;
height:320px;
border:1px solid black;
overflow-y:auto;
}
div.outer > div {
height:3000px;
}
#div1 div {
width:300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer" id="div1">
<div>
</div>
</div>
<div class="outer" id="div2">
<div>
</div>
</div>
It is a hack but works.
The idea is to pull the area of the scroll-bar outside of the view port.
The "pull" size suppose to be with the width of the scroll bar, usually the wider one (on Windows)
$('#div1').scroll(function() {
$('#div2').scrollTop($('#div1').scrollTop());
});
$('#div2').scroll(function() {
$('#div1').scrollTop($('#div2').scrollTop());
});
div.outer {
display: inline-block;
overflow: hidden;
border: 1px solid black;
}
#div1>div,
#div2>div {
height: 3000px;
}
.scrollable {
width: 150px;
height: 320px;
overflow-y: auto;
}
#div1 {
margin-right: -25px;
padding-right: 25px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer">
<div class="scrollable" id="div1">
<div></div>
</div>
</div>
<div class="outer">
<div class="scrollable" id="div2">
<div></div>
</div>
</div>
Try to add a new container div with css:
.container { width: 100%;}
And inside put the div1, div2
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!
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! :)
I'm working on a mobile site page, I got two divs in a parent roughly set up like so:
<div id="parent">
<div id="left" style="float:left;"> </div>
<div id="right" style="float:right;"> </div>
</div>
They both have a min-width and margin set.
They display next to each other fine. But I want to set it up so that if the width is too small (say on an iphone), they span two lines and take up the whole width of the page by itself.
At the moment, I can't get the width to dynamic jump to 100% of the page when they span two lines. All it does is the left div sticks to the left and the right div to the right.
I've read somewhere about using inline block, and toying with the overflow and position but I can't get it to work.
Any tips or suggestions?
Thanks.
edit:
Here's the css I'm using at the moment
<div style="width:96%;">
<div style="float:left; min-width:220px; margin:10px auto 5px auto;">
content
</div>
<div style="float:right; min-width:230px; margin:0px auto 5px auto;">
content
</div>
</div>
Try this
CSS
#parent {
border : 2px solid #000;
overflow:hidden;
}
.parent div {
min-height: 200px;
padding: 10px;
}
#left {
background-color: gray;
float:left;
margin-right:20px;
width:140px;
}
#right {
background-color: white;
overflow:hidden;
margin:10px;
min-height:170px;
}
#media screen and (max-width: 400px) {
#left {
float: none;
margin-right:0;
width:auto;
border:0;
}
}
HTML
<div id="parent">
<div id="left">left</div>
<div id="right">right</div>
</div>
DEMO
You have to set media queries for the style tags. Take the CSS out of the inline and set them in the stylesheet instead.
#media only screen and (min-width: 481px) {
#left {float:left;}
#right {float:right;}
}
The DIVs then only float to the left and right if the screen is wider than 480px:
<div id="parent">
<div id="left" > </div>
<div id="right"> </div>
</div>