I have a DIV which I want to always keep in the center of the screen even when the browser is resized. Also there is a floating right DIV which shouldn't overlap the center DIV.
Chrome is causing lots of problems with either center going off the screen at the left side or the right floating DIV overlapping the center DIV.
CSS
.center {
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 650px;
height: 200px;
margin: auto;
}
.right {
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 200px;
height: 200px;
float: right;
}
body {
border-style: dashed;
border-width: 1px;
}
HTML
<div class="right">right</div>
<div class="center">center</div>
.center
{
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 50%;
height: 200px;
margin:0 auto;
}
.right
{
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 25%;
height: 200px;
float: right;
}
I've found only 1 issue, and its the right div overlapping the center div, here is a possible solution to that, you just needed to add position: relative; to the class of the center div
CSS
.center
{
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 650px;
height: 200px;
margin: 0 auto;
display: block;
position: relative;
}
.right
{
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 200px;
height: 200px;
float: right;
display: block;
}
body
{
border-style: dashed;
border-width: 1px;
}
Hope it helps!
This works for me so long as the content never overlaps:
.right {
float: right;
min-width: 0;
border: 1px solid blue;
box-sizing: border-box;
}
.center {
width: 50%;
margin: 0 auto;
border: 1px solid green;
}
If that's the issue, I think you have to explore options where the content font-size shrinks as the page shrinks, which I think is only available with js reliably.
Try this
<div class="center">center</div>
<div class="right">right</div>
.center {
border-style: solid;
border-width: 1px;
background-color: #808080;
width: 650px;
height: 200px;
margin: auto;
display:block;
}
.right {
border-style: solid;
border-width: 1px;
background-color: #0f0;
width: 200px;
height: 200px;
float: right;
margin-top:10px;
display:block;
}
body {
border-style: dashed;
border-width: 1px;
}
Related
My paper-input is extending outside of the parent div, and I don't know why. I've tried setting the bottom margin but it does nothing. Here's what I have, the borders are for testing and will be removed later.
#main {
width: 100%;
height: 100%;
border: 2px solid transparent;
}
.sliderContainer {
width: 100%;
height: 60px;
border: 2px solid transparent;
}
.label {
width: 100%;
margin-left: 6px;
}
.labelValue {
margin-left: 10px;
color: #A6A6A6;
}
.sliderDiv {
width: 100%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.button {
width: 1px;
height: 30px;
float: left;
display: inline-block;
border: 2px solid transparent;
}
.slider {
width: 50%;
height: 30px;
margin-top: 3px;
margin-right: 34px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffset { /* This is the issue. */
width: 16%;
height: 40px;
display: inline-block;
border: 2px solid transparent;
}
.syncOffsetDiv {
width: 5%;
display: inline-block;
}
example
Figured it out, it was the label that was causing an issue. I added no-label-float to remove the floating label and vertical-align: top to the class and that made it work.
I have code that provides me that
CSS Code:
.about-best-big-vector-right {
width: 1380px;
float: right;
border-top: 140px solid #272838;
border-left: 75px solid transparent;
position: relative;
outline: 3px solid #eda225;
outline-offset: .3rem;
-moz-outline-radius-bottomleft: 2em;
}
HTML Code: <div class="about-best-big-vector-right"></div>
But I want to achive that and can't make cornered bottom-left?
Don't use border for this, use skew transformation:
.box {
overflow: hidden;
width: 40%;
margin-left: auto;
}
.box::before {
content: "";
display: block;
margin-right: -10px;
height: 150px;
background: #000 content-box;
padding: 5px;
border: 4px solid orange;
transform-origin: top;
transform: skewX(30deg);
}
<div class="box">
</div>
I want to make a div that a 2px solid white border on the bottom, left, right, and most of the top except for a small part roughly 50px wide that will have a 1px solid green border. I know php if you think that will help. My current css is this...
div#ghostBox{
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
left: 550px;
top: 270px;
}
Btw I am making a game of pac-man.
You can keep the use of only one element and rely on gradient:
body {
background: pink;
}
.box {
width: 170px;
height: 100px;
border: 5px solid white;
border-top: none;
background: linear-gradient(to right, white 50px, green 0) 0 0/100% 5px no-repeat;
}
<div class="box">
</div
i think you want this (:
body{
background-color:black;
}
p{
color:white;
margin: 1px;
}
/* TEXT BOX */
div#ghostBox{
height: 100px;
width: 150px;
border: 2px solid white;
border-top: 5px solid white;
position: fixed;
left: 50px;
top: 50px;
color:red;
padding: 0px;
padding-top: 0px;
}
/* High text color line */
div#text{
border-top: 5px solid green;
position: absolute;
margin-top: 0px;
width: auto;
margin: 0px;
}
/* High color line after text */
div#notext{
border-top: 5px solid red;
margin-top: 0px;
width: auto;
margin: 0px;
}
<div id="ghostBox"><div id="text"><p>good luck
</p></div><div id="notext"></div></div>
You can do it using css after or before pseudo selector. Below is just an example . You can modify it according to your requirement
div#ghostBox {
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
background: red;
}
div#ghostBox:after {
content: '';
width: 50px;
border: 2px solid green;
position: absolute;
padding-right: 50px;
}
<div id="ghostBox"> Ghost Box</div>
There may be better ways, but you could use a span at the beginning of the div:
Just set the border-top for the span and set its width:
(I removed the left and top properties for the example)
body {
background-color: red;
}
div#ghostBox {
width: 170px;
height: 100px;
border: 2px solid white;
position: fixed;
}
span {
border-top: 2px solid blue;
width: 50px;
position: absolute;
}
<div id='ghostBox'>
<span> </span> test
</div>
I have three divs in page called header, content and footer. Header is showing at top and have no issue.
The following css is not working properly with inner div (Content) to fit its content and screen display.
While I want to
expand inner div to fill screen size and footer remain at bottom.
Keep divs in order
fill content always
I have tried many css solutions but nothing works perfect to fit div at page and content both.
.header {
background-color: #bf4b4b ;
/*margin-left: 14%;*/
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5px;
float: left;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
flex: 1 1 auto;
}
.footer {
background-color: #243b82 ;
/* margin-left: 14%;
float: left;*/
margin-top: 5px;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
/*
display:inline-block;
vertical-align:middle;
*/
display: inline-block;
vertical-align: bottom;
}
Please note its wordpress theme and woocommerce pages need to show inside inner div
check this jfiddle and tell me if it works as you wanted thank you.
body{
margin:0px;
}
.header{
background-color:#bf4b4b;
height:80px;
width:100%;
position:fixed;
top:0px;
left:0px;
}
.content{
height:100vh;
padding:80px 0px;
background-color:#FFFFFF;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.footer{
background-color:#243b82;
height:80px;
width:100%;
position:fixed;
bottom:0px;
left:0px;
}
Flex display could be a great option here. It looks like you started down that path already. Adding a surrounding container with a min-height of the full window, "100vh", might accomplish what you're looking for. Let me know how this works out:
<div class="container">
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</div>
.container {
display: flex;
width: 100%;
min-height: 100vh;
flex-direction: column;
}
.header {
background-color: #bf4b4b ;
/*margin-left: 14%;*/
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5px;
float: left;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
flex: 1 1 auto;
}
.footer {
background-color: #243b82 ;
/* margin-left: 14%;
float: left;*/
margin-top: 5px;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
/*
display:inline-block;
vertical-align:middle;
*/
display: inline-block;
vertical-align: bottom;
}
http://codepen.io/amishstripclub/pen/gwNGXw?editors=1100
I have solved using overflow property and sticky footer as below:
.header {
background-color: #bf4b4b ;
top: 0;
border-width: 0.1em;
border-color: #999;
border-style: solid;
width: 100%;
height: 80px;
position: fixed;
right: 0;
left: 0;
}
.content {
background-color: #ffffff;
margin-left: 25%;
margin-top: 5%;
width: 46%;
border-width: 0.1em;
border-color: #999;
border-style: solid;
border-radius: 25px;
padding: 20px;
overflow:auto;
min-height: 100%;
height: auto !important;
height: 100%;
}
.footer {
background-color: #243b82 ;
width: 100%;
height: 80px;
border-width: 0.1em;
border-color: #999;
border-style: solid;
color:white;
text-align: center;
}
For some reason I can't align my divs next to each other. "Right" goes under "left"
What is wrong with my code?
HTML:
<div id="activity-container">
<div id="activity-left">left</div>
<div id="activity-right">right</div>
</div>
CSS:
#activity-container
{
width:90%;
background-color:#FFFF00;
Height:400px;
margin-left: auto;
margin-right: auto;
}
#activity-left {
border: 1px solid black;
color:#000;
margin: 0 auto;
width: 20%;
float: left;
position: relative;
}
#activity-right {
border: 1px solid black;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}
Live demo: Tinkerbin
Your borders on the div-s adding 2px to their width. Remove them and they will be next to each other - jsFiddle
If you really need the borders, then mimic them with outline - jsFiddle
#activity-left {
outline: 1px solid #000;
color:#000;
margin: 0 auto;
width: 20%;
float: left;
position: relative;
}
#activity-right {
outline: 1px solid #000;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}
You only need to remove float and margin properties from CSS
#activity-right
{
border: 1px solid black;
color: #000;
width: 80%;
position: relative;
}
Than it will work as per your expectation.
If you want to retain the border, you can try changing the width:
#activity-container
{
width:90%;
background-color:#FFFF00;
Height:400px;
margin-left: auto;
margin-right: auto;
}
#activity-left {
border: 1px solid black;
color:#000;
margin: 0 auto;
width: 19%;
float: left;
position: relative;
}
#activity-right {
border: 1px solid black;
margin: 0 auto;
color:#000;
width: 80%;
float: left;
position: relative;
}
Check Jsfiddle