jsfiddle link: http://jsfiddle.net/7087s2dm/2/
I have two divs, #one and #two, inside div #parent.
Here, #one has it's height equal to 50% width of the screen. However, #two has it's height based on it's content.
I need to make the div#two's height increases to match that of div#one, even as width of page changes, If the width of page becomes small enough that div#one's height becomes smaller than div#two height, then the height of div#two should be limited to the content itself.
html:
<div id = "parent">
<div id="one">
<img src ="https://gp6.googleusercontent.com/-P53UB3pztC8/AAAAAAAAAAI/AAAAAAAAAAA/edcApVyNYJc/s48-c-k-no/photo.jpg" />
</div>
<div id="two">
<span>Hello</span><br />
<span>Hello</span><br />
<span>Hello</span><br />
<span>Hello</span><br />
</div>
CSS:
#parent{
background-color:yellow;
max-width:500px;
height:300px;
}
#one{
float:left;
background-color:red;
width:50%;
}
#one img{
width:50%;
margin:25%;
}
#two{
padding:2%;
float:right;
background-color:red;
width:50%;
margin-bottom:0;
box-sizing:border-box;
}
#two span{
margin:10px;
}
What is the best way to do this? Can it be done with simple css? Or do i need to use JS?
If you want to make it in simple css use display:table
JS Fiddle
CSS
#parent{
background-color:yellow;
width:500px;
display:table;
}
#one{
background-color:red;
width:50%;
display: table-cell;
}
#one img{
width:50%;
}
#two{
background-color:red;
width:50%; display: table-cell;
margin-bottom:0;
vertical-align:top;
}
#two span{
margin:10px;
}
Related
I am using div container as a drop-able element, so I am adding buttons elements dynamically in to this div container. Div size is resizing if I am adding buttons beyond its size how to avoid this?
Note: This issue occurs in Firefox only
sample:fiddle
#divContainer{
width:100%;
height:40%;
overflow:auto;
border:1px solid;
display:inline-block;
}
#click{
width:100px;
height:30px;
}
table{
border:1px solid;
}
body{
height:1000px;
}
//html
<button id="click">ClickME</button>
<table style="width:20%; height:30%">
<tr>
<td>
<div id="divContainer">
</div>
</td>
</tr>
</table>
//script
$(function () {
$("#click").on("click", function () {
$("#divContainer").append($("#click").clone());
});
});
Try this..
#divcontainer
{
max-width: 40%;
max-height: 30%;
overflow:auto;
display:inline-block;
}
Since you are using table, table elements doesn't goes well in % value in different browsers, they adjust their width/height according to the content. So its better you go with max-width and min-width value (that's also in pixels), so that cross-browsers don't create any mess for your design-
Try below css code:
#divContainer{
width:100%;
min-height:100px;
height:40%;
max-height:100px;
overflow:auto;
border:1px solid;
display:inline-block;
}
#click{
width:100px;
height:30px;
}
table{
border:1px solid;
}
body{
height:1000px;
}
Updated fiddle link-
https://jsfiddle.net/cpqz01ct/3/
I have two div's (left, right). The content in the left div will be empty for some pages/requests; and I would like to hide the left div for such requests. When the left div is hidden/ removed, I want the right div to fill the entire page.
To achieve this is I'm using table-cell. It works but when I remove the left div the right div width changes from full page (100%) to content width.
HTML
<div id="main">
<div id="left">testjjj</div>
<div id="right">test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test test made in test made in test madein<br /></div>
</div>
CSS
#main{width:100%;border:1px solid red; position:relative }
#left {
display: table-cell;
width:100px;
vertical-align:middle;
text-align:center;
background:red
}
#right {
display: table-cell;
width:100%;
vertical-align:middle;
background:lightblue;
text-align:left;
}
If you remove the left div, right div width is fixed to content width. Is there any other way instead of passing min-width to right div ?
Here is a fiddle with 2 divs.
Here is a fiddle with only the right div.
How to make right DIV width 100% irrespective to content?
add display:table to container
#main{width:100%;display:table;border:1px solid red; position:relative }
updated fiddle: http://jsfiddle.net/jgt07w7d/9/
Try this by adding display: table;:
#main{
width:100%;
border:1px solid red;
position:relative;
display: table;
}
#left {
display: table-cell;
width:100px;
vertical-align:middle;
text-align:center;
background:red
}
#right {
display: table-cell;
width:100%;
vertical-align:middle;
background:lightblue;
text-align:left;
}
JSFIDDLE DEMO
Here's the jfiddle http://jsfiddle.net/pq5ckkcg/4/. I basically need the whole window and div to scroll together no matter where the mouse is. How would I accomplish this?
<div id="bottomwrap">
<div id="element"></div>
<div id="element"></div>
<div id="element"></div>
</div>
#bottomwrap {
position:fixed;
top:45px;
right:0;
width:80%;
overflow-y:scroll;
bottom:0;
background-color:#666;
}
#element {
float:left;
width:200px;
height:300px;
background-color:#000;
margin:20px;
}
Your parent div needs to be relative positioned:
#bottomwrap {
position:relative;
margin-top:45px;
float: right;
width:80%;
overflow-y:scroll;
bottom:0;
background-color:#666;
}
http://jsfiddle.net/pq5ckkcg/3/
Is there any way to find out how much someone has scrolled when the content is in a container div with position:relative. I can only seem to get scroll position using JavaScript or JQuery when position is set to absolute, but this disrupts the site layout. Is there any solution to this?
doesn't seem to have any problem in fiddle: http://jsfiddle.net/dQ69u/
#container{
position:relative;
overflow-y:scroll;
width:400px;
height:400px;
background-color:#CCC;
}
#scrollable{
position:relative;
width:80%;
margin-left:10%;
height:1000px;
background-color:#000;
}
or even in this one: http://jsfiddle.net/dQ69u/1/
#container{
position:relative;
overflow:hidden;
width:400px;
height:400px;
background-color:#CCC;
}
#scrollable{
position:relative;
width:80%;
margin-left:10%;
height:1000px;
background-color:#000;
}
#scrollBox{
position:relative;
overflow-y:scroll;
width:80%;
margin-left:10%;
height:400px;
}
The title says everything. I want something like this:
The left box should be positioned in the left, the right one in the right. They both should have fixed widths, e.g. 200px. The middle div should take the size between. Its width is not set, but it takes the width that's remaining.
Thanks.
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 60px;
background:red;
float:left; }
.rightsidebar
{
background:blue;
height: 608px;
width: 163px;
float:right;
}
.content
{
width: auto; //or any width that you want
margin:0 auto;
background:yellow;
}
Here is the DEMO http://jsfiddle.net/yeyene/GYzVS/
Working great on onReady and onResize too.
JS
$(document).ready(function(){
resizeMid();
$(window).resize(function() {
resizeMid();
});
});
function resizeMid(){
var mid_width = $('#main').width() - ($('#left').width()+$('#right').width());
$('#middle').css({'width':mid_width});
}
HTML
<div id="main">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
CSS
html, body{
margin:0;
padding:0;
}
#main {
float:left;
width:100%;
margin:0;
padding:0;
}
#left {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
#middle {
float:left;
width:100%;
height:300px;
margin:0;
background:blue;
}
#right {
float:left;
width:100px;
height:300px;
margin:0;
background:red;
}
You can try this one FIDDLE just html and css, without javascript
<div class="container">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</div>
CSS
div {
height:500px;
position:absolute;
border:0px;
padding:0px;
margin:0px;
}
.c1, .c3 {
width: 200px;
background-color:red;
}
.c1, {
left:0px;
}
.c3 {
right:0px;
}
.c2 {
margin-left:10px;
margin-right:10px;
background-color:blue;
left:200px;
right:200px;
}
.container {
width:99%;
}
[updated]
use a table, it will adjust it's own width. float style was the first that came to my mind but it doesn't adjust the element's width to fill in the gap.
html:
<table>
<tr>
<td style="width:10%;"><div id="d1"></div></td>
<td><div id="d2"></div></td>
<td style="width:10%;"><div id="d3"></div></td>
</tr>
</table>
css:
#d1,#d3{
background-color:red;
width:100%;
height:300px;
}
#d2{
background-color:blue;
width:100%;
height:300px;
}
table{
width:100%;
height:100%;
}
DEMO
update:
if you don't want to use tables or excessive js calculations use this:
#d1,#d3{
float:left;
background-color:red;
width:10%;
height:300px;
}
#d2{
float:left;
background-color:blue;
width:80%;
height:300px;
}
DEMO
I would personally avoid using JS and do this using CSS.
You can add a #container wrapper and then define the width to whatever you want and then use % for the left right and the middle div's
Sample CSS below:
<div id="container">
<div id="left-column"> </div>
<div id="middle-column"> <p>Content goes in here and dynamically stretches</p></div>
<div id="right-column"> </div>
</div>
#container{
float:left;
width:1000px;
*background-color:blue;
}
#left-column, #middle-column, #right-column{
height:500px;
float:left;
}
#left-column, #right-column {
width:20%;
background-color:red;
}
#middle-column {
background-color:green;
width:60%;
}
I'm late to the party, still here goes.
This can be done using flexbox.
HTML
<div class="flex">
<div class="fixed-div"></div>
<div class="dynamic-div"></div>
<div class="fixed-div"></div>
</div>
CSS
.flex {
display:flex;
}
.fixed-div {
width:30px;
background-color:blue;
height:200px;
}
.dynamic-div {
width:100%;
background-color:red;
height:200px;
margin: 0px 10px;
}
You can checkout the implementation here.