I have created a grid and now have problems with max-width. I want to have containers which take up the available width and are restricted by a left and right margin. This containers can contain children. These children may be bigger then the parent container and may be moved with the class .move-to-right-border to the right border to take up full width on the right.
I now have added a max-width to the container, to restrict the width. But now i have the problem that i can't set child elements to take up full width. I tried with 100vw, but width 100vw the scrollbar is included. Has anybody a solution for this problem?
Maybe it gets more clear with this example, comment max-width in and out to see what i want.
.row-right {
box-sizing: border-box;
margin-left: 200px;
margin-right: 100px;
max-width: 700px; /* to see the problem comment max-width in and out */
width: calc(100% - 100px - 200px);
border: 1px solid red;
}
.move-to-right-border {
box-sizing: border-box;
width: calc(100% + 100px);
border: 2px solid blue;
}
http://codepen.io/anon/pen/eJymOL
just use below css
CSS
.row-right p {
text-align: justify;
width : 100%
}
Hope this will help you :)
I think u r after something like this:
.parent{
position: relative;
height: 300px;
padding: 10px 0;
background-color: #99ff99;
text-align: center;
}
.container{
width: 200px;
margin: 0 auto;
height: 100px;
padding: 30px 0;
background-color: #ff9999;
}
.child{
position: absolute;
width: 100%;
height: 50px;
left: 0;
background-color: #9999ff;
}
<div class="parent">
This is parent
<div class="container">
This is container
<div class="child">
This is child
</div>
</div>
</div>
Related
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
I have the following:
body {
overflow-x: hidden;
overflow: hidden;
height: 100%;
min-height: 100%;
}
html {
height: 100%;
min-height: 100%;
}
.navbar-header {
background: green;
}
.sidebar {
background-color: #333;
border-right: 1px solid #000;
color: #fff;
position: fixed;
width: 178px;
height: 100%;
}
.content {
border: 1px solid #ddd;
height: calc(100% - 150px);
background-color: #ffffff;
overflow: scroll;
overflow-x: hidden;
margin-left: 178px;
}
.footer {
border: 1px solid #ddd;
min-height: 78px;
margin-top: 10px;
padding: 20px;
background-color: #f6f9fb;
position: fixed;
bottom: 0;
width: calc(100% - 178px);
left: 185px;
}
<div class="navbar-header">
header
</div>
<nav class="sidebar">
sidebar
</nav>
<div class="content">
content
</div>
<div class="footer">
footer
</div>
But in my project to make the calc work I changed % per vh to make it work, I am sorry I can't provide my local code, but I would like understand why my code just worked with vh instead of %.
height: calc(100vh - 150px);
height: -moz-calc(100vh - 150px);
height: -webkit-calc(100vh - 150px);
A percentage value for height (also in calc) only works if either the parent element has a fixed height, or if all parents, grandparents etc. up to the body (or up to an ancestor with fixed px width) have a percentage height (i.e. no auto height).
vhis the viewport height, the area where your elements render. Setting your elements to 100vh is basically telling them to occupy the whole height of your view port.
Using % in the other hand is telling your elements to use all the space they need. If your divis empty, then your viewport will be empty.
I have a simple page with content on the left and an aside on the right. I would like the div on the left to be 70% of the width of the container and then the aside take up the rest of the space, but I can't figure out how to give it a variable width.
I've tried setting the width of the aside to be 30%, but that doesn't leave any room for the 24px of space I'd like between the div and the aside. I also tried setting the width of the aside to be 28% and that gets it close, but I figured there's a more precise way of doing it.
Here's a simple example:
.container {
width: 80%;
margin: auto;
background-color: #ccc;
height: 500px;
padding: 24px;
}
.left {
background-color: white;
width: 70%;
height: 100%;
float: left;
}
.right {
background-color: white;
width: 28%;
height: 100%;
float: right;
}
<div class="container">
<div class="left"></div>
<aside class="right"></aside>
</div>
Without getting into Sass, you can use the CSS calc(); function.
Note that in the CSS below, I'm keeping your 28% value for graceful degradation on older browsers that do not support calc() (Old Android browsers, Opera Mini and IE8-).
Live example here.
.container {
width: 80%;
margin: auto;
background-color: #ccc;
height: 500px;
padding: 24px;
}
.left {
background-color: white;
width: 70%;
height: 100%;
float: left;
}
.right {
background-color: white;
width: 28%;
width: calc(30% - 24px);
height: 100%;
float: right;
}
Ok, how about this:
http://jsfiddle.net/9fy6txpa/
.left {
background-color: white;
width: 70%;
height: 100%;
float: left;
border-right:24px solid #ccc;
box-sizing:border-box;
}
Set the widths to 70% and 30% as desired. Instead of having a margin/padding between the div and the aside, give the div a 24px wide right-border and then change it's box-sizing property to border-box. That way, it's width will be 70% including the added border (a total width of 70%, not 70% plus the border as the default box model does).
Here is the code. I want the DIV.fixed-nav (position:fixed) to completely fit its parent DIV.container of which width may change. Is there a pure CSS solution for this?
CSS:
body {
margin: 0;
padding: 0;
}
.container {
border: 1px solid #000000;
margin: 0 auto;
max-width: 600px;
min-width: 400px;
}
.fixed-nav {
background-color: red;
height: 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 99;
}
.content {
background-color: green;
height: 100px;
margin-top: 20px;
}
HTML:
<div class="container">
<div class="fixed-nav">
</div>
<div class="content">
</div>
</div>
Please check the DEMO.
The problem with fixed is that it will always be relative to the browser window. So if you set 100% height on your fixed container it will be 100% of the browser window.
The only way I could think of to achieve this is to use jQuery. Or if you don't need the menu to be fixed and it could be absolute then height 100% will work.
I am attempting to float 3 divs within a container div. I thought it would be simple but I'm having difficulty keeping them evenly spread apart. As I want the website to be somewhat responsive, so I can't have the spacing specified in px.
CSS:
#circlecontain{background-color:green;height:200px; width:1200px; margin:auto;}
.circle{width:200px;height:200px;border-radius:100px;
font-family:Arial, Helvetica, sans-serif;font-size:20px;color:#fff;
line-height:150px;text-align:center;background: rgba(0,0,0,0.8);
margin:auto; display:inline-block; vertical-align:middle;
}
Thanks in advance
Hold them inside 3 div elements with a width of 33% each, and use margin: auto; on round divs, this way they will be equal.
Demo
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
<div class="wrap_me">
<div></div>
</div>
CSS
.wrap_me {
width: 33%;
border: 1px solid #f00;
float: left;
}
.wrap_me div {
width: 150px;
height: 150px;
border-radius: 100px;
border: 1px solid #ddd;
margin: auto;
}
You can also hold this inside a single container with a min-width property so that your elements don't wrap incase of insufficient width
What Mr.Alien said isn't wrong, but
I'm having difficulty keeping them evenly spread apart
If you have three divs you want to distribute even along the full width of the container, you can float the left-most div to the left, the right-most div to the right and the middle div will get float:none and margin: auto, like so:
.container {
width: 300px;
height: 100px;
}
.container div {
width: 25%;
height: 100%;
background: blue;
border-radius: 100%;
}
.inner-left {
float: left;
}
.inner-middle {
float: none;
margin: auto;
}
.inner-right{
float: right;
position: relative;
bottom: 100%;
}
See the jsfiddle.
EDIT:
updated fiddle - didn't save...