i have a problem with html or css or both. i am looking for a possibility to create a bar that crosses all divs. The picture above demonstrates my project.
I would like to do it in css rather than to place a separate picture. Is that possible?
thanks ahead.
Look into the CSS position property.
.child {
height: 100px;
background-color: blue;
margin: 5px 0;
border-radius: 8px;
}
.container {
position: relative;
}
.left-bar {
position: absolute;
background-color: red;
height: 100%;
width: 20%;
border-radius: 8px;
}
<div class="container">
<div class="left-bar">
</div>
<div class="child">
</div>
<div class="child">
</div>
<div class="child">
</div>
</div>
Related
I want to make this:
stacked cards
the html would look like so:
<div class="container>
<div class="top-card>
<div class="card-content">
...
</div>
</div>
<div class="bottom-card>
</div>
</div>
I am having trouble styling this so that the height of the entire card adjusts automatically according to the content inside the top card. Thank you in advance.
you can use a combination of box-shadow and display: inline-block to accomplish what you are trying to do. I have updated the answer. Here is the code:
.grandparent {
display: inline-block;
position: relative;
}
.parent {
display: inline-block;
background: blue;
position: absolute;
top: 0;
left: 0;
}
.child {
width: 100px;
height: 100px;
background: red;
margin: 5px;
}
.shadow {
margin-left: -7px;
margin-top: -7px;
background: pink;
z-index: -100;
border: 1px solid green;
}
.empty {
opacity: 0;
}
<div class="grandparent">
<div class="parent">
<div class="child"></div>
</div>
<div class="parent shadow">
<div class="child empty"></div>
</div>
</div>
I am new to CSS and I came across a coding question where I had to create three boxes one inside the other. Below is my code. As of now it only creates two boxes. What changes should I make in my code to include the third box.
#first {
width: 100px;
height: 100px;
background: red;
overflow: hidden;
}
#first #second {
position: relative;
width: 50%;
height: 50%;
margin: auto;
margin-top: 25%;
background: black;
}
#first #second #third {
position: relative;
width: 25%;
height: 25%;
margin: auto;
margin-top: 25%;
background: orange;
}
<body>
<div id="first">
<div id="second"></div>
<div id="third"></div>
</div>
</body>
#first {
width: 100px;
height: 100px;
background: red;
overflow: hidden;
}
#second {
position: relative;
width: 50px;
height: 50px;
margin: auto;
margin-top: 25px;
background: black;
overflow: hidden;
}
#third {
width: 12.5px;
height: 12.5px;
margin-top: 18.75px;
margin-left: 18.75px;
background: orange;
}
<body>
<div id="first">
<div id="second">
<div id="third">
</div>
</div>
</div>
</body>
You missed to place the #third div inside #second div. Try placing it inside the second one. Try this one.
<body>
<div id="first">
<div id="second">
<div id="third"></div>
</div>
</div>
</body>
It's not a matter of css rather html.
<div id="first">
<div id="second">
<div id="third"></div>
</div>
</div>
In the code above. Third is the child of Second and Second is child of First.
I have a certaing layout of nested divs. One of them I would like to expand beyond its parent. However, with this nesting it's not that simple - I think.
Html:
<div class="wrapper">
<div class="gridcontent">
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Extend to .wrapper width</p>
</div>
</div>
</div>
</div>
</div>
</div>
I can't change the html, and there may be other .gcrows that need to stay inside the container. Is this possible to to at all?
Fiddle here.
I hope my question makes sense.
For your current HTML structure you can use .gcrow:first-child and set min-width: 100vw which is same as wrapper width if you remove default margin and padding from html, body.
You can use position: relative, left: 50% and to make it center just add transform: translateX(-50%), here is Fiddle
body,
html {
margin: 0;
padding: 0;
}
* {
box-sizing: border-box;
}
.wrapper {
width: 100%;
padding-left: 20px!important;
padding-right: 20px!important;
border: 1px solid pink;
}
.gridcontent {
width: 100%;
max-width: 1018px;
border: 1px solid #333;
margin: 0 auto;
}
.gcrow {
max-width: 100%;
width: 100%;
border: 1px solid #f00;
}
.gcrow:first-child {
min-width: 100vw;
position: relative;
left: 50%;
transform: translateX(-50%);
}
<div class="wrapper">
<div class="gridcontent">
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Extend to .wrapper width</p>
</div>
</div>
</div>
</div>
<div class="gcrow single-column">
<div class="gccolumn">
<div class="gccolumn-inner">
<div class="gcitem">
<p>Leave me alone</p>
</div>
</div>
</div>
</div>
</div>
</div>
Also its box-sizing: border-box not box-border
try something like this
.gcrow {
position: relative;
overflow: visible;
}
.gcitem {
position: absolute;
right: 0;
top: 0;
}
I'm having troubles positioning my divs. I want to have my child div stick to the bottom of the parent div, with grandchild_1 and grandchild_2 staying correctly put. By that, I mean having grandchild_1 before grandchild_2, like on the picture.
This is what I've tried, but the "child" div sticks to the top :
#parent {
position: relative;
}
#child {
position: absolute; bottom: 0;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">
</div>
<div id="grandchild_2">
</div>
</div>
</div>
Anyone knows how I should proceed ? Thanks !
If you specify a height on the parent it will stick to the bottom.
Example: http://codepen.io/anon/pen/wGqzVd
HTML
<div id="parent">
Parent
<div id="child">
Child
<div id="grandchild_1">
Grandchild 1
</div>
<div id="grandchild_2">
Grandchild 2
</div>
</div>
</div>
CSS
div {
padding: 5px;
}
#parent {
position: relative;
background: lightgray;
height: 200px;
width: 150px;
}
#child {
position: absolute;
bottom: 5px;
background: yellow;
}
#grandchild_1 {
background: pink;
}
#grandchild_2 {
background: lightblue;
}
The provided code works as is...assuming that the parent has a height greater than that of the child.
#parent {
position: relative;
height: 200px;
background: pink;
}
#child {
position: absolute;
width: 100%;
bottom: 0;
background: green;
}
#grandchild_1,
#grandchild_2 {
height: 25px;
background: red;
margin: 10px;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">GC1
</div>
<div id="grandchild_2">GC2
</div>
</div>
</div>
As an alternative to positioning, flexbox can do the same...and the child will affect the height of the parent which an absolutely positioned child cannot.
#parent {
position: relative;
height: 200px;
background: pink;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
#child {
width: 100%;
background: green;
}
#grandchild_1,
#grandchild_2 {
height: 25px;
background: red;
margin: 10px;
}
<div id="parent">
<div id="child">
<div id="grandchild_1">GC1
</div>
<div id="grandchild_2">GC2
</div>
</div>
</div>
Really can't figure out what's wrong with it, but all the content I add into div, goes out of it, just like it's not in it.
Check it here: JSFiddle!
HTML___
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
</div>
</div>
</div>
CSS___
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
}
#logo {
float: left;
}
You need to clear your floats:
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT NOW APPEARS INSIDE DIV :)
</div>
<div style="clear: both;"></div>
</div>
</div>
</div>
Because you've floated your logo, any content following it will wrap around it. Which is what is causing the effect you're seeing.
Add overflow:auto to your #header div to restore the expected behavior:
#header {
position: relative;
width: 100%;
background: yellow;
border: 1px solid black;
overflow:auto;
}
jsFiddle example
Floating the child essentially removes it from the flow and the parent collapses. Adding the overflow rule gives you the behavior you expected.
I'd urge you to use flex. It's quite robust and lets you create any kind of layout you want without any issues really. I've added a menu to the right hand side just to illustrate your logo in actual context.
<!-- HTML -->
<div id="wrapper">
<div id="container">
<div id="header">
<div id="logo">
TEXT GOES OUTSIDE OF DIV :'((
</div>
<div id="content-menu">
<div id="menu">
Home
Contact
About
About
</div>
</div>
</div>
</div>
</div>
Corresponding CSS:
/* CSS */
#container {
width: 960px;
margin: 20px auto 0 auto;
background: yellow;
}
#header {
position: relative;
width: 100%;
margin: 1.2em auto;
background: yellow;
border: 1px solid black;
padding: 2px; /*just to see the div*/
display: flex;
}
#logo { flex: 1; }
#content-menu { flex: 4;}
#menu { display: flex; }
#menu > a {
display: inline-block;
text-align: center;
line-height: 32px;
text-decoration: none;
color: #000;
flex: 1;
}