I have a container with auto-width and some margin left and right:
.inner {
margin-left: 20px;
margin-right: 20px;
width: auto;
}
And in this container different elements. Some elements should be 100% of the page (without the margin) and for that I use calc():
.fullwidthelement {
left: -20px;
width: calc(100% + 40px);
width: -webkit-calc(100% + 40px);
}
But it looks like Safari (5.1.7 on Windows 8) can't handle that. In the Web Inspector I see e yellow exclamation mark and it does not take the rule for the width:
So, is there a work around for this or can I get Safari to work fine with calc somehow?
First it is important to note that you should always specify the properties with vendor prefixes before the unprefixed properties :
.fullwidthelement {
left: -20px;
width: -webkit-calc(100% + 40px);
width: calc(100% + 40px);
}
Second, if you check canIuse (click on "show all") you will see that safari 5.1 doesn't support the calc() function.
Would negative margins work for you?
#container
{
border: 1px solid;
width: 400px;
}
.inner
{
background: red;
height: 200px;
margin-left: 20px;
margin-right: 20px;
width: auto;
}
.fullwidthelement
{
background: green;
height: 100px;
margin-left: -20px;
margin-right: -20px;
}
<div id="container">
<div class="inner">
<p>Blabla</p>
<div class="fullwidthelement"></div>
</div>
</div>
use padding for that
.outer-div {
width: 200px;
height: 200px;
background: #000;
margin: 0 auto;
position: relative;
}
.inner-div {
width: 100%;
height: 150px;
padding-right: 100px; /*extra width you want to add*/
background: #f00;
position: absolute;
top: 20px;
}
<div class="outer-div">
<div class="inner-div"></div>
</div>
Jsfiddle http://jsfiddle.net/0xdscqLo/2/
Related
i try to make that in css
http://prntscr.com/l19jl9
but i only sucsses to
http://prntscr.com/l19juk
https://prnt.sc/l19itx
this my code:
.halfCircleLeft{
height:90px;
width:45px;
border-radius: 90px 0 0 90px;
background:green;
}
how i can do that?
You can set overflow: hidden to the container and make the inner div a big circle, it will give you the effect you want.
.cont{
position: relative;
overflow: hidden;
width: 200px;
height: 100px;
background-color: #e5e5e5;
}
.round-back{
top: -100px;
left: 50px;
position: absolute;
border-radius: 50%;
width: 300px;
height: 300px;
background-color: red;
}
<div class="cont">
<div class="round-back"></div>
</div>
This isn't exactly the shape that you have in your image, but it's simple and it's likely close enough:
#box {
border:1px solid #000;
border-radius: 10px 0px 0px 10px / 50% 0% 0% 50%;
width: 200px;
height: 100px;
background-color: #ccc;
}
<div id="box"></div>
The above solution uses elliptical border-radius, which is specified using a slash (/).
Another approach here is much closer to your original image, but it takes significantly more code to implement, and it's quite a bit more brittle too to customise:
#wrapper {
overflow: hidden;
width: 200px;
}
#box::before {
position: relative;
display: block;
content: "";
margin-left: -20px;
background: #ccc;
height: 400px;
width: 400px;
margin-top: -75%;
border-radius: 50%;
z-index: -10;
}
#box {
float: left;
position: relative;
margin-left: 20px;
width: 200px;
height: 100px;
background-color: #ccc;
}
#content {
position: absolute;
height: 100%;
width: 100%;
top: 0px;
}
<div id="wrapper">
<div id="box">
<div id="content">
</div>
</div>
</div>
This approach uses an oversized circle, which is then clipped by a #wrapper div using overflow: hidden;. The #content div isn't strictly necessary for the shape, but it may make it easier to position something inside the box.
I wasn't sure of the best way to explain this, but if you look at the example snippet in Chrome or Safari, the orange div does not cause the document to scroll horizontally when the window is narrower than the blue container. This is the desired behavior.
However, in Firefox, if you make the window narrow it counts the orange box as content that needs to be able to be scrolled to, causing the document to scroll to the right in an odd way that shifts the body content to the left and is ugly. What's also strange is that you'll notice the green box on the left DOESN'T cause it to have scrollable space to the left...is this a bug, or why is this happening?
Anyone else encountered this?
* {
box-sizing: border-box;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
width: 100%;
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
transform: scale(1);
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: fixed;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
width: 100%;
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
You can wrap that in an element that will scale with the viewport and set overflow: hidden on that element. You can also remove the transform: scale() from .banner and use position: absolute on the pseudo elements, unless scale(1) is needed for some reason.
* {
box-sizing: border-box;
}
header {
overflow: hidden;
}
.wrapper {
max-width: 700px;
height: 200px;
margin: 0 auto;
}
.banner {
height: 100%;
padding: 10px;
background-color: blue;
position: relative;
color: #ffffff;
}
.banner:before, .banner:after {
content: '';
width: 100px;
height: 100%;
position: absolute;
left: -100px;
top: 0;
background-color: green;
}
.banner:after {
left: 100%;
background-color: orange;
}
.content {
height: 300px;
padding: 10px;
background-color: #f1f1f1;
margin-top: 40px;
}
<header>
<div class="wrapper">
<div class="banner">Banner</div>
<div class="content">Content</div>
</div>
</header>
I have a fixed div inside of a relative positioned div. I want the div to be fixed to the top of the page and contained within my relative positioned parent.
A common example of this use case is a sticky website sidebar in a two column layout.
As I understand. Setting the top: 0 on my fixed div will fix it to the top. Setting margin-left: 0 on my fixed div will align it with its relatively positioned parent.
This works fine on all browsers except Safari (version < 10). Is there any way to fix this issue that doesn't involve user agent sniffing.
Here is a bare-minimum fiddle illustrating isolating issue below:
http://jsfiddle.net/vgc1ekbg/4/
Here's another fiddle illustrating the issue in the context of a two-column website layout: http://jsfiddle.net/dpmj3y0n/1/
Edited based on last fiddle shared in comments.
* {
box-sizing: border-box;
}
.wrapper {
max-width: 960px;
height: 2000px;
margin: 0 auto;
text-align: center;
/* line-height: 580px; */
}
.layout {
height: 2000px;
/*padding-left: 20px;*/
/* padding-right: 350px; */
/*margin-right: 192px;*/
}
.layout:before, .layout:after {
content: "";
display: table;
}
.layout:after {
clear: both;
}
.col-main {
width: calc(100% - 184px);
margin-left: -8px;
margin-top: -8px;
height: 580px;
float: left;
position: relative;
left: 200px;
background-color: #f16529;
line-height: 580px;
}
.col-sub {
/* margin-right: -100%; */
position: absolute;
top: 0;
left: 0;
width: 200px;
line-height: 580px;
/* height: 580px; */
background-color: #f0dddd;
float: left;
}
.sticky {
position: fixed;
top: 0;
left: 0;
width: 200px;
height: 100px;
overflow: hidden;
z-index: 100;
background-color: gray;
color: red;
line-height: 100px;
}
<div class="wrapper">
<div class="layout">
<div class="col-main">Main Content</div>
<div class="col-sub">Sidebar Content
<div class="sticky">
Sticky Content
</div>
</div>
</div>
</div>
if you intent to center align, you can use left: 50%; and transform: translateX(-50%); to both .column and .sticky
http://jsfiddle.net/vgc1ekbg/5/
The following code works if the page has enough space to host all divs, but if I resize at minimum the page the two divs positioning absolute overlap. How can I avoid that?
#div-chatroom {
position: relative;
height: calc(100% - 70px);
/* IE9+ and future browsers */
height: -moz-calc(100% - 70px);
/* Firefox */
height: -webkit-calc(100% - 70px);
/* Chrome, Safari */
padding: 0;
text-align: center;
margin: 0;
border-right: 2px solid #333333;
overflow: auto;
}
#div-messages {
position: absolute;
top: 10px;
bottom: 110px;
left: 10px;
right: 10px;
min-height: 200px;
overflow: auto;
}
#div-sending {
position: absolute;
bottom: 10px;
left: 10px;
right: 10px;
height: 100px;
}
<div id="div-chatroom">
<div id="div-messages">messages here</div>
<div id="div-sending">sending tools here</div>
</div>
UPDATE #1
As required the code on JSFiddle (but if the two divs have position: absolute it doesn't seem to work).
Ok, I got an equivalent result by changing approach.
CSS (JSFiddle):
#div-chatroom {
position: relative;
height: calc(100% - 70px); /* IE9+ and future browsers */
height: -moz-calc(100% - 70px); /* Firefox */
height: -webkit-calc(100% - 70px); /* Chrome, Safari */
padding: 0;
text-align: center;
margin: 0;
border-right: 2px solid #333333;
background-color: #ffffff;
overflow: auto;
}
#div-messages {
position: relative;
margin: 0;
padding: 0;
min-height: 200px;
height: calc(100% - 100px); /* IE9+ and future browsers */
height: -moz-calc(100% - 100px); /* Firefox */
height: -webkit-calc(100% - 100px); /* Chrome, Safari */
background-color: green;
overflow: auto;
}
#div-sending {
position: relative;
margin: 0;
padding: 0;
height: 100px;
background-color: red;
}
the whole purpose of position:absolute is for element to not be dependend or any other elemends on the page (except for it's parent) co you can't actually achieve this. if you want to aligh them accordingly, you can do this using position style other than absolute. post your code to jsfiddle, then we will be able to provide good solution.
Ok, I want this:
For that, I have this HTML code:
<div id="wrapForCenter">
<div id="title">
title
</div>
<div id="contentFrame">
<div id="imagePlaceholder">
image
</div>
<div id="content">
content
</div>
</div>
<div id="buttonsBar">
buttonsBar
</div>
</div>
And I have this CSS code:
#wrapForCenter
{
position: absolute;
top:50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title
{
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame
{
height: 240px;
width: 480px;
}
#imagePlaceholder
{
float: left;
width: 100px;
height: 100%;
background-color: Green;
}
#content
{
float: left;
width: 380px; /*<-- look at this*/
height: 100%;
background-color: Yellow;
overflow: auto;
}
#buttonsBar
{
clear: left;
width: 100%;
height: 40px;
background-color: Silver;
}
If I change the contents width to 100%, why occurs this?
What I spect is that content width would be contentFrame minus imagePlacehoder width in pixels, but when I specify float:left for both, imagePlacehoder and content, content gets its parent container width. Why?
Is there another way to get the same result without using float (maybe display:inline)? And using width:100% for content?
Thank you very much. CSS is not my strenght.
This is called a float drop. Floats work such that they'll fit side-by-side as long as there's enough room for each, but a float will bump down below the previous one if there's not enough room for it to fit.
width:100% means make it 100% as wide as its container (#wrapForCenter). Naturally, if you tell something to be the entire width of it's container, nothing can fit along either side inside of that container, so as a float it must move down below whatever is before it (an earlier "sibling") to fit.
A question similar to this was asked by me myself in stackoverflow before.
How to auto adjust (stretch) div height and width using jQuery or CSS
You can set HTML like;
<div id="container">
<div id="top"></div>
<div id="left"></div>
<div id="right"></div>
<div id="bottom"></div>
</div>
And CSS like;
#container {
position: relative;
width: 300px;
height: 200px;
}
#top, #left, #right, #bottom {
position: absolute
}
#top {
top: 0;
width: 100%;
height: 50px;
background: #00b7f0
}
#left {
top: 50px;
width: 50px;
bottom: 50px;
background: #787878
}
#right {
top: 50px;
left: 50px;
right: 0;
bottom: 50px;
background: #ff7e00
}
#bottom {
bottom: 0;
width: 100%;
height: 50px;
background: #9dbb61
}
Here is the working demo.
Hope this helps..
Note: I recommend (not forcing) you to do a search in stackoverflow before asking questions.
You should set your image holder to 25% and your content to 75%, or if you know how much space you have allocated for your entire content area(picture and content) then subtract 100 from that and use that many pixels. but overall this should work
#wrapForCenter {
position: absolute;
top: 50%;
left: 50%;
margin-top: -160px;
margin-left: -240px;
width: 480px;
height: 320px;
border: 1px solid black;
}
#title {
width: 100%;
height: 40px;
background-color: Blue;
}
#contentFrame {
height: 240px;
width: 480px;
}
#imagePlaceholder {
float: left;
width: 25%; /* See Here */
height: 100%;
background-color: Green;
}
#content {
float:right;
width: 75%; /* And here */
height: 100%;
background-color:Yellow;
}