I want to make a box(in a form of div) that could arrange and move around objects in.
But, when I try to make objects to alight to left they pop out of it.
How can I fix this issue?
#slide
{
margin: 100px 100px;
background:green;
height:200px;
width:100px;
overflow: hidden;
clear:both;
}
Try this(replace your class)
Edited found the answer:
just add position:relative;
to #slide in css file
HTMl
<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="slide">
<div id="right">
</div>
<div id="left">
</div>
</div>
</body>
Css
#slide
{
margin: 100px 100px;
background:green;
height:200px;
width:100;
}
#right
{
top:40%;
height:20px;
width:20px;
background:black;
right:0;
position:absolute;
}
#left
{
top:40%;
height:20px;
width:20px;
background:black;
left:0;
position:absolute;
}
Related
I am trying to add a min width to a div that uses a fixed position. I'm not sure if its possible my code below works fine if I remove the fixed positioning.
What I am trying to achieve is to protect the text in the red area (contains links) from being resized below certain 200px;
EDIT THIS IS THE FULL CODE
<!doctype html>
<html>
<head>
<style>
#header{
height:60px;
width:100%;
background-color:#000;
position:fixed;
top:0;
left:0;
}
#leftdiv{
width:15%;
height:200px;
background-color:#ED6062;
float:left;
position:fixed;
left:0;
top:60px;
min-width:100px;
}
#middlediv{
width:25%;
height:200px;
background-color:#F0E92B;
float:left;
position:fixed;
left:15%;
top:60px;
}
#rightdiv{
width:60%;
height:200px;
background-color:#26D978;
float:left;
position:fixed;
left:40%;
top:60px;
}
</style>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div id='header'></div>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</body>
</html>
JSFiddle https://jsfiddle.net/85mpvxo7/
The min-width works as expected, your problem is that #middlediv has left: 15% and is on top of #leftdiv and #leftdiv is actually wider than you can see it behind #middlediv.
I'm not sure if it fullfills all your requirements, but check this, I'm using a div wrapper with grid display so the left grid item has a width with max-content. Then the other two divs need to use the rest of the space so I put them inside another div. https://jsfiddle.net/n3o679pf/
EDIT: It can be cleaner using just a flex on the wrapper https://jsfiddle.net/n3o679pf/2/ so no need for that ugly #therest div I put using a grid.
<div id='header'></div>
<div id='wrapper'>
<div id='leftdiv'>Contains links</div>
<div id='middlediv'></div>
<div id='rightdiv'></div>
</div>
and the CSS
#wrapper {
display: flex;
width: 100%;
position: fixed;
top:60px;
margin: 0;
}
#leftdiv{
height:200px;
background-color:#ED6062;
min-width:200px;
}
#middlediv{
width:35%;
height:200px;
background-color:#F0E92B;
}
#rightdiv{
width:65%;
height:200px;
background-color:#26D978;
}
Can anyone help me?
My code below is not working in responsive mode.
Parent container placement should be at the right side of the screen.
Here's my code
.parent {
position:relative;
width:250px;
border:1px solid red;
height:200px;
}
.child {
position:absolute;
width:100%;
left:-100px;
right:-100px;
border:1px solid blue;
}
<div class="parent">
<div class="child">
<p>Need width 100% by screen resolution</p>
</div>
</div>
Like so:
html,body{
margin:0; padding:0;
}
.main{
width:980px; background:darkGreen; margin:0 auto;
}
.rel{
width:400px; height:200px; background:#000; margin:0 auto; position:relative;
}
.abs{
width:550px; height:100px; background:yellow; position:absolute; left:-75px; top:50px;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
</head>
<body>
<div class='main'>
<div class='rel'><div class='abs'></div></div>
</div>
</body>
</html>
.child {
position:absolute;
width:150%;
border:1px solid blue;
}
You don't need to have left and right values when you have width, unless you want to specify the position.
A left:0; means that the leftmost part of the div is at the leftmost part of its parent div while a right:0; means that the rightmost part of the div is at the rightmost part of its parent div- this could act as a replacement for the width as
left:0;
right:0;
is similar to
left:0;
width:100%;
With this, you could specify a
left:0;
right:-10%;
and it would be equivalent to a
left:0;
width:110%;
P.S. you could also use VW and VH instead of %.
A 100% refers to the full size of the parent while a 100vw refers to the full width of the viewport.
remove position:relative from parent and in your code you forget one semi colon (;) after right property of your .child.it,s important to put a semi colon after every property in css.
html,body{
width:100%;
height:100%;
}
.parent {
/*position:relative;*/
width:250px;
border:1px solid red;
height:200px;
}
.child {
position:absolute;
width:100%;
left:-100px;
right:-100px;
border:1px solid blue;
}
<div class="parent">
<div class="child">
<p>Need width 100% by screen resolution</p>
</div>
</div>
This is my code so far:
html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="home_style.css">
</head>
<body>
<div class="header">
<div class="search_bar">
<input type="text" name="search" value="search">
</div>
</body>
</html>
css:
html,body{
height:100%;
min-height:100%;
width:100%
min-width:100%;
}
.header{
margin-bottom:0;
height:10%;
width:100%;
background-color:#343430;
}
.search_bar input[type="text"]{
position:relative;
left:20%;
top:25%;
width:30%;
background-color:white;
color:grey;
}
How do I make the search bar be positioned further down, i need the search bar to be positioned in the middle of the header not the top. Why is top:25% not working?
Replace position:relative with position:absolute:
html, body {
height:100%;
min-height:100%;
width:100% min-width:100%;
}
.header {
margin-bottom:0;
height:10%;
width:100%;
background-color:#343430;
}
.search_bar input[type="text"] {
position:absolute;
left:20%;
top:25%;
width:30%;
background-color:white;
color:grey;
}
If you look at the definition for relative positioning:
The element is positioned relative to its normal position,
so "left:20" adds 20 pixels to the element's LEFT position
your search bar was really positioning itself.
Demo
I am trying to do a dynamic grid layout with links to other pages, consisting of a picture and a text.
The problem is that I don't seem to find any way of introducing a whitespace (padding/margin) after the grid layout. In other words, The page ends exactly where the main div ends.
Here is the code. Any help is greatly appreciated, as I have tried a lot of methods, and neither one of them worked. Thanks a lot.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" />
</head>
<body>
<div class="header"></div>
<div class="body">
<!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
<a href="" class="categorie">
<img src="imgs/asd.png" class="imagine"/>
<div class="nume"> </div>
</a>
</div>
</body>
</html>
CSS :
html
{
background-color:Grey;
height:auto;
}
body
{
display: table;
padding:20px;
margin: 0 auto;
height:100%;
}
.header
{
background-color:white;
width:700px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:75px;
}
.body, .body>html
{
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
position:absolute;
display:block;
height:auto;
}
.categorie
{
background-color:white;
margin-left:20px;
float:left;
margin-top:20px;
height:180px;
width:150px;
}
.imagine
{
width:150px;
height:150px;
}
.nume
{
background-color:green;
width:150px;
height:30px;
margin-top:-5px;
}
I'm not sure exactly why there was a display: table on the body element, you said:
"Because I use position:absolute in the .body class.. otherwise, the .body will not extend to encapsulate all of the links."
So I was able to remedy both problems by removing both the display: table from the body element and position: absolute from the body class, then added overflow: auto to the body class.
The CSS:
body{
padding:20px;
margin: 0 auto;
height:100%;
}
.body, .body>html {
background-color:black;
width:700px;
margin-top:5px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
padding-bottom:20px;
display:block;
height:auto;
overflow: auto;
}
The JSFiddle:
http://jsfiddle.net/Artsen/VhSdg/
Here is a working fix, in case for some reason, you'd want to keep the body table display.
http://jsbin.com/agucar/2/edit
First change
.body, .body>html
{
position:absolute;
}
to
.body /* removing .body>html didn't change a thing, meaning it was useless */
{
float: left;
}
That way you will be able to clear the floats with a clearfix div (as if correctly relatively positioned) and if you keep your clearfix div transparent, the height you give it will serve as "margin".
Add <div id="clearfix"></div> after <div class="body"></div>, and give the clearfix this CSS:
#clearfix {
height: 20px;
width: 100%;
position: relative;
clear: both;
}
EDIT: Artsen's answer works too, and if you don't need to keep the .body {display: table}, his answer is more suited.
Hello I am trying to vertical and horizontally align 4 divs inside each other with CSS but nothing is working for me.
Please help me! Thanks in advance
My CSS Please note this is just 1 method ive tried I have been sitting here for about 2 hours messing with this and couldnt figure it out.
* {
margin:0px;
padding:0px;
}
body {
background-color:#454545;
}
.wrapper {
margin:auto;
width:960px;
}
.circle-wrapper {
height:918px;
width:918px;
background-image:url(images/overlay.png);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:absolute;
text-align:center;
margin:auto;
}
.outer-inner-background {
background-image:url(images/center-circle.GIF);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
position:relative;
height:494px;
width:494px;
margin:auto;
}
.outer-inner-rings {
background-image:url(images/inner-outer-rings.PNG);
background-size:cover;
background-position:center center;
position:relative;
width:494px;
height:494px;
margin:auto;
}
.inner-image {
position:relative;
height:308px;
width:308px;
margin:auto;
}
My HTML: I don't care if the structure changes it just needs to work
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Untitled Document</title>
</head>
<body>
<div class="wrapper">
<div class="circle-wrapper">
<div class="outer-inner-background">
</div>
<div class="outer-inner-rings">
</div>
<div class="inner-image">
<img class="inner-img" src="images/inside-image.PNG" width="308px" height="308px">
</div>
</div>
</div>
</body>
</html>
here my try http://dabblet.com/gist/4013306
code:
css
div {overflow:hidden}
#first {
background:red;
width:400px;
height:400px;
border-radius:300px;}
#second {
background:grey;
height:95%;
width:95%;
border-radius:300px;
margin:2.5%}
#third {
background:green;
height:70%;
width:70%;
border-radius:200px;
margin:15%;}
#forth {
background:black;
height:95%;
width:95%;
border-radius:200px;
margin:2.5%;}
html
<div id="first">
<div id="second">
<div id="third">
<div id="forth"></div>
</div>
</div>
</div>
Try using position: relative; on the container, and position: absolute; on the circles with suitable left and top values to place them in the middle.
Well, you can use absolute positioning in your inner divs where left and top positions are always set to (Parent element width - child element width /2). Here's my code
html
<div id="red">
<div id="grey">
<div id="green">
<div id="black">
</div>
</div>
</div>
</div>
CSS
div
{
border-radius:100%;
}
#red
{
position:relative;
margin-left:auto;
margin-right:auto; /** centers #red on screen **/
background-color: #F00;
width:400px;
height:400px;
}
#grey
{
background-color:#CCC;
position:absolute;
top:20px;
left:20px;
width:360px; /** 400 - 360 = 40/2 = 20px for left and top **/
height:360px;
}
#green
{
background-color:#0E0;
position:absolute;
top:40px;
left:40px;
width:280px;
height:280px;
}
#black
{
background-color:#000;
position:absolute;
left:20px;
top:20px;
width:240px;
height:240px;
}
Here's the fiddle:
http://jsfiddle.net/brunovieira/pmN4z/
Fiddle with #red centered on screen:
http://jsfiddle.net/brunovieira/pmN4z/2/
Does it need to be 4 divs? try this:
http://jsfiddle.net/vSyWZ/2/
HTML
<div class="outer">
<div class="inner"><div>
</div>
CSS
div{position:relative; margin:0 auto;}
.outer{width: 350px; height: 350px; background-color: gray; border-radius: 100%; border:10px solid red; vertical-align: middle;}
.inner{width: 200px; height: 200px; background-color: black; border-radius: 100%; border:10px solid green; top:60px;}
I tested on Chrome and Firefox and works fine, IE doesn't have support for rounded corners but it is centered.