I'm trying to get the 100 % height work but at some point the text flows over the divs. (Site url: http://uusilegenda.net/)
Here is the wrapper css:
#wrapper {
box-shadow: 0px 0px 20px #666;
background-color: #ddd;
margin:0 auto;
width: 1000px;
border-left: 2px solid #666;
border-right: 2px solid #666;
height:auto !important;
height:100%;
min-height:100%;
position:relative;
And here is the css of the menu bar:
#content2 {
float: left;
left:0;
width: 200px;
position: absolute;
height: 100%;
bottom: 0;
background-color: rgba(255,255,255,0.05);
border-right: 1px solid #666;
If I add
clear: both;
overflow:hidden;
to the wrapper div and remove
position: absolute;
from the content div it almost looks like right but then the menu bar isn't full height.
And before you say that the css is poor, don't blame me, it is my friend's layout/css. :)
Remove position:absolute from #content2
and changed the width of #content1main
but ultimately you should rethink your whole css as your's is quite bad.
Agree with the 1st answer about your css/layout needing to be re-written in a better way, but a quick fix would be this:
Add the following css to the existing style rules:
#wrapper { clear: both; overflow:hidden; }
#content1main { width: 760px; }
Remove the following css on the existing style rule:
#content2 { position: absolute }
These will fix your layout issues.
Related
I have an application which I am trying to layout. Everything is fine apart from the left column content. It should display 100% of the height of the parent container, the same height as the right column.
#Container is the outer container.
#TreeList is the left column.
#Tabcontrol is the right column.
This is what my app looks like right now:
And here is the current css for my app:
html {
font-family: Open Sans, Calibri, Arial;
margin: 0 auto;
width: 1500px;
}
body {
}
#Container {
float:left;
width:100%;
position:relative;
border:1px solid black;
}
#TreeList {
position:relative;
border-bottom: 1px solid #707070;
border-top: 1px solid #707070;
border-left: 1px solid #707070;
float:left;
overflow:hidden;
padding: 20px;
}
#TabControl {
position:relative;
border:1px solid #707070;
overflow:hidden;
float:left;
padding: 20px;
}
height: 100%; does not work like some would expect, you need a given height (em,%,px,etc..) on the parent element. In this case Your body I suppose. Add this to your css:
html, body{
height: 100%;
}
If you need a flexible parent container height there are several workarounds to achive that:
#1 Flexbox
You might take a look here: Flexbox Guide, works pretty neat, with the downside of browser support.
#2 Absolute positioning
Give the parent position: relative; And your element position: absolute; top: 0, bottom: 0; left: 0; for example.
#3 jQuery Plugin: matchHeight
This plugin does the job as well: matchHeight, only requires jQuery included and javascript to run
You haven't set any height in your css document, therefore all of the heights are pretty much random. First off set a main height for your body & html and then for the container like so:
html, body {
height: 100%;
}
#Container {
float:left;
width:100%;
position: relative;
border:1px solid black;
height: 100%;
}
Then for your other elements:
#TreeList {
position:relative;
border-bottom: 1px solid #707070;
border-top: 1px solid #707070;
border-left: 1px solid #707070;
float:left;
overflow:hidden;
padding: 20px;
height:100%;
}
#TabControl {
position:relative;
border:1px solid #707070;
overflow:hidden;
float:left;
padding: 20px;
height: 100%;
}
Or if you prefer you could use position: absolute; for your child element and do something like this:
child {
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
width: 100px;
}
Which will make the elements stretch to the entire screen and keep a width you choose.
This should work, although I highly recommend using Javascript to set the height for body as well as position: absolute; instead of relative;
Add 100% height to the left column.
#TreeList { height:100% }
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;
}
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.
im using this css code:
/* status update page style */
#content_wrapper {
display: inline;
width: 80%;
padding: 0;
margin: 0 auto;
}
#content_update {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_maintainance {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_sidebar {
display: block;
float: right;
width: 230px;
padding: 20px;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
/* FOOTER */
#footer {
width:100%;
height:580px;
position:absolute;
bottom:0;
left:0;
border-top:4px solid #ed1c24;
background-color:#eeeeee;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footerTop {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
#footerTopLeft {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopMid {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopRight {
width:30%;
height:420px;
float:left;
display:inline;
padding:0 15px 10px 15px;
}
but the divs are displaying behind the footer divs. i have created a fiddle here so you can see the html too - http://jsfiddle.net/wmrhC/
It's because you have set the footer div to be absolutely positioned at the bottom of the browser window with a height of 580px. This takes the div out of the regular document flow, which means other elements can start hiding behind it, and since it is 580px high, most other elements on the page will hide behind it. You could fix this by setting the z-index on the footer to -1, but that's probably not what you are after, as it would just mean that the div's will start floating over the top of the footer instead of behind the footer, and that still doesn't look pretty.
You should get rid of the absolute positioning which you have set currently, and maybe look at something like CSS sticky footer for an approach which will let you set a footer which sticks to the bottom of the page instead of to the bottom of the browser window.
When working with position: absolute or fixed you should always be aware that these elements can cover other parts of your site, and you have to manage their depth manually
You can do this using the z-index property.
Let's say that you would like that the footer part appears below all contents.
You could add the z-index property like this:
#footer {
/* other styles */
z-index: -1;
}
See it in action
Though note, that this only fixes the "content is displayed behind" problem. But looking at your page you have more positioning problems to solve.
As stated in other answers, it's because you've positioned your footer div to be fixed.
Something along this line (regarding HTML and CSS) should help for your page lay-out:
JSFiddle demo
This is the CSS (see the JS Fiddle for the full code):
...
.wrapper {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
background-color: #cccccc
}
.left1 {
position: relative;
float: left;
left: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.left2 {
position: relative;
float: left;
left: 1.50%;
width: 32.00%;
background-color: #ccccff
}
.right {
position: relative;
float: right;
right: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.footer {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
margin: 10px 0px;
background-color: #cfcfcf
}
...
As you can see, none of these items are positioned absolute or fixed.
Be sure to check this link too, which explains how you can create a sticky footer:
CSS Sticky footer (As indicated by another answer).
css/hmtl newbie here. I've been messing with divs and I'm getting some odd behavior that I can't figure out/explain. I'm getting extra space below the 'more' link, when it should be centered on the y-axis.
This is the code:
#show-rec-box {
clear: both;
width: 100%;
height: 286px;
border-bottom: 1px solid #ececec;
}
but when I change it to this, the extra space disappears!
#show-rec-box {
clear: both;
width: 100%;
height: 286px;
border-bottom: 1px solid #ececec;
border: 1px solid #911;
}
entire code w/o extra border: http://jsfiddle.net/8q3Ca/
code with extra border: http://jsfiddle.net/8q3Ca/1/
any ideas what's happening?? thanks a lot!
You have margin-top on #rec-title. It's margin collapse - http://www.w3.org/TR/CSS2/box.html#collapsing-margins Try use 'overflow:auto' for a parent block . Similar question Child elements with margins within DIVs
http://jsfiddle.net/fliptheweb/8q3Ca/2/
Replace #main, #show-rec-box, and #rec-wrap with the following css..
Is this something you want to achieve?
#main {
border: solid 1px #ececec;
width: 793px;
float: left;
}
#show-rec-box {
clear: both;
width: 100%;
height: 286px;
}
#rec-wrap {
margin: 0px 27px 0px 28px;
height: 100%;
overflow: hidden;
float: left;
}