I want the green div to be below the blue div instead of on top of it without changing either of their position values and using pure css only.
http://jsfiddle.net/LpjgLydv/40/
Is this possible?
Assumptions:
I may use inline css only
This is for a footer that needs to stay at the bottom regardless of how much content is on the page
Any other element on the page besides the footer (and html,head,body) may or may not exist at any given time
The footer is nested in <body> and cannot be placed anywhere else
I figured it out. Basically I had to add a relative position and a min-height to the html attribute as well as a margin-bottom to the body attribute:
http://jsfiddle.net/LpjgLydv/44/
html
<html>
<head>
</head>
<body>
<div class="box"></div>
<div class="box2"></div>
</body>
</html>
css
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 250px;
}
.box
{
border: solid 10px blue;
position: relative;
height:900px;
width:380px;
margin-top: 5px;
margin-left: 8px;
}
.box2
{
border: solid 10px green;
position: absolute;
bottom:0px;
left:8px;
height: 180px;
width: 380px;
}
It now meets the criteria of all of the assumptions in the question.
You can use this without positioning.
.inner-box
{
border: solid 10px blue;
height:900px;
width:380px;
margin-top: 5px;
float:left;
}
.inner-box2
{
border: solid 10px green;
float:left;
bottom:0px;
height: 180px;
width: 380px;
clear:both;
}
Related
I've got a div within a div, both are percentage based for the page but the nested div overlaps slightly to the right.
I'm actually trying to get the white box sit inside the first light blue div with a small margin on all sides so you can see a bit of the darker backround color, making it stand out more.
Editing to point out that the point of the position:fixed is to make the white box move as you scroll.
A solution was posted that involved chaning the position to relative, although this obviously stops the box from moving.
JSFiddle
div {
border-radius: 5px;
}
#header {
height: 50px;
background-color: #F38630;
margin-bottom: 10px;
}
.left {
height: 1300px;
width: 25%;
background-color: #A7DBD8;
float: left;
margin-bottom: 10px;
}
.right {
height: 1300px;
width: 75%;
background-color: #E0E4CC;
float: right;
margin-bottom: 10px;
}
#footer {
height: 50px;
background-color: #69D2E7;
clear: both;
}
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
<html>
<head>
<title>Result</title>
</head>
<body>
<div id="header"></div>
<div class="left"><div id="fixedleft"></div></div>
<div class="right"></div>
<div id="footer"></div>
</body>
</html>
Your margin is increasing with the width.
Try:
#fixedleft {
height: 50px;
width: calc(25% - 2px);
background-color: #FFFFFF;
position: fixed;
margin: 1px;
}
I guess that this issue is due to default body margin as it doesn't affect the width of your fixed div(as you can see in the example, it's width is always the same, no matter what margin value you set, unlike it's container's width) :
body { margin:0; }
There is still a problem with the inner margin (1px) that pushes it out of the container, you can use calc for it, here is an example:
JSFiddle
#fixedleft {
background-color: #ffffff;
height: 50px;
margin: 2px;
position: relative;
width: 98%;
}
Please try this instear of
#fixedleft {
height: 50px;
width: 25%;
background-color: #FFFFFF;
position: fixed;
margin: 1px 1px 1px 1px;
}
if you load jQuery..
$(window).bind("resize", function(){
$("#fixedleft").width( parseInt($(".left").width()) -2)
})
$(function(){$(window).resize()})
I'm trying to insert a text with the upper side of a box using CSS, but I can't come up with anything to make it happen. this is my code so far:
.boxed{
border: 1px solid grey;
width: 300px;
height: 180px;
}
and this is what I want to do:
how do i insert a text in the upper border of a box?
*im already done with this thanks guys. but my problem now is putting pagination on tabs. can u help me? the rest of the code is in here:
http://jsfiddle.net/3y539gvq/
Set your box to relative positioning and position the label using absolute positioning. Also, I'd recommend setting the background of your container, and inheriting the background in the label CSS to keep the two consistent.
.boxed {
position: relative;
background: white;
border: 1px solid grey;
width: 300px;
height: 180px;
}
.label {
background: inherit;
padding: 0 5px;
position: absolute;
left: 5px;
top: -10px;
}
<div class="boxed">
<span class="label">General Information</span>
</div>
DEMO: http://jsfiddle.net/b7a29fsd/1/
You can use:
.boxed {
... your existing styles ...
position:relative;
}
.boxed:after {
position:absolute;
top:-5px;
left:15px;
padding:3px;
content: "your label text";
background-color: (something to cover up the border underneath)
}
You can put a text within the div you have like so:
<div>
<p> Some text </p>
</div>
CSS:
.boxed{
border: 1px solid grey;
width: 300px;
height: 180px;
position:absolute;
}
.boxed p{
position:relative;
top:-28px;
left:5px;
z-index:1;
background-color:white;
width:80px;
}
}
Example here.
In the following code, I'd like the #nav div to overlap the #content div. Even though #nav has a higher z-Index value, it is still being overlapped by #content.
FIDDLE: http://jsfiddle.net/Zfcba/
HTML:
<div id="page">
<div id="nav"></div>
<div id="content"></div>
</div>
CSS:
#page
{
margin: 20px 0px;
padding: 10px;
display: block;
width: 70%;
height: 200px;
border: 1px solid gray;
}
#nav
{
float: left;
width: 40px;
height: inherit;
border: 1px solid red;
z-index: 999;
}
#content
{
float: left;
margin-left: -20px;
width: 200px;
height: inherit;
border: 1px solid blue;
background: lightgray;
z-index: 0;
}
Pretty simple code, but I can't understand what I'm doing wrong. Any help would be appreciated.
Note: I tried the same without the outer div (http://jsfiddle.net/Zfcba/1). Still the same problem. :(
Add this to your css
#above{position:absolute;}
z-index only works for absolute positioned elements. As the browser ignores the value for z-index, it will then render it in the order the elements are in your html-code. As #content is later in your code than #nav, #content will be displayed over #nav.
I have the following html:
<!DOCTYPE html>
<html>
<head>
<title>JBA</title>
<style type="text/css">
body {
margin:0;
padding:0;
}
#layout {
float: left;
}
#title {
padding: 10px;
border: 1px solid #ccc;
position: relative;
}
#content {
position: absolute;
top: 26px;
left: 0;
right: 0;
bottom: 0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="layout">
<label id="title">Below is content:</label>
<div id="content">
</div>
</div>
</body>
<script>
</script>
</html>
What I need is to position #content div right below the #title label. However, float and position settings shouldn't be changed. So, how to calculate #content's top? 26px seems to work for Chrome but, for IE it needs to be 28px. Why?
give position relative to the "#layout" div
#layout {
float: left;
position:relative;
}
I have tested it in chromium as well as IE9. For both position top: 28 is working properly. Screenshot is attached.
Are you expecting something like this LINK
some changes in your CSS :
body {
margin:0;
padding:0;
}
#layout {
float: left;
}
#title {
padding: 5px;
border: 1px solid #ccc;
float:left;
}
#content {
clear:both;
width:400px;
height:400px;
border: 1px solid #ccc;
}
You should set padding and margin to 0 on #content since browsers render this differently (Even though it´s not set).
I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout.
HTML:
body
div#col-1
div#col-2
div#col-3
CSS:
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
Would this work/better way to do it?
This is pretty simple.
here is the code
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>
I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.
here is an example with a footer
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>
Voila! You've got your liquid layout.
check this out:
http://siteroller.net/articles/3-column-no-tables-no-floats
But no,I don't think that would work. There are plenty of links in said article though to address your issue.
And if there is any interest, I will extend what is written there.
Okay, got it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "page":
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
Then, you can also add the style for the "page":
#page {
min-width: 600px;
}
This way, if the user shrinks their browser down to a very small size, the content still looks good.