I have a containing DIV, that I use as part of my responsive grid. It expands to the maximum width I allow which is 1280px, then margins appear for large devices. Here's my CSS + a bit of Less.
.container
{
margin-left:auto;
margin-right:auto;
max-width:1280px;
padding:0 30px;
width:100%;
&:extend(.clearfix all);
}
However on some occasions I'd like to overflow sideways - lets say I have an background image or colour that needs to be full width. I'm not great at CSS - but is it possible to achieve what I want?
The most obvious solution is just to close the container...have your full width div then open a new container. The title 'container' is just a class...not an absolute requirement that it hold everything all at the same time.
In this instance you apply the background color to the full width div and you don't need to apply a color to the internal, restricted div.
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
.fullwidth {
background: orange;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
/* background: orange; */
min-height: 50px;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
</div>
<div class="fullwidth">
<div class="container">
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
</div>
</div>
<div class="container">
<footer></footer>
</div>
However, for some they like a single all encompassing container so if all you are after is a background you could use a pseudo-element like so:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
height: 100px;
position: relative;
}
.mydiv:after {
content: "";
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: orange;
z-index: -1;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
<div class="mydiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
<footer></footer>
</div>
Support for vw is IE9+ - See http://caniuse.com/#feat=viewport-units
There are cases where actual content is required in the 100% wide div and the container cannot be opened/closed at will (perhaps to retrofit a slider).
In those cases, where the height of the new div is known the same technique can be used to position it as to be 100% viewport wide:
* {
margin: 0;
padding: 0;
}
body {
overflow-x: hidden;
}
.container {
max-width: 80%;
border: 1px solid red;
margin: 0 auto;
}
header {
height: 50px;
background: #663399;
}
.mydiv {
height: 100px;
position: relative;
}
.myslider {
position: absolute;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100vw;
background: orange;
}
footer {
height: 50px;
background: #bada55;
}
<div class="container">
<header></header>
<div class="mydiv">
<div class="myslider">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum illum veniam in delectus corrupti autem magnam. Tenetur ducimus provident nisi aut esse aliquid accusamus quas.</p>
</div>
</div>
<footer></footer>
</div>
JSfiddle Demo
Note: there are instances where 100vw can cause overflow and a horizontal scrollbar might appear. overflow-x:hidden on the <body> can attend to that..it should not be an issue because everything else is still inside the container.
I found this super useful trick by using vw on margins (Source)
Example :
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
}
Demo :
html,body {
overflow-x: hidden; /* Prevent scrollbar */
}
.inner-but-full {
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
height: 50px;
background: rgba(28, 144, 243, 0.5);
}
.container {
width: 300px;
height: 180px;
margin-left: auto;
margin-right: auto;
background: rgba(0, 0, 0, 0.5);
}
<div class="container">
<div class="inner-but-full"></div>
</div>
Can I use :
http://caniuse.com/#feat=calc
http://caniuse.com/#feat=viewport-units
<meta charset="UTF-8">
<style type="text/css">p{text-align:center;margin-left:25%;height:300px;width:50%;border:1px solid red;margin-bottom:0;margin-top:0;padding:0;
} body{margin:0;text-align:center;height:100%;width:100%;max-width:100%;max-height:100%;}</style>
<p style="color:yellow;background-color: red;">yep</p><p style="color:red;background-color: yellow;">yep</p><p style="color:white;background-color: blue;">yep</p>
Related
A simple layout that I want to achieve with minimal html tags
Only <img> & <h1> & <p> and no other extra tags
flex + column + wrap
The first column has only one image
The second column contains the title and crossword
The width and height of the parent layer are fixed
The result is that part of the text will overflow
Only add width to <p> to prevent
Is there any way to automatically break text without adding width?
HTML
*{
margin: 0;
padding: 0;
}
.out{
width: 600px;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
margin: 50px auto;
font-family: Verdana;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
img{
/* margin-bottom: 20px; */
margin-right: 20px;
}
p{
line-height: 1.6;
overflow-wrap: break-word;
}
<div class="out">
<img src="https://picsum.photos/id/230/200/200" alt="">
<h1>This is Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>
Another solution as per your expecation:
* {
margin: 0;
padding: 0;
}
.out {
width: 600px;
height: 200px;
border: 1px solid #ccc;
padding: 20px;
margin: 50px auto;
font-family: Verdana;
display: flex;
}
img {
/* margin-bottom: 20px; */
margin-right: 20px;
}
p {
line-height: 1.6;
overflow-wrap: break-word;
margin-left: -200px;
margin-top: auto;
margin-bottom: auto;
}
h1 {
position: relative;
white-space: nowrap;
}
p::before {
content: "";
width: 100%;
}
<div class="out">
<img src="https://picsum.photos/id/230/200/200" alt="">
<h1>This is Title</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta iure iusto cupiditate sequi aperiam, nostrum optio ipsam dicta modi officiis eligendi vel. Dignissimos delectus exercitationem nemo. Enim id sed corrupti!</p>
</div>
Here is my solution
* {
font-family: 'poppins';
}
.card {
display: flex;
padding: 15px;
border: 1px solid #8f8f8f;
}
.content {
margin-left: 10px;
}
.content h6 {
margin-top: 0;
font-size: 32px;
margin-bottom: 5px;
}
<div class="card">
<img src="//via.placeholder.com/150">
<div class="content">
<h6>This is title</h6>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
here, content here', making it look like readable English.</p>
</div>
</div>
So I have this very simple grid layout that has 3 columns. The 3rd column has 3 items which are a header, a div and an input element.
Setting the width=100%; for the input I thought it would fit to the 3rd columns actual size but apparently it grows bigger than the div.
I thought it would be the padding of the conversation div but it turns out that even after removing the padding there is still an overlap.
EDIT: The input item should only take the length of the 3rd column.
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 9fr;
}
.directories {
background-color: rgb(17, 200, 110);
}
.chats {
background-color: rgb(220, 220, 120);
height: 100vh;
}
.conversation {
background-color: rgb(220, 20, 120);
padding: 8px;
position: relative;
}
.conversation-head {
position: sticky;
top: 0;
background-color: white;
}
input {
min-width: 100%;
max-width: 100%;
height: 32px;
position: absolute;
bottom: 5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="wrapper">
<div class="directories">
Something Something
</div>
<div class="chats">
Chat Chat Chat
</div>
<div class="conversation">
<div class="conversation-head">
Front-End
</div>
<div class="conversation-txt">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, laboriosam repudiandae perspiciatis possimus minus quam explicabo dolores corrupti asperiores alias saepe, animi cumque mollitia labore atque veniam debitis modi quibusdam.
</div>
<input type="text" placeholder="Enter your message">
</div>
</div>
</body>
</html>
Instead of position:absolute you can rely on a flexbox container where it will be easier to position the input and size it
body {
margin: 0;
}
.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 9fr;
}
.directories {
background-color: rgb(17, 200, 110);
}
.chats {
background-color: rgb(220, 220, 120);
height: 100vh;
}
.conversation {
background-color: rgb(220, 20, 120);
padding: 8px;
position: relative;
display:flex; /* added*/
flex-direction:column; /* added*/
}
.conversation-head {
position: sticky;
top: 0;
background-color: white;
}
input {
width: 100%; /* added*/
box-sizing:border-box; /* added*/
height: 32px;
margin:auto 0 5px; /* added*/
}
<div class="wrapper">
<div class="directories">
Something Something
</div>
<div class="chats">
Chat Chat Chat
</div>
<div class="conversation">
<div class="conversation-head">
Front-End
</div>
<div class="conversation-txt">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, laboriosam repudiandae perspiciatis possimus minus quam explicabo dolores corrupti asperiores alias saepe, animi cumque mollitia labore atque veniam debitis modi quibusdam.
</div>
<input type="text" placeholder="Enter your message">
</div>
</div>
You should remove the position:absolute of input , the position absolute is relative to the parent(with position relative) and ignore the padding of the parent element
use this
input{
box-sizing: border-box;
left:0;
right:0;
}
hopefully, this is work
I'd like to use CSS Grid. Something like this I think…
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto auto [whatever's left of the vh] auto auto;
position: relative;
}
Set the viewport with display: flex and height: 100vh and add to the last element
flex-grow: 1
.viewportDiv {
display: flex;
flex-direction: column;
height: 100vh;
}
.div1{
background-color: yellow;
height: 100px;
}
.remainingDiv{
background-color: red;
flex-grow: 1;
}
<div class="viewportDiv">
<div class="div1"></div>
<div class="remainingDiv"></div>
</div>
Using CSS Grid you need to wrap the top two elements and the remaining space and then apply display: grid to that.
In other words, your diagram actually was the solution.
The wrapper should have a height of 100vh…
html {
height: 100%;
}
body {
margin: 0;
min-height: 100%;
background: pink;
display: grid;
grid-template-rows: 100vh auto auto;
position: relative;
}
.wrapper {
display: grid;
grid-template-rows: auto auto 1fr;
}
header {
background: green;
padding: .25em;
}
nav {
background: orangered;
padding: .25em;
}
main {
background: rebeccapurple;
}
footer {
background: yellow;
}
.subfooter {
background: blue;
}
<div class="wrapper">
<header>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione magnam placeat quia iusto, quisquam cum temporibus modi, ex dolorem velit fuga! Minima, ex.
</header>
<nav>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
</nav>
<main></main>
</div>
<footer>Lorem, ipsum.</footer>
<div class="subfooter">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ex dignissimos ratione maxime officia eum. ea!
</div>
You can do it using flex.
.a {
width: 100%;
height: auto;
}
.remaining {
width: 100%;
flex-grow: 1;
}
.holder {
display: flex;
flex-direction: column;
height: 100%;
}
html,
body {
height: 100%;
}
HTML code:
<div class="holder">
<div class="a">
Content here
</div>
<div class="a">
Content here
</div>
<div class="remaining">
Content here
</div>
</div>
I'm trying to accomplish the following layout, but I'm having trouble with the description box height definition. I'm trying to avoid javascript.
Right now I have both the wrapper and the title bar working as they should, the title and description divs being nested inside the wrapper div:
#wrapper{
position: fixed;
right: 0;
width: calc(100vw - 1.51 * 95vh - 5vh);
top: calc(40px + 2.5vh + 2.5vh);
height: calc(100vh - 40px - 40px);
}
#title{
width: 100%;
height: auto;
top: calc(2.5vh + 40px + 2.5vh + 5vh);
}
What about the description div? Can anyone point me in the right direction?
Thanks!
Flexbox can do that.
.container {
height: 100vh;
display: flex;
flex-direction: column;
}
header {
background: lightblue;
}
.content {
flex: 1;
overflow-y: auto;
background: orange;
}
.spacer {
height: 2000px;
/* for demo purposes */
}
<div class="container">
<header>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos tenetur magnam labore laboriosam dolores, fugit ipsum quibusdam, aperiam totam itaque soluta debitis cumque provident repudiandae.</header>
<div class="content">
<div class="spacer"></div>
</div>
</div>
Currently how it looks on page:
The goal: I'm trying to make the orange buttons set at an equal height regardless of the (blurred) text above it.
Relevant SCSS:
.medium-2 {
padding: .5rem;
background-color: white;
box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.10);
margin-left: 2.5em;
text-align: center;
float: left;
width: 20%;
height: 450px;
h4 {
font-size: 16px;
border: none;
color: #5d5d5d;
font-family: $font-family-sans-serif;
}
p {
padding-bottom: 10%;
}
.button {
text-align: center;
}
}
Is there a non-hacky way to do this? Right now my only fix is to go into the html.erb file and add in some additional padding-down to the smaller block of p to push the orange button down in place.
Flexbox can easily solve this for you.
.content {
height: 200px;
width: 200px;
border: 1px solid;
display: inline-flex;
flex-direction: column;
margin-right: 10px;
}
p {
margin: 0;
}
button {
margin-top: auto;
width: 200px;
}
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit rerum neque laboriosam perspiciatis sapiente optio ipsam ea magni, accusantium eos quaerat ullam facilis hic quo aperiam a iure porro inventore.</p>
<button>Button</button>
</div>
<div class="content">
<p>Lorem ipsum dolor sit amet</p>
<button>Button</button>
</div>