I've looked everywhere, and can't figure out if there's a way to do this. Basically, I want to mimic this layout, without using the CSS3 attributes:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Bad way...</title>
<style>
html,body{
margin:0px;
height:100%;
}
.tall{
background-color:yellow;
min-height:100%;
height:100%;
padding-top:50px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.short{
background-color:blue;
height:100%;
}
</style>
</head>
<body>
<div class='tall'>
<div class='short'>
Foo bar baz
</div>
</div>
</body>
</html>
I don't care how much extra markup or CSS there is, as long as its cross-browser compatible. I would just settle with the ol' faux columns, but it won't work in this situation. The short div is going to have an iframe, which needs to be the full height.
The tall div is just there to show what its supposed to look like. All I want, is a div that is full height, but with a 50px margin on top. All of my attempts just extend the height to 100% + 50px.
I know I can do it with JavaScript, but I would really like to get a CSS solution if its possible.
You can use absolute positioning as described here: http://www.alistapart.com/articles/conflictingabsolutepositions/
You can specify all sides of div e.g.
position: absolute;
top: 50px;
right: 0;
left: 0;
bottom: 0;
Instead of " padding-top:50px;" in .tall{} use margin-top:50px;
remove:
.tall{
min-height:100%;
}
along with css3 property. Should work fine. New css would look like
.tall{
background-color:yellow;
height:100%;
padding-top:50px;
}
.short{
background-color:blue;
height:100%;
}
Related
I have this kind of structure coming from the following code. And I cannot achieve to do the following despite my efforts and reading.
In pure CSS, how may I force X to stick the right border of the container, being under Y2/Y1 divs ?
The container and C do not have a fixed width (I put a fixed width in the code for convenience). All the other ones have fixed width.
.
I
<HTML>
<HEAD>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
BODY {
font-family:Arial;
}
DIV.container {
width:200px;
height:20px;
line-height:20px;
font-size:9px;
background-color:yellow;
}
DIV.BlocA {
width:20px;
background-color:#AAAAAA;
float:left;
}
DIV.BlocB {
width:20px;
background-color:#999999;
float:left;
}
DIV.BlocC {
width:20px;
background-color:#666666;
float:left;
}
DIV.BlocX {
padding-right:9px;
width:50px;
background-color:#00E9E9;
text-align:center;
float:right;
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70);
}
DIV.BlocY1, DIV.BlocY2 {
width:20px;
float:right;
}
</style>
</HEAD>
<DIV class="container">
<DIV class="BlocA">A</DIV>
<DIV class="BlocB">B</DIV>
<DIV class="BlocC">C</DIV>
<DIV class="BlocY1" style="background-color:red;">Y1</DIV>
<DIV class="BlocY2" style="background-color:green;">Y2</DIV>
<DIV class="BlocX">X</DIV>
</DIV>
</BODY>
</HTML>
I am not sure if this is what your desired result was.
CHECK DEMO
I used clear:both; and float:left; on the elements you wanted to the left. I also wrapped the 'Y' divs so that I could float them side to side.
I share with you the link that changed my life and how I deal with CSS positioning
http://www.barelyfitz.com/screencast/html-training/css/positioning/
To control which div is on top you may give them each a z-index.
I would either float them all in a certain order or I would use position relative/absolute
I know this has been asked somewhere else, but I can't find the solution. I have a simple layout. A container Div with two floating divs inside. The left div holds the navigation and has a background image. The right div has a solid background and is dynamic based on the content of each page. I am not having issues with the content div. My problem is I want the left div to "stretch" vertically to match the height of the content div. What is happening is the left is only stretching to the min-height value. Here is my CSS:
#containerTemp {
margin-left:auto;
margin-right:auto;
width:1000px;
min-height:100px;
height:auto;
}
#containerNavigation {
width:210px;
float:left;
background-image:url(../images/template/linkbgd.gif);
background-repeat:repeat-y;
min-height:500px;
height:100%;
}
#containerContent {
width:790px;
background:#FFFFFF;
background-repeat:repeat-y;
float:right;
min-height:500px;
height:100%;
}
You can see the issue by visiting this page: http://www.athensfireandrescue.org/?pid=7
I am sure it's something simple, but I can't put my finger on it. Sorry for the redundant question, but my searches just didnt' turn up viable solutions.
Heights can be a bit tricky. However the goal is to make sure the parent containers have 100% height.You have a lot of stuff going on in your web page. So I created an isolated demo to demonstrate how this works.
HTML
<div class="wrapper">
<div class="left"></div>
<div class="right"></div>
</div>
CSS
html, body {height:100%;}
.wrapper {
width:400px;
height:100%;
margin:0 auto;
}
.left {
width:198px;
border:1px solid black;
float:left;
height:100%;
}
.right {
width:198px;
border:1px solid red;
float:left;
height:100%;
}
DEMO:
http://jsfiddle.net/nFdtT/
SOME OTHER STUFF I NOTICED:
If I can offer some advice I would suggest the following:
Don't use tables unless it is tabular data. Your NAV should be constructed using a list.
Remove all inline styles and place them in a separate stylesheet.
<meta> and <style> tags should be in the <head> of your document. (For some reason you have a partial doctype heading nested inside of your <head>)
And if you aren't already, I would suggest using a CSS reset.
I have a canvas element inside a div element. The canvas size can change, and I want it vertical centered. I'm using this CSS approach:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Vertical Centering</title>
<style>
html,
body{
height:100%;
width:100%;
margin:0;
padding:0;
}
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
}
#container:before{
content:'';
display:inline-block;
height:100%;
vertical-align:middle;
}
canvas{
width:400px;
height:300px;
display:inline-block;
vertical-align:middle;
background:#fff;
}
</style>
</head>
<body>
<div id="container">
<canvas></canvas>
</div>
</body>
</html>
You can see it working on this fiddle: http://jsfiddle.net/8FPxN/
This code works great for me, until the browser resizes under the canvas width. The virtual element defined by the :before selector stands on the first line, and the canvas falls to the second line. I'm trying to keep them sticked, avoiding the line break, and showing scroll bars when needed. Adding the overflow:auto rule to the container shows the scroll bars, but the line keeps breaking.
The canvas size can change, so the top:50%; margin-top:- ($canvas_height / 2); approach is not suitable for this. Well, it can be, but I prefer not to control the margin-top using JavaScript. Just CSS would be great.
Any ideas? Thanks!
It seems (from limited testing) that adding white-space: nowrap; works:
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
background:#aae;
white-space: nowrap;
}
Updated JS Fiddle demo.
Adding white-space:nowrap should do the trick. http://jsfiddle.net/David_Knowles/aEvG5/
#container{
width:100%;
height:100%;
text-align:center;
font-size:0;
white-space:nowrap;
}
EDIT: correct fiddle
I have a three-parts layout: header, content and footer. I am very well familiar with the absolute positioning technique; I use it a lot when I want the content div to extend to 100% of available height.
In this case, my problem is that I don't know in advance the height of the footer, it is dynamic based on its own content, which has an unknown number of lines (typically between 1 to 3 lines).
I want the main content div to grab 100% of available height, after accounting for the height of the header (which is fixed, so it's a no-brainer) and for the height of the footer therefore I can't use absolute positioning technique here.
I have a solution with involves javascript, but I am trying to find a css-only solution. Ideally, it should be a cross-browser solution (IE8, IE9, chrome, firefox and Safari).
Try this
<!doctype html>
<html>
<body>
<style>
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
}
#footer {
position:absolute;
bottom:0;
width:100%;
background:#6cf;
}
</style>
<div id="container">
<div id="header">header</div>
<div id="body">body</div>
<div id="footer">footer</div>
</div>
</body>
</html>
I've been struggling for days trying to get a page working with CSS and DIVS. Basically I need a masthead with logo/banner ad at the top, then a three column layout (nav, main content and additional side content), then ending the page with a footer.
I will need to set a background color and put a 1 px border around the three content columns so I have a wrapper div around them. And the three columns may also need there own background colors too.
What I am aiming for is to have each of the three content columns be the same height and grow as required. However, if I add a lot of content to one of them, the content spills out below the footer. I've done lots of searches on this and tried various combinations of height and min-height but still can't get it working.
I have placed HTML (with the CSS in it) at http://solomon.ie/so and screen grabs taken in FF3 on WinXP
The tidied code is also here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body {
height:100%;
}
body, td, p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
}
#content_wrapper{
width: 980px;
margin: 0 auto;
border:1px solid #3300FF;
background:#FFFF66;
min-height:100%;
height:100%;
}
#middlecol{
float:left;
min-height:100%;
height:100%;
background:grey;
width:540px;
}
#leftcol{
float:left;
min-height:100%;
background:green;
width:170px;
}
#rightcol{
float:right;
min-height:100%;
background:#66FFCC;
width:250px;
}
#header_wrapper {
width: 980px;
margin: 0 auto;
border:1px solid #FF0000;
clear:both;
margin-bottom:8px;
}
#footer_wrapper {
width: 980px;
margin: 0 auto;
border:1px solid #000000;
clear:both;
margin-top:8px;
}
</style>
<title>test </title>
</head>
<body>
<div id="header_wrapper"><h1>logo/ad</h1></div>
<div id="content_wrapper">
<div id="rightcol"><h1>RHS column</h1></div>
<div id="leftcol"><h1>LHS</h1></div>
<div id="middlecol"><h1>Main content column</h1></div>
</div>
<div id="footer_wrapper"><h1>footer</h1></div>
</body>
</html>
Try http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
i've used it on various projects and it works extremely well.
There is nothing wrong, content wrapper is 100% of screen, but you have other elements (top, bottom). That means 100% + n px.
Remove header and footer, and you will see for yourself. You should wrap everything in a div, and set height to 100% and overflow:hidden, but this is dangerous.
You also need to add this rule on top, because some elements like body have margin/padding by default.
*{margin:0;padding:0;}
Note that borders add height/width to overall height/width so you will always have vertical scroll even if the border is 1px, thats 100% + 1px