Develop Reference

Extend div to right of page without wrapping

So I think the solution I need is to extend the wrapper div to the right of the page without wrapping. If I set the width to width: 100vw or width: 100%, all of the content within the div move below all the other content.
looks kinda weird but here's the fiddle: https://jsfiddle.net/8u3Lzjxw/
what happens if you set width to 100% or 100vh
wrapper should extend to cover all highlighted in green. The height is not a problem as it's not being interfered with.
Relevant HTML:
<div class="active-sockets">
<h1 class="active">Active Sockets</h1>
<div class="wrapper">
<div class="socket">
<h2 class="socket-name">Lorem Ispum</h2>
</div>
</div>
</div>
CSS:
.wrapper {
display: inline-flex;
flex-wrap: nowrap;
float: left;
margin: 0;
width: 100%;
}
.socket {
background-color: rgb(24, 24, 24);
margin: .2em;
padding: .8em;
border-top-left-radius: .5em;
border-bottom-left-radius: .5em;
width: 100%;
margin: 0;
margin-top: 1em;
}
.active-sockets {
float: left;
margin: 1em;
height: 100vh;
}
.active {
background-color: rgb(24, 24, 24);
color: white;
font-family: 'Poppins', sans-serif;
margin: 0;
padding: .5em;
border-top-left-radius: .25em;
border-bottom-left-radius: .25em;
width: 100%;
}

there are several ways to structure a page like this. To keep inline with what you have, there are a couple CSS properties that need to change in your fiddle.
Since the side-bar has a width of 2em, then the margin of the active sockets needs to be at least 3em. And also, if you want it to snap to the top, then remove the top margin. This is what the style will look like:
.active-sockets {
float: left;
margin: 0 1em 1em 3em;
height: 100vh;
width: 100%;
}
you also want to take away the padding of the side bar:
.side-bar {
background-color: rgb(24, 24, 24);
padding: 0;
width: 2em;
height: 100%;
position: relative;
float: left;
}

Background image increase size with scroll

I am trying to make the background image on a div change its scale as per the amount of page scrolled. Works well on desktop screens but on mobile screen, the BG image's height reduces and shrinks the image. This behaviour is apparent as I am trying to resize a sized cover image in % values. I have added a red background-color too to the div for better debugging. Any way to make it work flawlessly even on mob screens? The code is below as well as on Codepen.
HTML:
<main>
<div class="section_1">
<div class="welcome_message">
<div class="welcome_text">
<p class="welcome">Welcome to</p>
<h1>My</h1>
<p class="tagline">DIRECTORY</p>
</div>
</div>
</div>
</main>
CSS:
main{
min-height: 200vh;
}
.section_1{
position: relative;
width: 100%;
height: 90vh;
background: red url(https://images.pexels.com/photos/9467294/pexels-photo-9467294.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260) 40% 10%/cover no-repeat;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.section_1 .welcome_message{
width: 80%;
min-height: 100%;
display: flex;
justify-content: flex-end;
align-items: flex-end;
background: none;
padding: 0 1rem 10rem 0;
.welcome_text{
z-index: 3;
// color: white;
background-color: rgba(1, 55, 131, 0.5);
border-bottom: 0.5rem solid white;
padding: 1rem 2rem;
border-end-start-radius: 2rem;
}
.welcome{
color: white;
font-weight: 400;
}
h1{
font-size: 2rem;
color: white;
font-weight: 600;
margin-block: -0.3em;
}
.tagline{
color: white;
font-weight: 400;
}
}
JS:
let bg = document.querySelector('body .section_1')
document.addEventListener('scroll', () => {
let x = window.pageYOffset
bg.style.backgroundSize = (100 + x/10)+'% auto'
})

you almost made it instead of using auto use the calculated width and set the height to 100%
bg.style.backgroundSize = ''+(130 + x/10)+'% 100%'
Codepen :)

Because you scroll all the way top again, bg.style.backgroundSize = 'auto 130%', The value of bg.style.backgroundSize should null.

responsive width of (float left) div according to distance to adjacent (float right) div

