As I mentioned in title. I have 3 divs and I want div2 in front of div1 but behind div3. I'm using CSS / CSS3. Any suggestions would be appreciated!
You can achieve it by making use of a CSS ptoperty called z-index.
You would need to define your classes for div1, div2 and div3 as follows:
#div1 {
background-color: Orange;
margin-top:100px;
margin-left: 100px;
}
#div2 {
background-color: Red;
margin-top:50px;
margin-left: 50px;
z-index: 1;
}
#div3 {
background-color: Yellow;
z-index:2;
}
You can take a look at a sample here: http://jsfiddle.net/h7fx8/1/
EDIT:
If there's no div2 and only a shadow of div3 then it could work this way: http://jsfiddle.net/h7fx8/2/
z-index is your best bet but is not supported by some older versions of browsers, namely ie. you can achieve the same result if you have
<div>
</div>
<div>
</div>
<div>
</div>
If you have divs that can be inside of one another, another option would be
<div>
Content
<div>
Content
<div>
Content
</div>
</div>
</div>
Related
I have a fixed-width left div, and I want to make the right div fill the remaining space.
So far I've been taking this approach recommended by another SO poster, but it doesn't work if I have content inside the right div.
The content in the right div is set to width: 100%, so I would expect it to be no wider than the right-hand div, but it overflows the right div.
<div>
<div id="left">left</div>
<div id="right">right<div id="insideright">overflows</div</div>
</div>
<style>
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
width: 100%;
background-color:#00FF00;
}
#insideright {
width: 100%;
background-color: blue;
height: 5px;
}
</style>
JSFiddle here, demoing the problem: http://jsfiddle.net/MHeqG/155/
What can I do?
I want to support older IE browsers, so I'd rather not use display: table-cell etc if I can avoid it, or at least not without a reasonable fallback.
Actually it's pretty simple... don't add 100% to the right div :)
just add the overflow property
LIVE DEMO
#left {
float:left;
width:180px;
background-color:#ff0000;
}
#right {
overflow:auto;
background-color:#00FF00;
}
#insideright {
background-color: blue;
}
...and if you even wondered how to make the red (left) div fill the remaining height...
DEMO
Not sure exactly what you're trying to do (your references to right are ambiguous). But if I'm understanding, you want the insideright to be nested within the right without overflowing?
Why not use a <span> instead? <div> out of the box is display: block; which will force a wrap like that. Alternatively, override this behavior by using display: inline; or display: inline-block;.
<div>
<div id="left">
left
</div>
<div id="right">
right
<span id="insideright">this should not overflow right</span>
</div>
</div>
http://jsfiddle.net/brandonscript/MHeqG/157/
I'm trying to achieve, that the div's will behave like an example on picture, using css:
Is there any clean way to do this? I achieve this using javascript to calculate "left" div height and "main" div width and height. But i dont like this solution...is there any way to do this using css only?
Edit:
Page must not have scrollbar...so page's height is always max 100%, and no more...
thanks
If the sidebar (or any other div) is 100% height, and on top you have a 30px header, so that causes your container to be 100% + 30px height.
In the future you will have in css3 calc():
http://hacks.mozilla.org/2010/06/css3-calc/
This will solve your problem.
But for now you can add overflow: hidden; to the html and body section, but I recommend calculate the height of the sidebar ( container height - header height) using Javascript.
Check fiddle here
If you mean the two-column layout, you do it with pure CSS like this:
.container {
background-color: #aaaaaa;
}
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
background-color: #888888;
}
and HTML:
<div class="container">
<div class="left">left</div>
<div class="right">right</div>
</div>
Live demo: jsFiddle
The div on top can be achieved without any special CSS. To place something below (a footer for example), you'll need to use clear: both.
Without any code it is hard to determine what you want. Here is a extremely simple version of what I believe you want.
HTML:
<div id="header">
</div>
<div id="side">
</div>
<div id="content">
</div>
CSS:
#header {
width:100%;
height:50px;
}
#side {
width:300px;
height:100%;
float:left;
}
#content {
width:660px;
height:100%;
float:left;
}
jsFiddle
I want to create a <div> element with background color, which starts in the middle of the screen and goes to the right, to the end of the page (out of screen) , but I don´t want to trigger any scroll bar. In that <div> I want to have some information, at the beginning of that <div>(within the screen). Here´s the HTML code example:
<div id="footer">
<h2>Information</h2>
<p>Some text</p>
<p class="alignright">Another information in this paragraph.</p>
</div>
This is how I want it to look like:
http://postimage.org/image/h60apjfjf/
CSS will let you do this easily. Something like the following:
#footer {
background-color: #b0c4de;
width: 50%;
height: 20px;
float: right;
}
This is a pretty good resource: http://www.w3schools.com/css/default.asp
Can´t you just use css background-image of the body to achieve that effect?
You can do this by wrapping the footer div in another div. This will not only allow you to fully position the footer div but it will also allow you to put the footer div outside without generating a scrollbar or showing the overflow.
For example:
<div id="footer-wrapper">
<div id="footer">
<h2>Information</h2>
<p>Some text</p>
<p class="alignright">Another information in this paragraph.</p>
</div>
</div>
#footer-wrapper { width:300px; height:100px; position:relative; overflow:hidden; }
#footer { position:absolute: top:50px; left:50%; width:300px; }
etc.
The position:relative means that the footer div, with position:absolute, will use the wrapper as the position reference. Overflow:hidden will prevent scroll bars and will hide the overflow.
You can do something like that :
#footer {
float: right;
width: 50%;
background-color: blue;
overflow: hidden;
}
The overflow hidden isn't necessary but in case a scrollbar appears, with this it won't.
EDIT: example: http://jsfiddle.net/8nu68/
So i need to make a div a link, and have the background colour change when hoverng over this div with the mouse. The problem is, this div has two child divs inside it and when i move the mouse in to the bounds pf the parent div it is actually on a child div. So while i can make it so that one of these child divs changes on hover the second one does not.
So i guess my question is, is there a way to make both child divs change when hovering one using css?
I dont mind changing code to use tables if thats easier but I need to find some way to make the entire div / tr change when hovering on one child / td.
What im actually looking to create here is something almost the same as th youtube recommended videos boxes (on teh right of the page)
Thanks in advance
CSS
#parent {
width: 318px;
height: 90px;
background-color: #FFFFFF;
margin: 5px 0px 5px 0px;
font-size: 10px;
}
#parent :hover {
background-color: #0000ff;
}
#child1 {
width:120px;
float:left;
}
child2 {
width:188px;
float:right;
}
HTML (with some other stuff)
<c:forEach var="item" items="${list}">
<a href="webpage?item.getinfo()">
<div id="parent">
<div id="child1">
<img src="img.jpg">
</div>
<div id="child2">
${item.getinfo2()} <br>
${item.getinfo3()} <br>
</div>
</div>
</a>
</c:forEach>
Code is something like that. Ive been hacking it up for the last while but that was something like what i had before
If the one you're able to hover over is the first, you only need CSS:
.mavehoverable > div:hover, .makehoverable > div:hover + div {
background-color: red;
}
With this HTML:
<div class="makehoverable">
<div>Child 1</div>
<div>Child 2</div>
</div>
Hovering over Child 1 will also highlight Child 2. Vice-versa doesn't work in CSS though, so that would need some JS.
I think you might just need to fix a line of your CSS. Change:
#parent :hover {
background-color: #0000ff;
}
to:
#parent:hover {
background-color: #0000ff;
}
That seemed to work for me.
Have you tried using jQuery? You could do something like this:
http://jsfiddle.net/UtdYY/
Html:
<div class='color'>
<div class='color child'>test123</div>
<div class='color child'>test456</div>
</div>
Javascript:
$('.color').hover(function(){ $(this).toggleClass('red'); });
CSS:
.red { color:red; }
.child {height: 50px; }
Edit: Cleaned up the javascript, thanks elclanrs
Try this http://jsfiddle.net/rsarika/rtGw5/1/
I have a page that I am trying to create with a div on the left containing an iframe and a div in the middle also containing an iframe.
The sidebar is to hold links and the content section is to load said links.
My goal is to get the sidebar expanded all the way down to the bottom of the page as well as the content section.
Here is my css:
html, body {
height:100%;
margin:0px;
padding:0px;
}
#wrapper {
position: relative;
min-height: 100%;
}
#sidebar {
position: relative;
float:left;
width: 150px;
overflow: hidden;
min-height: 100%;
}
#pdfholder {
float: right;
width: 600px;
}
And here is my html:
<body>
<div id="wrapper">
<div id="sidebar">
<iframe id="sidebarframe" name="index" src="./sidebar.html">
</iframe>
</div>
<div id="pdfholder">
<iframe id="pdfholderframe" name="viewer" src="./blank.html">
</iframe>
</div>
<div style="clear: both;"></div>
</div>
</body>
I know I am doing something wrong but I have gone through around 10 different websites and I cannot for the life of me find it!
You can give both containing divs a min-height of 100% and there's not much more you need to do:
http://jsfiddle.net/GolezTrol/eHMec/
You can give the iframes a height of 100% too, but it didn't become clear to me whether you need that or not.
From what I can understand from your question, this JSFiddle (simpler version here) should do the trick.
CSS
div
{
background: black;
}
div div
{
margin-left: 150px;
background: white;
}
div ul
{
float: left;
color: white;
}
HTML
<div>
<ul>
<li>Nav bar</li>
<li>More nav</li>
</ul>
<div>
Content
</div>
</div>
Obviously this is a very simple example and you should give your elements classes or IDs if needbe; I wanted to keep it simple.
The principle of this is a float: left, a margin-left: 150px and some background-color properties. You give your container div a background colour of whatever you want the sidebar to be coloured as, and then set the content divs background back to white, or whatever you want that to be.
The float: left for the navbar ul means the main content is pushed back to the top.
The margin-left: 150px gives the navbar 150px on the left of the content to expand into. Obviously you should change this to the width of the navbar.