This is margin range from chrome:
body {
margin: 0px;
padding: 20px;
}
.article {
background-color: #eee;
padding: 20px;
border: 2px solid #999;
overflow: hidden;
}
.left {
position: absolute;
top: 40px;
left: 40px;
width: 160px;
padding: 20px;
border: 2px solid #999;
background-color: #fff;
}
.right {
position: absolute;
top: 40px;
right: 40px;
padding: 20px;
width: 80px;
background-color: #fff;
border: 2px solid #999;
}
.middle {
position: absolute;
margin-left: 220px;
margin-right: 180px;
background-color: #fff;
border: 2px solid #999;
padding: 20px;
word-break: break-all;
}
img {
width: 80px;
}
<div class="article">
<div class="left">sldkfjlsj</div>
<div class="middle">lksdflmsddssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslksmflmsgmfmg;df;g,df;gl,f;,gd;fl,g;fl,g;ldf,;gldf;mgkdfgdfmgpfmgpsomgpsmgpspgmspmgosmgmspgomsgmspgmspgomspgmpsogflmsldfmsldmflsfm</div>
<div class="right"><img src="glm.jpg"></div>
</div>
Begin I think the reason is the width of father tag is not solid. I try it, but no effect. And then I try set relative to father tag and the margin-right is begin from body, also not symmetry.
You are mixing and matching.
for absolute positioning what matters is left, top, right, bottom, width and height.
But my guess is that you don't need it.
What you are trying to achieve is a column of text in the middle of .article with some sides.
You will almost achieve it if you drop the absolute positioning of .middle.
then the margins on it will start where you want. And you'll be left with figuring out the offsets.
body {margin: 0px; padding:20px; position:relative;}
.article { background-color: #eee; padding:20px; border:2px solid #999; overflow: hidden;}
.left {position: absolute; top:40px; left:40px; width:160px; padding:20px; border: 2px solid #999; background-color: #fff;}
.right {position: absolute; top: 40px; right: 40px; padding: 20px; width: 80px; background-color: #fff; border: 2px solid #999;}
.middle { margin-left: 220px; margin-right: 180px; background-color: #fff; border: 2px solid #999; padding:20px; word-break: break-all;}
img {width:80px;}
<div class = "article">
<div class = "left">sldkfjlsj</div>
<div class = "middle">lksdflmsddssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssslksmflmsgmfmg;df;g,df;gl,f;,gd;fl,g;fl,g;ldf,;gldf;mgkdfgdfmgpfmgpsomgpsmgpspgmspmgosmgmspgomsgmspgmspgomspgmpsogflmsldfmsldmflsfm</div>
<div class="right"><img src="http://lorempixel.com/output/people-h-c-80-120-10.jpg"></div>
</div>
A good article about css positioning
Related
I'm having trouble making the below layout look the same across all browsers:
.wrapper {
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -20px;
right: 10px;
}
<fieldset class="wrapper">
<legend>Legendary!</legend>
<div class="icon">icon</div>
</fieldset>
The problem is that when the legend element is present, the div.icon is pulled few pixels down on firefox, and a few pixels up on chrome. When I remove the legend element, it's working fine, but I can't do that. Any ideas on how to make it look the same everywhere?
here you have a working UPDATED :jsfiddle tested in chrome and firefox.
You don't need to work with position:absolute; you can just float:right; your div and give margin-top:-40px; or whatever value you want.
#wrapper{
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
#icon{
float:right;
background-color:#fff;
width:40px;
height:40px;
border:1px solid black;
margin-top:-20px;
margin-right:20px
}
legend#title {
margin-left: 20px;
float: left;
padding-left: 10px;
margin-top: -10px;
background: #f3f5f6;
width: 74px;
}
.icon {
float: right;
margin-top: -30px;
width: 40px;
height: 40px;
border: 1px solid black;
background-color: white;
}
tested on chrome as well as mozilla.
Try giving top value in percentage %.
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -2.5%;
right: 10px;
}
Fiddle here: https://jsfiddle.net/37y8023g/
Use line-height for .icon
CSS:
.wrapper {
margin-top: 100px;
position: relative;
height: 400px;
width: 400px;
border: 1px solid black;
}
.icon {
position: absolute;
width: 40;
height: 40px;
border: 1px solid black;
background-color: white;
top: -20px;
right: 10px;
line-height: 40px;
}
Working example: https://jsfiddle.net/qjqv43y4/1/
I want to create a 2 column liquid layout with a nav bar on the left side that should have a height of 100%, a header that should have a width of 100% and a content section that should have a height and width of 100% as well, and there should be a margin on all sides of 10 or 20 pixels, and also in between the header, nav and content boxes. Here is my fiddle:
https://jsfiddle.net/d2Lnq6sd/1/
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
Now as you can see the nav bar is not 100% in height and the content section is too wide. My final result should look like this:
http://imageshack.com/a/img921/9425/UYp8Ah.png
Tried finding help on google on this issue but I still don't get what I should use, relative or absolute positions and which to use for which attribute. any pointers?
You're good to go: http://codepen.io/8odoros/pen/vKxVYv?editors=1100
nav bar is 100% in height
the content section is not too
wide
html, body {
height:calc(100% - 60px);
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
height:100%;
box-sizing:border-box;
}
header {
float:left;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
box-sizing:border-box;
}
nav {
float:left;
margin-top:20px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
box-sizing:border-box;
}
section {
float:right;
margin-top:20px;
height:100%;
padding: 10px;
width:calc(100% - 220px);
background-color: green;
border: 1px solid black;
box-sizing:border-box;
}
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>
Try this code and see demo:
CSS:
body {
color: #fff;
font-family: verdana;
}
header {
background-color: red;
border: 1px solid black;
height: 75px;
width: 100%;
}
nav {
background-color: blue;
border: 1px solid black;
float: left;
margin: 2% 0;
min-height: 300px;
padding: 10px;
width: 20%;
height: 100%;
}
section {
background-color: green;
border: 1px solid black;
float: right;
position: absolute;
right: 10px;
top: 100px;
width: 75%;
}
See Fiddle Demo
Alright so I changed a few things:
https://jsfiddle.net/d2Lnq6sd/9/
body,html {
height:100%;
}
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
width: 73%;
float: left;
height:auto;
}
header {
position: relative;
height: 75px;
width: 100%;
background-color: red;
border: 1px solid black;
}
aside {
float:left;
width:20%;
margin-top:15px;
margin-left:5px;
height: 100%;
background-color: blue;
border: 1px solid black;
}
section {
width: 100%;
background-color: green;
border: 1px solid black;
}
I have moved your navigation into an aside tag, this is just HTML 5 syntax Link
By using floats and keeping the positions as they were you are able to create the desired effect. To get the width to 100% I would recommend playing with the padding and margins to get it to a 20% + 80% ratio.
Hope this helps :)
Do you need like this ,
Html:
<div class="container">
<header>
This is the header
</header>
<nav>
This is the nav
</nav>
<section>
This is the main section
</section>
</div>
Css:
body {
font-family: verdana;
color: #fff;
}
.container {
position: relative;
margin: 10px;
padding: 10px;
}
header {
position: relative;
height: 75px;
width:675px;
background-color: red;
border: 1px solid black;
}
nav {
position: relative;
top: 20px;
left: 0px;
height: 300px;
bottom:200px;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
}
section {
position: absolute;
top: 110px;
left: 240px;
width: 100%;
background-color: green;
border: 1px solid black;
}
you can see the link:https://jsfiddle.net/d2Lnq6sd/11/
You can position nav as fixed, use below to get an idea.
nav {
position: fixed;
top: 20px;
left: 0px;
height: 100%;
width: 200px;
padding: 10px;
background-color: blue;
border: 1px solid black;
margin-top: 76px;
}
I want the border div to be "hidden" behind the circle and not cross through it. I thought z-index was the way to do things like this.
Any ideas?
JSFIDDLE: http://jsfiddle.net/qs5xmege/1/
CSS and HTML
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Give .circle a position:relative, z-index works only with position:relative, position:absolute or position: fixed
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
width:22px;
height:22px;
border-radius:11px;
border: 3px solid red;
background-color: #FFF;
margin: 30px auto 0 auto;
position: relative;
z-index: 100;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Add position:relative; to .circle.
z-index need relative, absolute or fixed vaue for position.
Set position:relative of div circle and z-index:2 ie. 1 more than border is enough
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
Snippet
.container {
width: 15%;
height: 100px;
float: left;
position: relative;
}
.circle {
background-color: #FFFFFF;
border: 3px solid #FF0000;
border-radius: 11px;
height: 22px;
margin: 30px auto 0;
position: relative;
width: 22px;
z-index: 2;
}
.border {
width: 50%;
height: 100px;
position: absolute;
border-right: thin solid black;
top: 0;
left: 0;
z-index: 1;
}
<div class="container">
<div class="border"></div>
<div class="circle"></div>
</div>
Try like this:
.circle {
background-color: #fff;
border: 3px solid red;
border-radius: 11px;
display: block;
height: 22px;
margin: 0 auto;
position: relative;
top: -68px;
width: 22px;
}
.border {
border-right: thin solid black;
height: 100px;
width: 50%;
}
I'm trying to make a link stick to the bottom center of a div and have it be centered.
So far I've come up with this:
http://jsfiddle.net/r494Lx0r/2/
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
border: solid 1px black;
}
Now how do I make it so that it's centered? I've tried adding text-align:center; and margin:0 auto; to the container but neither of those do anything.
Does anyone know how to do this?
UPDATE add text-algin: center to the parent to center the anchor and set border: solid 1px black; to your anchor:
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
right: 0;
left: 0;
text-align: center;
}
a{border: solid 1px black;}
<div class="container">
<div class="text">
Google.com
</div>
</div>
Add Width: 100% and text-align: center
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
text-align: center;
width:100%;
border: solid 1px black;
}
<div class="container">
<div class="text">
Google.com
</div>
</div>
or left: 0;, right: 0; and text-align: center;
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red;
}
div.container div.text {
position: absolute;
bottom: 0px;
left: 0;
right: 0;
text-align: center;
border: solid 1px black;
}
<div class="container">
<div class="text">
Google.com
</div>
</div>
or you can combine `margin-left: 50%;` and `transform: translate(-50%)`
div.container {
position: relative;
height: 110px;
width: 120px;
border: dashed 1px red
}
div.container div.text {
position: absolute;
bottom: 0px;
border: solid 1px black;
margin-left: 50%;
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
transform: translate(-50%)
}
<div class="container">
<div class="text">
Google.com
</div>
</div>
display:block;
margin:auto;
makes elements centered. So you could edit your code to become:
div.container div.text {
bottom: 0px;
border: solid 1px black;
display:block;
margin:auto;
}
.text{ width: 100%; text-align: auto; }
The text wrapping div will then be as wide as its container, so text align will work as expected. The reason text-align isn't working for you on your current code is because the "text" div is only as wide as the link, therefore centering its contents does nothing.
PROVIDED the link is the bottom/last element in the div-
add this to the div:
text-align: center; //centers the text
and then set the link to:
margin-top: auto; // pushes the text down to the bottom
worked in my case.
Simple and quick, but only works provided your link is the last element in the div.
I need the div "child2" to keep a small distance from child1 which contains dynamic data , and also currently the data in child1 is being overflowed,i don't get it
<div id="parent">
<div id="child1">
<br/>
<div id="child2">
</div
with the style of these div's being as described below
#child2
{
width: 300px;
left: 550px;
position: relative;
color: #27CCFF;
z-index: 0;
border: thin solid #CDCDCD;
top: auto;
}
#parent {
position: relative;
width: 924px;
-webkit-box-shadow: 3px 3px 30px #E4E4E4;
-moz-box-shadow: 3px 3px 30px #E4E4E4;
box-shadow: 3px 3px 30px #E4E4E4;
background-color: #E4E4E4;
left: 192px;
height: auto;
}
#child2 {
top: 0px;
width: 800px;
color: #333333;
font-size: 14px;
font-family: Arial;
left: 50px;
position: relative;
float: left;
}
You could use : margin to do this ,
If margin does not work you could use padding
#child2 {
top: 0px;
width: 800px;
color: #333333;
font-size: 14px;
font-family: Arial;
left: 50px;
position: relative;
float: left;
margin-top: ...;
OR padding-top: ...;
}