I am trying to use text ellipsis on a (float left) div which is 'sandwiched' between a (float left) div and a (float right) div.
[float left][float left (needs width for elipsis)] [float right]
My problem is that to use text ellipsis I need to specify width or max-width of the 'sandwiched' div. But I do not know how to do this, because that width depends on the distance to the adjacent (float right) div, which depends on browser window width.
Please check the codepen below. If you shrink the browser window's width you will see that the info icon jumps to next line when colliding with the text I need to ellide.
To put it simply, I would like both L/R arrows and info icon to stay leftmost and rightmos respectively, no matter window width, and the text in the middle to elide according to window width.
I searched and I see I could do this with calc, but I am looking for a not so experimental solution.
Thank you very much.
http://codepen.io/anon/pen/vLMBMJ
here is HTML code
<div id="footer">
<div id="subie">
<div id="control">
<button id="prv" class="button">←</button>
<button id="pos" class="button">→</button>
</div>
<div id="title">
<span id="page">Gloria Anzaldúa- Borderlands, La Frontera, The New Mestiza</span>
</div>
<div id="info">
<button id="" class="button"><img src="http://findicons.com/files/icons/2232/wireframe_mono/32/info.png" width="33px"></button>
</div>
</div>
</div>
and CSS
#footer {
position: fixed;
margin: 0px;
padding: 0px;
bottom: 0px;
height: 5.5vh;
width: 100vw;
background-color: #ffffff;
z-index: 100;
}
#subie {
position: absolute;
left: 51vw;
width: 42vw;
height: 5.5vh;
margin: 0px;
padding: 0vh 1vw 0vh 1vw;
}
#control {
float: left;
text-align: left;
display: flex;
align-items: center;
height: 5.5vh;
}
#title {
float: left;
text-align: left;
display: flex;
align-items: center;
height: 5.5vh;
width: ;
}
#info {
float: right;
display: flex;
align-items: center;
height: 5.5vh;
}
.button {
background-color: transparent;
border: none;
margin: none;
padding: none;
color: black;
text-align: left;
text-decoration: none;
display: inline-block;
cursor: pointer;
outline: 0;
font-size: 1em;
}

How to make an image the full width of a screen with dictating the height

I created an image slider, but I am running into an issue. I want the width of the images to be the entire width of the screen; I accomplished this. However, my images' height are more than 100% of the height of the screen. I am wanting the height to be around 50-70% of the screen (preferably 50%). I tried adding height: 70vh; to my images, but that did not help.
Can anyone suggest something to help this?
My slider can be viewed at: http://realtorcatch.com/slider3
My code is:
* {
padding: 0;
margin: 0;
}
body {
font-family: Sans-Serif;
}
img {
max-width: 100%;
/*height: 70vh;*/
}
.cycle-slideshow {
width: 100%;
display: block;
position: relative;
margin: 0 auto;
}
.cycle-prev, .cycle-next {
font-size: 200%;
color: #FFF;
display: block;
position: absolute;
top: 50%;
margin-top: -10px;
z-index: 999;
cursor: pointer;
}
.cycle-prev {
left: 10%;
}
.cycle-next {
right: 10%;
}
.cycle-pager {
width: 100%;
text-align: center;
display: block;
position: absolute;
bottom: 20px;
z-index: 999;
cursor: pointer;
}
.cycle-pager span {
text-indent: 100%;
white-space: nowrap;
width: 12px;
height: 12px;
display: inline-block;
border: 1px solid #FFF;
border-radius: 50%;
margin: 0 10px;
overflow: hidden;
}
.cycle-pager .cycle-pager-active {
background-color: #FFF;
}
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/subway.jpg" alt="subway">
<img src="images/beach.jpg" alt="beach">
<img src="images/space.jpg" alt="space">
</div>

On your img declaration, instead of max-width set width to 100% and height to 70vh. If you'd like more variety in the height, try setting the min-height to be 50vh and the max-height to be 70vh.
Be warned, this will skew your images and make them look disproportionate.
Alternate solution:
Create a "scrim". By this, I mean create a box that covers up the bottom half of the page. You can actually do this with a pseudo-element from your wrapper:
.cycle-slideshow {
position: relative;
...
}
.cycle-slideshow:after {
content: '';
width: 100%;
height: 50%; //50% of parent element
background-color: white;
position: absolute;
top: 50%;
left: 0;
z-index: 2;
}

change style of img to img {width: 100%; height: 100vh;}
It will work for you. Thank you.

try this,, Hope it will help you.
var vHeight = $(window).height()/2, // for 50%
vWidth = $(window).width(),

How to make a div with a fixed width push another div with a relative width when resizing the browser window?

I have a page with 2 floating div: one for the page content and another for a widget sidebar. The page content max-width is set to 70% and the width of the sidebar is a fixed value of 275px +padding. When I'm resizing down my page (playing with the browser window size), everything looks right, until the sidebar takes more than 30% of space and goes under the left div.
When resizing the browser window, is it possible to have the right div keep its 275px width and make it squash the left div so it goes from a max-width of 70% down to 5% if necessary?
Here's my testing website if you want to see what I'm talking about exactly: http://mywptestsite.is-great.org/page-height-and-sidebar/
#primary {
float: left;
clear: none;
max-width: 70%;
margin-right: 22px;
}
.sidebar .entry-header,
.sidebar .entry-content,
.sidebar .entry-summary,
.sidebar .entry-meta {
width: 100%;
padding: 0 20px 0 50px;
}
.site-main #tertiary {
float: right;
clear: none;
width: 256px;
position: static;
height: auto;
}
.site-main .widget-area {
padding: 30px 20px 0 0;
float: none;
width: 100%;
}

I would use display: table and table-cell for that.
JSFiddle: http://jsfiddle.net/maximgladkov/M3wP8/
HTML
<div id="container">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
CSS
#container {
display: table;
width: 70%;
margin: 0 auto;
}
#content, #sidebar {
display: table-cell;
}
#content {
max-width: 70%;
border: 1px solid blue;
}
#sidebar {
width: 254px;
border: 1px solid red;
}