How to make div expand width 100% responsively? - javascript

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

Related

Multiple divs with sticky position overlapping each other

When i have multiple div's with sticky position the first div is overlapping the second div while at the end and not staying locked at the position without overlapping.
How do i make it lock at a position when it ends the corresponding div
Here is a copepen for that
HTML :
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-header">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
CSS
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; }
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
min-height:1000px;
}
.main-header{position:-webkit-sticky; position:sticky; top:0;}
Codepen
Original problem in website
https://ibb.co/BCq4Pnd
First calculate the height of first element i.e( 80px including border and paddings ) in your case.
Give 80px top to the second element.
Third element will have a top of 160px and so on.
All elements will have position:sticky
Try this,
body{color:#fff; font-family:arial; font-weight:bold; font-size:40px; height:1000px}
.main-container{ max-width:600px; margin:0 auto; border:solid 10px green; padding:10px; margin-top:40px;}
.main-container *{padding:10px;background:#aaa; border:dashed 5px #000;}
.main-container * + *{margin-top:20px;}
.main-header{
height:50px; background:#aaa; border-color:red;
}
.main-content{
min-height:1000px;
}
.main-header{position:sticky; top:0px;}
div.main-header{top:80px }
.main-footer{position:sticky; top:160px }
<main class="main-container">
<header class="main-header">HEADER</header>
<div class="main-header">MAIN CONTENT</div>
<footer class="main-footer">FOOTER</footer>
</main>
First change the class of your body component, you gave it the wrong class and for me the result is good?

Adjusting height of two divs based on it's parent's height

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;
}

two divs with dynamic width when spanning two lines

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>

Two fixed width divs, and another div with dynamic size between

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.

position fixed element always inside the div

I need to be able to position fixed element always inside the div.
Problem is occuring when I resize the window. Then the fixed div is always floating above all other elements. How to prevent that? I need that div to be fixed but positioned inside the div .
Here is an example:
<div id="main">
<div id="one" style="background-color:yellow;"></div>
<div id="two" style="background-color:black;"></div>
<div id="three" style="background-color:yellow;">
<div id="four"></div>
</div>
</div>
CSS:
#main
{
position:relative;
width:1200px;
top:0;
bottom:0;
left:100px;
}
#one,#two,#three
{
position:relative;
width:100px;
height:1000px;
float:left;
top:0;
bottom:0;
}
#four
{
position:fixed;
top:50px;
background-color:blue;
width:100px;
height:200px;
}
EXAMPLE try moving horizontal scroll left and right and you will see what is happening.
Change position to relative.
Example
#four {
background-color: blue;
height: 200px;
position: relative;
top: 50px;
width: 100px;
}
Check out this answer on a similar question. The problem you're facing is something that can't be solved with CSS alone, unfortunately.

Categories