I'm trying to go with the css-only approach to this issue and not to use margin-left to move the <div class="fd"></div> from <div class="sb"></div>
I've ran out of the idea-fuel what to try. I've nested some wrappers and used different kinds of positionings (this is not a typo nor French, spell-checker excuse me) but nothing has worked out so far.
Issue: Making a fixed div as solid element, to accept the .fd element on it's right side.
.fd holds content which is going to exceed the height of the page.
.sb holds side-content which is going to remain as 100% in height.
See snippet for a clear example what I've been struggling with.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.sb {
height: 100%;
width: 300px;
background: blue;
position: fixed;
opacity: 0.5;
}
.fd {
min-height: 100%;
background-color: red;
display: inline; /* Won't apply to fixed? block will overlap everything */
}
<div class="sb"></div>
<div class="fd">
<p>Am I out in the open?</p>
</div>
Added an extra .wrap.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrap{
padding-left: 300px;
}
.sb {
height: 100%;
width: 300px;
background: blue;
margin-left: -300px;
position: fixed;
opacity: 0.5;
}
.fd {
min-height: 100%;
background-color: red;
display: inline; /* Won't apply to fixed? block will overlap everything */
}
<div class="wrap" id="wrap">
<div class="sb"></div>
<div class="fd">
<p>Am I out in the open?</p>
</div>
</div>
https://jsfiddle.net/afelixj/tb3pbam9/
Related
I don't have much knowledge about html and css and I couldn't find the answer on the internet so I am here.
Problem:
I am trying to make an image fill top part of the screen but one thing stops me from it and it's the default margin of the <body>. I've managed it by using margin: -10px; But now the image can't fill the screen by 20px, probably because there is no margin, image still thinks screen is that big.
html,body {
width: 100%;
height: 100%;
margin: -10px;
padding: 0;
overflow: hidden;
}
img {
width: 1600px;
height: 300px;
opacity: 70%;
object-fit: cover;
object-position: top 10px;
}
.cont {
position: relative;
text-align: center;
padding: 10px;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<body>
<div class="cont">
<img src="https://i.stack.imgur.com/DWZAk.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
NOTE: If you have any questions or didn't understand anything about the question, please ask because I am ready for any answer. :) Thanks.
If your image is meant to be a decoration(design), then background is fine to use.
.cont can be a flex or grid element, to avoid position absolute and possible unwanted sides effects.
here an example with a background and grid:
body {
margin: 0;
min-height: 100vh; /* optionnal if it does not have a purpose */
}
.cont {
height: 300px; /* guessed from your code */
display: grid; /* default make a single column*/
background: url(https://picsum.photos/id/1015/600/300) 0 0 / cover; /* background covering */
}
.main-text {
margin-block: auto; /* vertical-centering in its row from here */
margin-inline-start:70px;
font-size: 100px; /* from your code */
color: white; /* from your code */
font-weight: normal; /* you looked for this? */
text-shadow: 0 0 1px #000; /*Optionnal increase readability*/
}
<div class="cont">
<h1 class="main-text">Big Ass Title</h1><!-- if that's a title, then make it a title ;) -->
</div>
Generally to eliminate all the margins and paddings you can add:
* {
margin: 0;
padding: 0;
}
By the way I attached a snippet where it's working as you requested. Is better to eliminate the margins than adding a negative margin, if you want to do it that way you must to compensate it in the width to achieve the 100% width intended.
html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
}
img {
width: 100%;
margin: 0;
height: 300px;
opacity: 70%;
object-fit: cover;
}
.cont {
position: relative;
text-align: center;
}
.main-text {
font-size: 100px;
color: white;
position: absolute;
top: 100px;
left: 70px;
}
<html>
<body>
<div class="cont">
<img src="https://images2.alphacoders.com/941/thumb-1920-941898.jpg">
<div class="main-text">Big Ass Title</div>
</div>
</body>
</html>
This question already has answers here:
Two divs, one fixed width, the other, the rest
(10 answers)
Closed 4 years ago.
So I am making a website that uses this setup. A nav, a panel, and a main content area. The content area is filled with divs that will be resized by media queries. The issue is I want the panel to be a fixed width, and the main area to take up the rest of the screen on all screen sizes and automatically downsize. Example. If the panel's 255px width is 25% of the screen, I want the width of main to be the next 75% of the screen. It either takes up too much space and makes it scroll horizontally, or goes down to the new line. What would be the best solution
.panel {
width: 255px;
height: 100%;
position: relative;
float: left;
background-color: orange;
}
.main {
width: 88%;
height: 100%;
position: relative;
float: left;
background-color: red;
}
.nav {
width: 100%;
height: 300px;
background-color: yellow;
}
<div class="panel">
T
</div>
<div class="main">
<div class="nav">
T
</div>
T
</div>
LINK- https://jsfiddle.net/cn6q6keu/2/
You can do it with float and flex.
Here is a float solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
.clear-fix:before, .clear-fix:after{
display: block;
content: '';
clear: both;
}
#main{
height: 100%;
}
.panel, .nav{
float: left;
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
width: calc(100% - 225px);
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/3rxdub8d/5/
Here is a flex solution:
*{
margin: 0;
border: 0;
padding: 0;
box-sizing: border-box;
}
html, body{
height: 100%;
min-height: 100%;
}
#main{
display: flex;
height: 100%;
}
.panel, .nav{
padding: 15px;
height: 100%;
min-height: 100%;
overflow: auto;
}
.panel{
background: pink;
width: 225px;
}
.nav{
background: red;
flex: 1;
}
<div id="main" class="clear-fix">
<div class="panel"></div>
<div class="nav"></div>
</div>
Fiddle link: https://jsfiddle.net/xxwsa4oh/2/
I'm afraid you're gonna have to apply this rule to the fixed width, so you'll be able to convert it to a relative unit like %:
(target รท context) * 100 = result
Target = panel fixed width;
Context = parent element width;
Result = Converted fixed width value in percentage.
There are a few answers out there about how to skew the single side of a div both empty and with images:
CSS3 Transform Skew One Side
Skew one side only of an element
But using these answers, I cannot figure out the rest of my issue.
I am attempting to create a 2 column row with an image background for the second column and a skewed or angled left side. The problem I have is filling the space with the containers after they have been skewed.
I am using Foundation 6 as the primary framework behind my site.
I have attached an image of how it should look completed
The closest I have got so far is this:
I have posted the code I have so far below.
Codepen
HTML:
<section class="lan_primary">
<div class="container-full">
<div class="row wide">
<div class="columns small-12 medium-6 lan_primary--select">
CONTENT LEFT
</div>
<div class="columns small-12 medium-6 lan_primary--img">
CONTENT
</div>
</div>
</div>
</section>
CSS:
div {
border: 1px red solid;
}
.lan_primary {
width: 100%;
height: 80vh;
margin-top: 10vh;
overflow: hidden;
.row {
flex-flow: row !important;
overflow: hidden;
}
&--select,
&--img {
padding: 100px 0;
overflow: hidden;
position: relative;
}
&--select {
background-color: aqua;
}
&--img {
background-color: blue;
transform-origin: top left;
transform: skew(-20deg);
//margin-left: 80px;
}
}
UPDATE - from first answer
Adding a pseudo element to solve causes problems with variable heights. If I were to set 100vh, it would give a different result to if I were to set height: 700x;.
See image below:
Use the triangle border trick with a pseudo. With viewport units it will scale with the height
To make the skew centered, I sized the right 25px (half of the skewed
area) wider than the left.
html, body {
margin: 0;
}
.wrapper {
display: flex;
}
.left, .right {
height: 100vh;
}
.left {
flex-basis: calc(50% - 25px);
position: relative;
background: lightgray;
display: flex;
align-items: center;
}
.left::after {
content: '';
position: absolute;
top: 0;
left: 100%;
height: 0;
width: 0;
border-top: 100vh solid lightgray;
border-right: 50px solid transparent;
}
.right {
flex-basis: calc(50% + 25px);
background: url(http://lorempixel.com/500/500/people/10/) left center no-repeat;
background-size: cover;
}
<div class="wrapper">
<div class="left">
<h1>Some text</h1>
</div>
<div class="right"></div>
</div>
You can Make use of the pseudo elements to make the look skewed one side
CSS(SCSS)
div {
border: 1px red solid;
}
.lan_primary {
width: 100%;
height: 80vh;
margin-top: 10vh;
overflow: hidden;
.row {
flex-flow: row !important;
overflow: hidden;
}
&--select,
&--img {
padding: 100px 0;
overflow: hidden;
position: relative;
}
&--select {
background-color: aqua;
position: relative;
overflow:visible;
&::after{
content:"";
position: absolute;
z-index:1;
top:0;
bottom:0;
height:100%;
width:20%;
background-color: cyan;
right:-40px;
transform:skew(-20deg);
}
}
&--img {
background-color: blue;
transform-origin: top left;
//margin-left: 80px;
}
}
link for reference
hope this helps
I have the following layout for a header for a web page I am developing with the following configuration:
max-width: 1050px;
height: 150px;
What would be the best way to lay this out so that it is also as mobile friendly as possible.
My Idea was this: Each div has its width if its fixed width and also are display: inline-block. But then that is not so mobile friendly as I would have to add responsive blocks.
Has anyone a nicer idea I could do with that?
Here is what I have started with: https://jsfiddle.net/6ohe3hgp/
But not sure if its the right direction as it should also be mobile and by mobile i would probably stack the items on top of each other.
I can't think of a better way than using flexbox (which you also tagged the question with)
When all in a row, they will have the same height based on the one with most content, when stack vertically, on i.e. mobile's, they collapse to their content to make scrolling to a minimum.
Updated fiddle
.container {
max-width: 1050px;
margin: 0 auto; /* will center the container on wide screen */
display: flex;
}
.one {
width: 100px;
background-color: #f66;
}
.two {
width: 200px;
background-color: lightgreen;
}
.three {
flex: 1; /* this makes it take all the available space */
color: white;
background-color: black;
}
.four {
width: 200px;
background-color: lightblue;
}
#media screen and (max-width: 600px) {
.container {
display: block;
}
.container > div {
width: 100%;
}
}
<div>
<div class="container">
<div class="one">
Fixed width
</div>
<div class="two">
Fixed width, with several<br>
lines of text that will<br>
make all the other get<br>
equal height
</div>
<div class="three">
Dynamic width
</div>
<div class="four">
Fixed width
</div>
</div>
</div>
I using display table and table-cell to do this, see https://jsfiddle.net/8s07y8zg/
HTML
<div class="table">
<div class="td one">
One
</div>
<div class="td two">
Two
</div>
<div class="td three">
Three
</div>
<div class="td four">
Four
</div>
</div>
CSS
.table {
display: table;
table-layout: fixed;
width: 100%;
box-sizing: border-box;
color: #FFF;
}
.td {
display: table-cell;
height: 100px;
}
.one {
width: 150px;
background-color: red;
}
.two {
width: 200px;
background-color: green;
}
.three {
background-color: black;
}
.four {
width: 200px;
background-color: blue;
}
There's a variety of ways to do this. Some involve absolute position, some involve float, some involve display table-cell. Every technique have trade-offs (including mine below).
I noticed someone recommended bootstrap to solve this - I don't actually think it will, as this is not truly a "grid system", but a custom layout with a mix of dynamic and fixed width items.
I happen to prefer inline-block per your question, so would like to show you a couple of CSS tools that may or may not get you where you want. They leverage calc and vw
body, html {
margin: 0;
padding: 0;
}
div.container {
margin: 0;
padding: 0;
}
div.col {
box-sizing: border-box;
display: inline-block;
vertical-align: top;
/* the styles below are for illustration only */
min-height: 60px;
background: #ccc;
color: white;
padding: 10px 20px;
margin: 0;
}
div.col-1,
div.col-2 {
width: 150px;
background: #444;
}
div.col-4 {
width: 100px;
background: #aaa;
}
div.col-3 {
/* calculate value - 100vw (100% of viewport width) minus total width of other divs */
width: calc(100vw - 400px);
}
<div class="container">
<!-- NOTE: These divs are all on the same line to avoid
space between items. See https://css-tricks.com/fighting-the-space-between-inline-block-elements/ -->
<div class="col col-1">Fixed Width</div><div class="col col-2">Fixed Width</div><div class="col col-3">Variable Width</div><div class="col col-4">Fixed Width</div>
</div>
You can absolutely position all of them.
The trick is this: you can set the left:, width:, right: css parameters arbitrarily, and you can even neglect them.
So:
give the first div a left: 0 and a width: (in pixels).
to the second: left: (fix in pixels) and right (also fix in pixels).
to the third: left (fix, you can calculate it from the the widths of the first two) and right: (which is the width of the fourth)
And so on.
Absolute positioning works only inside display: block elements whose position: is different from static. So, you need this for the top div:
#topdiv {
display: block;
position: relative;
max-width: 1050px;
}
#div1 {
width: 150px;
left: 0;
display: block;
position: absolute;
}
#div2 {
display: block;
position: absolute;
left: 150px;
width: 150px;
}
#div3 {
display: block;
position: absolute;
left: 300px;
right: 150px;
}
#div4 {
display: block;
position: absolute;
right: 0;
width: 150px;
}
Note:
First off, similar but never answered questions:
vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl
scroll-bar-on-div-with-overflowauto-and-percentage-height
I have an issue with scrolling a center part of the web page while its height needs to be auto.
Here is a fiddle
The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.
However the div #messages can become larger, and that div needs to scroll on its own.
The #messages has a margin-bottom to leave room for the fixed bottom div.
I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.
Any help would be greatly appreciated.
You want something like This
Or maybe - his big brother..
Pure CSS solution, without fixing any height.
HTML:
<div class="Container">
<div class="First">
</div>
<div class="Second">
<div class="Content">
</div>
</div>
</div>
CSS:
*
{
margin: 0;
padding: 0;
}
html, body, .Container
{
height: 100%;
}
.Container:before
{
content: '';
height: 100%;
float: left;
}
.First
{
/*for demonstration only*/
background-color: #bf5b5b;
}
.Second
{
position: relative;
z-index: 1;
/*for demonstration only*/
background-color: #6ea364;
}
.Second:after
{
content: '';
clear: both;
display: block;
}
.Content
{
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
}
You could try the following.
You HTML is:
<div id="container">
<div id="header">The header...</div>
<div id="content">
<div id="messages">
<div class="message">example</div>
...
<div class="message">example</div>
</div>
<div id="input">
<div class="spacer">
<input type="text" />
</div>
</div>
</div>
</div>
Apply the following CSS:
html, body {
height: 100%;
}
body {
margin:0;
}
#header {
background:#333;
height: 50px;
position: fixed;
top: 0;
width: 100%;
}
#content {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 45px;
overflow-y: scroll;
}
#messages {
overflow: auto;
}
#messages .message {
height: 79px;
background: #999;
border-bottom: 1px solid #000;
}
#input {
position:fixed;
bottom:0;
left:0;
width:100%;
height: 45px;
}
#input .spacer {
padding: 5px;
}
#input input {
width: 100%;
height: 33px;
font-size: 20px;
line-height: 33px;
border: 1px solid #333;
text-indent: 5px;
color: #222;
margin: 0;
padding: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/
First, set the height of 100% to the html and body tags, which allows you to reference the view port height.
You want the #header to be fixed towards the top of the page using position: fixed, similarly for your footer #input.
The key is to use absolute positioning on #content to stretch it between the bottom edge of the header and the top edge of the footer, and then apply overflow-y: scroll to allow it to scroll the content (list of messages).
Comment
The source code for the #input block may be placed outside of the #content block.