I have the following html markup:
<div class="container">
<div> <------Want this to bee 100% height
<div class="child">
</div>
<div class="child">
</div>
<div> < --------- 100% height
</div>
</div>
</div>
I want the two classless divs to have a height of 100%
.container {
height: 100%;
> div {
height: 100%;
},
> div > div {
height: 100%;
}
}
This works, but how do I accomplish this in a single rule?
Yes, you can use the :not pseudo selector to exclude any element with a class.
.container {
height: 100%;
div:not([class]) {
height: 100%;
}
}
This will essentially select any div that does not have a class attribute set.
Here's an example with the SASS above compiled to CSS.
.container {
height: 100%;
}
.container div:not([class]) {
height: 100%;
background: blue;
}
.container div.child {
background: red;
}
<div class="container">
<div>
jkfhakfhkadshfksdhfasdk
<div class="child">
child
</div>
<div class="child">
dhild
</div>
<div>
djalfjasdl;fjasl;fjas;lfj
</div>
</div>
</div>
EDIT: If you only want to go two levels deep (meaning classes divs won't be affected within the second level div), you can do this:
.container {
height: 100%;
> div:not([class]) {
height: 100%;
> div:not([class]) {
height: 100%;
}
}
}
Here it is in action with the second level selector:
.container {
height: 100%;
}
.container .child {
background: blue;
}
.container>div:not([class]) {
height: 100%;
background: red;
}
.container>div:not([class])>div:not([class]) {
height: 100%;
background: red;
}
<div class="container">
<div>
top level no class
<div class="child">
first child with class
</div>
<div class="child">
first child with class
</div>
<div>
second child no class
<div class="child">
third child with class
<div>
fourth child no class no affected by red bg
</div>
</div>
</div>
</div>
</div>
Here's a fiddle
https://jsfiddle.net/dcmh5sga/
If you need it to be a singe rule, you can do this:
.container, .container > div, .container > div > div {
height: 100%;
}
You could also apply the rule to all child divs, if that works for your case:
.container, .container div {
height: 100%;
}
Related
I'm trying to achieve the following:
I was able to replicate the image but only if my div is not floating in the page (without the margin applied and without the position: absolute), otherwise I can't see the green rectangle.
My HTML structure is the following:
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
In the .interface CSS I have the following:
.interface
{
position: absolute;
top: 15%;
}
With this CSS I'm unable to see the green rectangle. If I remove the position: absolute (and therefore the top: 15% stops applying) I'm able to see the green rectangle.
You can see the issue in this JSFiddle: https://jsfiddle.net/v9euwdz3/
So, how do I manage to have the DIV showing at a certain level (margin from top) and without compromise my HTML structure?
Here is what you're trying to achieve using flex:
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.navetc {
background-color: white;
height: 15vh;
}
.top {
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="navetc">
SPACE
</div>
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
You could also use margin-top: 15%; instead of a placeholder div
.body {
display: flex;
flex-direction: column;
background-color: blue;
justify-content: space-between;
height: 100vh;
}
.top {
margin-top: 15vh;
background-color: green;
height: 60px;
}
.middle {
background-color: yellow;
flex-grow: 1;
}
.bottom {
background-color: red;
height: 50px;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
(I used vh instead of % to get it to show up correctly in this code snippet)
as we know the content that have height which is 100% means is 100% of its parent and while the height of the parent is not defined will cause an error that's what you was stuck with you set the with of body to 100% but was not right you would set it to 100vh to fit the screen if you are on computer and the other mistakes that I found was in your calculation where you used to subtract the measurement which is in parcentages from the one in pixels height: calc(100% - 150px); and the others where simple mistakes
html,
body {
height: 100vh;
}
.app {
position: relative;
height: 100%;
display: flex;
}
.interface {
position: absolute;
height: 100%;
top: 15%;
}
.view {
position: fixed;
height: 100%;
background-color: #ccc;
width: 350px;
}
.body {
position: relative;
height: 100%;
}
.body .top {
height: 15%;
border: 1px solid #000;
}
.body .middle {
height: 60%;
border: 1px solid red;
}
.body .bottom {
height: 20%;
border: 1px solid green;
}
<div class="app">
<div class="interface">
<div class="view">
<div class="body">
<div class="top">
Top content
</div>
<div class="middle">
Middle content
</div>
<div class="bottom">
Bottom content
</div>
</div>
</div>
</div>
</div>
to see the result in the snippet you should observe it in full page and also when you see the result through jsfiddle there at the result section there is bar downward which hide some part of footer
I have a simple layout that I've created with CSS grid consisting of a main element and a sidebar (please see snippet). Inside the sidebar, I have a child element that I would like to go full-width (i.e. ignore the padding around the layout container) on mobile devices.
The .full-width element does go full-width, but apparently what happens is it gets the whole grid to be 100vw, which makes main and aside overflow .container (the grey element). How can I keep it full-width and keep main and aside within the boundaries of .container? Another requirement is that the full-width element remains in the flow of the document (so no fixed or absolute positioning).
.page {
background: pink;
padding: 30px;
}
.container {
display: grid;
grid-template-areas: "aside" "main";
background: grey;
padding: 60px 0;
}
aside {
background: yellow;
}
main {
background: green;
}
.full-width {
width: 100vw;
margin-left: -30px;
background: red;
}
<div class="page">
<div class="container">
<main>
<p>I'm the main content</p>
</main>
<aside>
<p>I'm the sidebar</p>
<div class="full-width">
<p>I'm the full width element</p>
</div>
</aside>
</div>
</div>
First and easy solution is to set the columns to be 100% to avoid the overflow:
.page {
background: pink;
padding: 30px;
}
.container {
display: grid;
grid-template-areas: "aside" "main";
grid-template-columns: 100%;
background: grey;
padding: 60px 0;
}
aside {
background: yellow;
}
main {
background: green;
}
.full-width {
width: 100vw;
margin-left: -30px;
background: red;
}
body {
margin:0;
}
<div class="page">
<div class="container">
<main>
<p>I'm the main content</p>
</main>
<aside>
<p>I'm the sidebar</p>
<div class="full-width">
<p>I'm the full width element</p>
</div>
</aside>
</div>
</div>
Or simply use negative margin on both sides to have the full width you want:
.page {
background: pink;
padding: 30px;
}
.container {
display: grid;
grid-template-areas: "aside" "main";
background: grey;
padding: 60px 0;
}
aside {
background: yellow;
}
main {
background: green;
}
.full-width {
margin-left: -30px;
margin-right: -30px;
background: red;
}
body {
margin:0;
}
<div class="page">
<div class="container">
<main>
<p>I'm the main content</p>
</main>
<aside>
<p>I'm the sidebar</p>
<div class="full-width">
<p>I'm the full width element</p>
</div>
</aside>
</div>
</div>
I have a div #1 with a variable width and variable height. Now I want to position a div #2 with fixed width and height next to the right site of #1.
These two divs should be inside another div with width: 100%, because I want to repeat those two divs.
Here is an image (white: div #1, black: div #2):
How would I do that?
I played around with floating
Using a flexbox for the rows. I put the width for the white box as inline CSS because I assume it will be calculated somehow in your code.
.container {
background: lightgreen;
padding: 3em;
}
.row {
display: flex;
height: 4em;
}
.row:not(:last-child) {
margin-bottom: 1em;
}
.flexible {
background: white;
}
.fixed {
background: black;
width: 1em;
}
<div class="container">
<div class="row">
<div class="flexible" style="width:150px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:500px"></div>
<div class="fixed"></div>
</div>
<div class="row">
<div class="flexible" style="width:50px"></div>
<div class="fixed"></div>
</div>
</div>
Use flex.
.container {
display: flex;
}
.secondDiv {
width: 200px;
}
You can use this example:
.container{
width: 100%;
}
.div1{
width: <div1 width>;
height: <div1 height>;
float: left;
background-color: white;
}
.div2{
float: left;
width: <div2 width>;
height: <div1 height>;
background-color: black;
}
You should group this two divs (div1 and div2) in another div, inside de container with 100% width:
<div id="container" class="container">
<div id="block1" style="float: left; width: 100%">
<div id="div1" class="div1">
</div>
<div id="div2" class="div2">
</div>
</div>
...
</div>
I have a div inside a parent div. The parent div has display set to table-cell and does not have a fixed size.
I need the child div to stretch throughout the parent div, but I need the parent div to retain its size and not stretch itself.
This is my code (with inline CSS for simplicity):
<div style="display:table;">
<div style="display:table-cell;"></div>
<div style="display:table-cell; width: 600px;">Content</div>
<div id="parent" style="display:table-cell;">
<div id="child"></div> <!-- I need to stretch this across the entire parent -->
</div>
</div>
This is basically what I'm trying to achieve:
In other words: three divs in a line, the middle having a fixed size, the other ones stretching to the ends of the browser window. I need to be able to add content to the right div while making sure the right div doesn't resize as I add content into it.
Flexbox can do that.
.parent {
display: flex;
height: 200px;
}
.child {
flex: 1;
background: lightgrey;
}
.child.fixed {
flex: 0 0 600px;
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child fixed"></div>
<div class="child"></div>
</div>
Or if you must use CSS Tables - Codepen Demo
.parent {
display: table;
height: 200px;
width: 100%;
table-layout: fixed;
}
.child {
display: table-cell;
background: lightgrey;
}
.child.fixed {
width: 600px;
background: blue;
}
<div class="parent">
<div class="child"></div>
<div class="child fixed"></div>
<div class="child"></div>
</div>
HTML:
<div class="browser-window">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
CSS:
.browser-window {
width: 100%;
height: 100px;
background-color: black;
display: table;
}
.left, .middle, .right {
display: table-cell;
height: 100%;
}
.middle {
width: 60px;
background-color: green;
}
https://jsfiddle.net/6gzegpzx/
I know this is a rather simple question, but I can't figure it out for the life of me. I have two links which I've applied a background image to. Here's what it currently looks like (apologies for the shadow, just a rough sketch of a button):
However, I want those two buttons to be side by side. I can't really figure out what needs to be done with the alignment.
Here's the HTML
<div id="dB"}>
Download
</div>
<div id="gB">
Gallery
</div>
Here's the CSS
#buyButton {
background: url("assets/buy.png") 0 0 no-repeat;
display:block;
height:80px;
width:232px;
text-indent:-9999px;
}
#buyButton:hover{
width: 232px;
height: 80px;
background-position: -232px 0;
}
#buyButton:active {
width: 232px;
height: 80px;
background-position: -464px 0;
}
#galleryButton {
background: url("images/galleryButton.png") 0 0 no-repeat;
display:block;
height:80px;
width:230px;
text-indent:-9999px;
}
#galleryButton:hover{
width: 230px;
height: 80px;
background-position: -230px 0;
}
#galleryButton:active {
width: 230px;
height: 80px;
background-position: -460px 0;
}
Beware float: left… 🤔
…there are many ways to align elements side-by-side.
Below are the most common ways to achieve two elements side-by-side…
Demo: View/edit all the below examples on Codepen
Basic styles for all examples below…
Some basic css styles for parent and child elements in these examples:
.parent {
background: mediumpurple;
padding: 1rem;
}
.child {
border: 1px solid indigo;
padding: 1rem;
}
Using the float solution my have unintended affect on other elements. (Hint: You may need to use a clearfix.)
html
<div class='parent'>
<div class='child float-left-child'>A</div>
<div class='child float-left-child'>B</div>
</div>
css
.float-left-child {
float: left;
}
html
<div class='parent'>
<div class='child inline-block-child'>A</div>
<div class='child inline-block-child'>B</div>
</div>
css
.inline-block-child {
display: inline-block;
}
Note: the space between these two child elements can be removed, by removing the space between the div tags:
html
<div class='parent'>
<div class='child inline-block-child'>A</div><div class='child inline-block-child'>B</div>
</div>
css
.inline-block-child {
display: inline-block;
}
html
<div class='parent flex-parent'>
<div class='child flex-child'>A</div>
<div class='child flex-child'>B</div>
</div>
css
.flex-parent {
display: flex;
}
.flex-child {
flex: 1;
}
html
<div class='parent inline-flex-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
.inline-flex-parent {
display: inline-flex;
}
html
<div class='parent grid-parent'>
<div class='child'>A</div>
<div class='child'>B</div>
</div>
css
.grid-parent {
display: grid;
grid-template-columns: 1fr 1fr
}
Apply float:left; to both of your divs should make them stand side by side.
keep it simple
<div align="center">
<div style="display: inline-block"> <img src="img1.png"> </div>
<div style="display: inline-block"> <img src="img2.png"> </div>
</div>
.section {
display: flex;
}
.element-left {
width: 94%;
}
.element-right {
flex-grow: 1;
}
<div class="section">
<div id="dB" class="element-left" }>
Download
</div>
<div id="gB" class="element-right">
Gallery
</div>
</div>
or
.section {
display: flex;
flex-wrap: wrap;
}
.element-left {
flex: 2;
}
.element-right {
width: 100px;
}
<div class="section">
<div id="dB" class="element-left" }>
Download
</div>
<div id="gB" class="element-right">
Gallery
</div>
</div>