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! :)
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/
My search textbox is positioned in header. On typing in textbox, I want to disable rest of the page(except header). The page should be greyed out.Two separate div are there: header and main. Main div contains several sub div to structure the content.
How can I achieve this?
#Thinker solution is good (although I'm not sure if using "text-indent": "-9999px" is a good practice). Another option is to add another div upon your main div and play with the opacity setting to achieve a suitable result. Have in mind that a container div is needed though as main div's parent, look at the demo:
$("#text1").keydown(function() {
$(".main").append('<div class="overlay"></div>');
});
.header {
width: 100%;
height: 50px;
background-color: blue;
}
.main {
width: 100%;
height: 450px;
background-color: red;
}
.container{
position:relative;
}
.overlay{
width:100%;
height:100%;
background-color:grey;
position:absolute;
top:0px;
left:0px;
opacity:0.8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<input type="text" id="text1">
</div>
<div class="container">
<div class="main">Content that is going to hide when textbox is changed</div>
</div>
Yes, you can do it using css properties.
$("#text1").keydown(function() {
$(".main").css({
"text-indent": "-9999px",
"background-color": "gray"
})
});
$("#text1").focusout(function() {
$(".main").css({
"text-indent": "0px",
"background-color": "red"
})
});
.header {
width: 100%;
height: 50px;
background-color: blue;
}
.main {
width: 100%;
height: 450px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
<input type="text" id="text1">
</div>
<div class="main">Content that is going to hide when textbox is changed</div>
Hope it 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
Say I have 3 div elements that all have width:50% but have undefined heights. Now say these elements all have the attribute float:left.
Due to the width:50% attribute, the three elements are now in a two column layout, the first element sits left of the second, and the third sits below both the first.
Now, if the first div is 50px tall, and the second div is 200px tall, the third div sits below the line created by the taller div, and thus a big white space of 150px is created between div 1 and div 3.
How can one prevent the white space from occurring?
PS, the divs are being generated dynamically!
Here's a jsfiddle
make the Second element float right
See that Working Fiddle
HTML:
<div class="First"></div>
<div class="Second"></div>
<div class="Third"></div>
CSS:
div
{
float: left;
width: 50%;
}
.First
{
height: 50px;
background-color: red;
}
.Second
{
height: 90px;
background-color: yellow;
float: right;
}
.Third
{
height: 50px;
background-color: green;
}
Edit: If you have an unknown number of div's,
something like this HTML (alter the sizes as you want)
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
<div style="height: 50px;"></div>
<div style="height: 90px;"></div>
<div style="height: 70px;"></div>
Just use this CSS:
div
{
width: 48%;
margin: 1%;
background-color: #09F;
}
div:nth-child(odd)
{
float: left;
}
div:nth-child(even)
{
float: right;
}
Check out this Working Fiddle
I have the following problem: I have a table with a fixed width and height, which should be in the middle.
The right of it should be div, with a width from the right edge of the table to the left edge of the browser, but it is necessary that in this div image was cropped on the right (so that only the left side, the size of div)
On the left side of the table you need the same thing in reverse, as well as lower
Here's what it looks like - http://db.tt/bZU8Z9SJ
How can you do?
Alright, to give you some more of an answer, make a basic layout with divs:
<div id="container">
<div id="left"></div>
<div id="table"> <!-- Your table here --> </div>
<div id="right"></div>
</div>
And add some CSS:
#table{
float: left;
width: 50%;
height: 200px;
}
#left{
float: left;
background: #3f3;
width: 25%;
height: 200px;
background-position: right;
}
#right{
float: left;
background: #f3f;
width: 25%;
height: 200px;
background-position: left;
}
Fiddle here: http://jsfiddle.net/ycS2N/