Why adding of left rule changes behavior so drastically? Is it possible to position relative to default position?
http://jsfiddle.net/suzancioc/drDn3/6/
HTML:
<div class='level0'>
<div class='level1'>
Hello
</div>
<div class='level1'>
Hello
<div id='inner2'>inner2</div>
</div>
<div class='level1'>
Hello
<div id='inner3'>inner3</div>
</div>
</div>
CSS:
.level0 {
height:40px;
width: 500px;
background:red;
}
.level1 {
float:left;
margin:2px;
border-style: solid;
background: cyan;
}
#inner1 {
position: absolute;
background: green;
}
#inner2 {
position: absolute;
background: green;
left:0px;
}
#inner3 {
position: absolute;
background: green;
}
In order to position absolute something you need to assign that div(in your case) to a relative positioned parent
.level1 {
float:left;
margin:2px;
border-style: solid;
background: cyan;
position:relative;
}
Adding position:relative makes .level1 a sort of coordinate system for all elements inside of it.
Take a look at this JSFIDDLE
Related
Let's say I have to divs named "A" and "B", respectively.
<div id="A">
<div id="B">
</div>
</div>
div A has a z-index of 1 and has a width and height of 100%.
div B has a z-index of 2 and has a width and height of 50% and a top and left of 25%;
#A{
position:absolute;
width:100%
height:100%;
top:0%;
left:0%;
z-index:1;
background-color:black;
}
#B{
position:absolute;
width:50%;
height:50%;
left:25%;
top:25%;
z-index:2;
background-color:gray
}
If you were to hover over Div A and Div B at the same time, Div A will still register as being hovered over. In this hypothetical scenario, whenever I hover over Div A, I want Div A to turn Red and Div B to turn Gray, and whenever I hover over Div B, I want Div B to be Blue and Div A to be Black. How can I do this? I would prefer a CSS answer if there is one available.
I would think using #A:not(hover){} would work, but when I tried it, it failed.
Your hypothetical situation already exists in the way that you you want:
Hovering over A turns A red and B gray
Hovering over B turns B blue and A red
#A {
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
z-index: 1;
background-color: black;
}
#A:hover {
background: red;
}
#B {
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
z-index: 2;
background-color: grey;
}
#B:hover {
background: blue;
}
<div id="A">
<div id="B"></div>
</div>
However, if you really do want to stop <div> #A from being hovered over when <div> #B is hovered over, you can make use of a sibling element, as is described in this answer.
Hope this helps! :)
You cannot achieve what you're trying to do with CSS. The hover feature only allows you to change the attributes of that one element. I would recommend using JQuery.
$(document).ready(function(){
$("#A").hover(function(){
$("#A").css("background-color", "red");
$("#B").css("background-color", "gray");
});
/* Continue writing other hover functions */
});
JQuery allows you to style multiple elements given an action
You can't with pure css, you must help of jquery :
Part of Css:
#A:hover {
background-color: red;
}
#B:hover {
background-color: blue;
}
Part of jQuery:
$('#B').hover(function(){
$('#A').css('background-color','black');
},function(){
$('#A').css('background-color','red');
})
$(document).ready(function(){
$('#B').hover(function(){
$('#A').css('background-color','black');
},function(){
$('#A').css('background-color','red');
})
})
#A {
position:absolute;
width:100%;
height:100%;
top:0%;
left:0%;
z-index:1;
background-color:black;
border: 1px solid;
}
#B {
position:absolute;
width:50%;
height:50%;
left:25%;
top:25%;
z-index:2;
border: 1px solid;
background-color: gray;
}
#A:hover {
background-color: red;
}
#B:hover {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="A">
<div id="B">
</div>
</div>
I found a pure css way using the link from Obsidian Age's answer:
<div id="ContainerDiv">
<div id="A"></div>
<div id="B"></div>
</div>
http://jsfiddle.net/k3Zdt/248/
All I had to do was take Div B out of Div A and remove the z-indexes.
How do I get the child div which is inside the parent div, go on the first line of the div?
See the picture for what I mean:
div
{
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
}
.parentDiv
{
position: relative;
/*...*/
}
.childDiv
{
position: absolute;
/*...*/
}
Basicly that's the CSS. Read more
like this?
#parent {
background-color: #aaaaaa;
height:300px;
}
#child {
background-color: #ff0000;
width:220px;
margin-left:10px;
}
#two {
background-color: #00ff00;
width:100px;
}
.kids {
display: inline-block;
padding: 2px;
white-space: normal;
}
<div id="parent" style="width: 250px; display: inline-block; white-space: nowrap">
<div id="child" class="kids">
<span>child</span>
</div>
</div>
IF you want to look like in your img just do this :
.parent {
height:300px;
width:300px;
background-color:orange;
}
.child {
height:50px;
width:80%;
background-color:green;
margin:0 auto;
}
<div class="parent">
<div class="child">
</div>
</div>
i am VERY curious to see why the downvote ? anyone ?
I want to achieve this positioning using CSS :
But the best I obtain after days of tries is this :
Can you help me to achieve that positioning, taking into account :
the red comments in the "try" picture (see JSFiddle below) indicating some major constraints
that the positioning should work on IE8+, FF10+, Chrome, Opera, Safari (using CSSPie and selectivizr for IE8 compatibility)
Here is the JSFiddle and the code :
HTML
<body>body (all divs may have some padding, some margin and some border. All divs adjust their height to their content.)
<div id="globalcontainer"><span class="important">#globalcontainer (fixed width, not really centered into body : see center)</span>
<div id="header">#header (100%)</div>
<div id="middle">#middle (100%)
<div id="left">
<span class="important">#left (on the left of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content > min-width. <br>
<br>
If left+right+center min-width > global container width, then still adjusts its size to its content and goes outside globalcontainer limits.<br>
<br>
Inner divs have variable (and unknown) width, sticked to the right)</span>
<br>
<DIV class="bloc" style="width:300px;">bloc</div>
<DIV class="bloc" style="width:50px;">bloc</div>
<DIV class="bloc" style="width:500px;">bloc</div>
</div>
<div id="center"><span class="important">#center (width adjusted to globalcontainer size - left size - right size, with a fixed min-width.<br>
<br>
Stays centered on the screen whatever the left or right size are<br>
--> if left or right divs are not present in the HTML (or present with display:none), center div stays on the center of the screen)</span>
<div id="center-middlerow">#center-middlerow (100%)
<div id="pageReceiver">#pageReceiver (100%)
<div id="page">#page (100%)<br>
<div id="pageHeader">#pageHeader (100%)</div>
<div id="pageContent">#pageContent (100%)</div>
</div>
<div id="tip" style="display: block;">#tip (under page)</div>
</div>
<div style="text-align:center" id="center-bottomrow">#center-bottomrow (100%)</div>
</div>
<div id="right"><span class="important">#right (on the right of content, with a fixed min-width.<br>
<br>
Width adjusted to content if content > min-width. <br>
<br>
If left+right+center min-width > global container width, then still adjusts its size to its content and goes outside globalcontainer limits.<br>
<br>
Inner divs have variable (and unknown) width, sticked to the right )</span>
<br>
<DIV class="bloc" style="width:30px;">bloc</div>
<DIV class="bloc" style="width:60px;">bloc</div>
<DIV class="bloc" style="width:90px;">bloc</div>
</div>
</div>
</div>
<div id="footer">#footer (100%)</div>
</div>
</body>
CSS
* {
font-family:Arial;
font-size:11px;
border:1px solid black;
padding:10px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
background-color:rgba(125,125,125,0.1);
}
span {
border:0px;
padding:0px;
background-color:transparent;
}
span.important {
color:red;
font-weight:bold;
}
html {
border:0px;
padding:0px;
background-color:white;
}
/* Real CSS starting here */
BODY {
padding:20px;
padding-bottom:0px;
}
#globalcontainer, #left, #center, #right , #header, #footer {
margin:auto;
background-color:transparent;
display:table;
}
/* ====================================================== */
#globalcontainer {
min-width:1130px;
max-width:1130px;
width:100%;
vertical-align:top;
}
#header {
margin-bottom:10px;
vertical-align:top;
width:100%;
}
#middle {
display: table;
vertical-align:top;
}
#footer {
margin-top:10px;
vertical-align:top;
text-align:center;
width:100%;
}
/* ====================================================== */
#left {
vertical-align:top;
float:left;
padding-right:20px;
}
#center {
vertical-align:top;
display: table-cell;
width:100%;
}
#center-toprow {
padding:10px;
padding-top:0px;
}
#center-middlerow {
}
#center-bottomrow {
padding:5px;
margin-top:30px;
}
#right {
vertical-align:top;
float:right;
padding-left:20px;
}
#left DIV.bloc {
float:right;
white-space:nowrap;
}
#right DIV.bloc {
float:left;
white-space:nowrap;
}
/* ====================================================== */
#pageReceiver {
margin:auto;
width:100%;
}
#page {
cursor:default;
background-color:#F8F8F8;
border:1px solid black;
padding:20px;
width:100%;
position:relative;
min-height:591px;
}
#pageHeader {
margin:auto;
margin-bottom:15px;
display: -moz-inline-stack;
display: inline-block;
*display: inline;
}
#tip {
margin-top:5px;
margin-left:20px;
margin-right:20px;
padding:5px;
background-color:transparent;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
Going with the border-box box model is the right way to go.
Here is a structure I often use : demo
It uses some wrapper divs with position: relative; and custom padding, containing absolutely positioned elements with height: 100%; and overflow :auto;.
It needs tweaking but you'll get the gist.
HTML
<div id="globalcontainer">
<div id="global-wrapper">
<div id="header"></div>
<div id="middle">
<div id="middle-wrapper">
<div id="left">
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
</div>
<div id="center-wrapper">
<div id="center">
<div id="center-middlerow"></div>
<div id="center-bottomrow"></div>
</div>
</div>
<div id="right">
<div class="bloc"></div>
<div class="bloc"></div>
<div class="bloc"></div>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</div>
CSS
*,
*:before,
*:after{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
div{
border: 1px solid black;
padding: 10px;
}
html,
body{
height: 100%;
}
#globalcontainer{
height: 100%;
}
#global-wrapper{
padding: 100px 10px;
position: relative;
border: none;
height: 100%;
}
#header,
#footer{
position: absolute;
width: 100%;
height: 100px;
left: 0;
}
#header{
top: 0;
}
#middle{
height: 100%;
}
#middle-wrapper{
position: relative;
padding: 0px 200px;
border: none;
height: 100%;
}
#left,
#right{
position: absolute;
width: 200px;
height: 100%;
top: 0;
background:#F0F0F0;
overflow: auto;
}
#left{
left: 0;
}
#right{
right: 0;
}
#center{
height: 100%;
}
#center-wrapper{
border: none;
padding: 0px 10px;
height: 100%;
}
.block{
background: #fff;
}
For such a complex layout, along with border-box you also will need to carefully tweak the dimensions for the desired look.
Check this fiddle: http://jsfiddle.net/SXJuT/ (hope it looks like your screenshot)
Full screen: http://jsfiddle.net/SXJuT/embedded/result/
CSS:
html, body { margin:0; padding: 0; height: 100%; width: 100%; overflow: hidden; font-size: 9px; }
div { border: 1px solid blue; box-sizing: border-box; padding: 2px; margin: 4px; }
#globalcontainer { width: 99%; height: 98%; background-color: #deebf7; }
#header { height: 5%; background-color: #d1e4f3; }
#middle { height: 86%; background-color: #d1e4f3; display: table; border-spacing: 4px; width: 99%; }
#footer { height: 5%; background-color: #d1e4f3; }
#left, #center, #right { display: table-cell; background-color: #c4ddf1; }
#left { width: 14%; }
#center { width: 68%; }
#right { width: 14%; }
#center-middlerow { height: 80%; background-color: #bad5eb; }
#center-bottomrow { height: 20%; background-color: #bad5eb; }
#pageReceiver { height: 78%; background-color: #b1d0ec; }
#tip { height: 16%; background-color: #b1d0ec; }
#page { height: 95%; background-color: #a7cbe9; }
#pageHeader { height: 14%; background-color: #2e75b5; }
#pageContent { height: 62%; background-color: #2e75b5; }
#pageFooter { height: 14%; background-color: #2e75b5; }
.bloc { height: 20%; background-color: #2e75b5; }
#left > .bloc:nth-child(1), #right > .bloc:nth-child(1) { width: 50%; }
#left > .bloc:nth-child(2), #right > .bloc:nth-child(2) { width: 70%; }
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
How can I get <div id="green_bar"> to overlap <div id="top_header"> and stop at the left edge of the logo? I'm trying to get the green bar to expand to the left when the screen width is expanded, but I want it to stop at the left edge of the logo.
I've tried position: absolute; on #green_bar but it expands it 100% across the screen.
JSFiddle: http://jsfiddle.net/hfgQt/14/
HTML:
<div id="header_bar"></div><!-- Grey line on top -->
<div id="top_header"><!-- begin top header -->
<div id="green_bar"></div>
<div class="wrap">
<div id="logo">
<a><h1>info</h1></a>
</div>
</div>
</div><!-- end top header -->
CSS
.wrap {
margin:0px auto;
width:960px;
}
#header_bar {
background-color: #424243;
height: 25px;
}
#top_header {
padding:0px 0px;
background-color:#24303d;
background-image:url("http://i.imgur.com/kGjGG.png");
border-bottom:1px solid rgba(0,0,0,.4);
overflow:hidden;
}
#green_bar {
display: block;
height: 10px;
width: 100%;
background-color: green;
}
#logo {
float:left;
clear:both;
}
#logo h1 {
margin:0px;
padding:0px;
background:url(../images/logo.png) no-repeat;
text-indent:-9999px;
width:258px;
height:56px;
}
Try the snippet below.
As I understand your problem, the trick is to get something that is half of (browser width - 960px). That's the amount of the left margin. I used an extra wrapper div to cut out the fixed width (should be 960px, but I changed it to 480px to get it to look OK in jsfiddle). It's position: absolute to get it out of the flow. Then the inner div (#green_bar) simply has width: 50% to cut it down to half the width of both margins put together - the width of the left margin only.
It's hard to understand what you want, so I might have done the wrong thing. Let me know if you need any more help.
header {
padding-bottom:5px;
margin-bottom:35px;
background:#ffdf85;
border-bottom:1px solid #d4d4d4;
background-color:#ffdf85;
}
.wrap {
margin:0px auto;
width:480px;
background: rgba(128, 128, 0, .5);
overflow: hidden;
}
#header_bar {
background-color: #424243;
height: 25px;
}
#top_header {
padding:0px 0px;
background-color:#24303d;
background-image:url("http://i.imgur.com/kGjGG.png") no-repeat;
border-bottom:1px solid rgba(0,0,0,.4);
overflow:hidden;
position: relative;
}
#green_bar_wrapper {
position: absolute;
padding-right: 480px;
left: 0;
right: 0;
top: 0;
}
#green_bar {
width: 50%;
height: 10px;
background-color: green;
}
/* 3.0.0 Logo
----------------------------------------*/
#logo {
float:left;
clear:both;
}
#logo h1 {
margin:0px;
padding:0px;
background:url(http://i.imgur.com/kGjGG.png) no-repeat;
width:258px;
height:56px;
}
#logo h1 span {
text-indent: -9999px;
}
<header><!-- BEGIN HEADER -->
<div id="header_bar"></div><!-- Grey line on top -->
<div id="top_header"><!-- begin top header -->
<div id="green_bar_wrapper"><div id="green_bar"></div></div>
<div class="wrap">
<div id="logo">
<h1><a><span>info</span></a></h1>
</div>
</div>
</div><!-- end top header -->
</header><!-- END HEADER -->