I have some CSS code with a header, footer, left menu pane, and content. The layout is working on all browsers except IE6. In IE6 the linksPanel div does not render correctly within the masterContent div. I believe it has something to do with the position element. I've looked at a bunch of articles but have not been able to find a solution that works. Unfortunately I have to support IE6 and need a solution. Code is below. Any help would be greatly appreciated!
<!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 runat="server">
<title></title>
<style type="text/css">
.masterContent
{
position:fixed;
top:178px;
bottom:42px;
left:0px;
right:0px;
overflow:auto;
background:#fff;
}
.linksPanel
{
position:absolute;
top:0px;
left:10px;
bottom:0px;
width:254px;
overflow:auto;
background:#f4f4f3;
line-height:20px;
padding:5px;
}
.mainPanel
{
position:absolute;
top:5px;
bottom:0px;
right:10px;
width:70%;
overflow:auto;
padding-left:10px;
padding-bottom:0px;
}
.footerPanel
{
position:absolute;
bottom:0px;
left:0px;
padding:0px;
margin:0px;
width:100%;
height:44px;
text-align:right;
overflow:hidden;
background:#f4f4f3;
z-index:100;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<div class="headerPanel">
<p>Header stuff here.</p>
<p>More header stuff here.</p>
</div>
</td>
</tr>
</table>
<div class="masterContent">
<div class="linksPanel">
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
</div>
<div class="mainPanel">
<p>test content</p>
<p>test more content</p>
<p>test</p>
<p>test</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
</div>
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div class="footerPanel">
<p>Footer stuff here.</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
This is a very strange design and I have seen some strange designs indeed.
You are putting everthing in a <form> element and by everything, I mean everything including the header, div#masterContent and footer.
Than you are using tables and I have no idea why. Everying that you have done with tables can be done with divs.
You are giving you div.masterContent a position:fixed with a top:178px and bottom: 42px. Are you familiar with the positioning concepts in CSS? When you give any element a position of fixed, that element remains on the screen regardless if you scroll down. Is that what you want, and if you do, I can not imagine what kind of a page it will be.
You are giving your div.linksPanel a position of absolute with a top: 0, bottom: 0 and left: 10px. As i said this does not make sense in any way. How can it be 0 from the top as well as 0 from the bottom. These offset properties are set by using top-left, top-right or bottom-left, bottom-right.
Your div.mainPanel has the same issues.
I think, either you have totally missunderstood CSS Positioning and Layouts, or I have utterly failed to understand it. Maybe this is what you are looking for.
<!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" lang="en" xml:lang="en" dir="ltr">
<head runat="server">
<title>Document Template</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="basic.css" />
</head>
<body>
<div id="wrapper">
<form id="form1" runat="server">
<div id="header">
<p>Header Stuff Here</p>
<p>More Header Stuff Here</p>
</div>
<div id="content">
<div id="links_panel">
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
<p>Link1</p>
<p>Link2</p>
<p>Link3</p>
<p>Link4</p>
<p>Link5</p>
<p>Link6</p>
<p>Link7</p>
<p>Link8</p>
<p>Link9</p>
<p>Link10</p>
<p>Link11</p>
<p>Link12</p>
</div>
<div id="main_panel">
<p>test content</p>
<p>test more content</p>
<p>test</p>
<p>test</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer pretium dui sit amet felis. Integer sit amet diam. Phasellus ultrices viverra velit. Nam mattis, arcu ut bibendum commodo, magna nisi tincidunt tortor, quis accumsan augue ipsum id lorem
</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
<p>test</p>
</div>
<br />
</div>
<div id="footer_panel">
<p>Footer stuff here.</p>
</div>
</form>
</div>
With the following CSS
/* START - BASIC CSS */
/* START - CSS Reset */
*
{
margin: 0;
padding: 0;
}
p
{
line-height: 20px;
margin: 20px 0;
}
/* END - CSS Reset */
/* START - div wrapper */
div#wrapper
{
margin: 0 auto;
width: 960px;
border: 1px solid black;
}
/* END - div wrapper */
/* START - hack for "margin: auto" for IE6*/
body
{
text-align: center;
}
div#wrapper
{
text-align: left;
}
/* END - hack for "margin: auto" for IE6*/
/* START - form form1 */
form#form1
{
}
/* END - form form1 */
/* START - div header */
div#header
{
border: 1px solid black;
}
/* END - div header */
/* START - div content */
div#content
{
border: 1px solid black;
height: 500px;
}
/* END - div content */
/* START - div links_panel */
div#links_panel
{
width: 250px;
float: left;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div links_panel */
/* START - div main_panel */
div#main_panel
{
width: 704px;
float: right;
height: 500px;
overflow: auto;
border: 1px solid black;
}
/* END - div main_panel */
/* START - div footer_panel */
div#footer_panel
{
clear: both;
border: 1px solid black;
}
/* END - div main_panel */
/* END - BASIC CSS */
Basically you want a header, followed by a linkspanel on the left which should have a scroolbar, followed by a mainPanel which should also have a scroolbar and it has to be to the right of the linksPanle and lastly followed by a fotter.
Related
I have a div with positons fixed inside a fixed width parent, yet it's content overflows.
How can I contain the content to the fixed div?
<div style="width: 400px;">
<div style="position: fixed;">
<p>Some long p text which is currently overflowing....</p>
</div>
</div>
You won't see a good result setting the position to fixed. Because the div that is inside the parent is position fixed, and it's not true. It's not like position relative and absolute.
You can fix it like this:
You must set a fixed width, e.g. the parent is 200px and so you have to set the width to 200px on the second div. Remember that if you set it to 100%, it will cover the whole page, which is a mistake.
<div style="width: 200px; height: 200px; border: 1px solid red">
<div style="position: fixed; width: 200px;">
<p>Some long p text which is currently overflowing....</p>
</div>
</div>
Here are some overflow properties this will help you
div{
overflow: scroll;
}
div{
overflow: hidden;
}
div{
overflow: auto;
}
div{
overflow: visible;
}
Maybe this code will help you check
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
</style>
<div class="ex1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</body>
</html>
Verifiy my answer if this help you.
I want my labels display left up in the text-fields, here is the screenshot where i want them exactly http://s20.postimg.org/p8h11xrot/label_1.png.
I don't know really how to do that i tried with text-align or float: left.
this is my css file:
body {
}
#container{
background-color:#ccccff;
width:100%;
margin-left:auto;
margin-right:auto;
}
.content {
padding: 5px;
width:100%;
margin-left:auto;
margin-right:auto;
text-align:center;
}
label {
text-align: center;
}
article p{
text-align:center;
}
header{
width: auto;
height: 100px;
background-color: #ffffff;
background: url(image.png) center center no-repeat;
text-align:center;
}
footer{
text-align:center;
background-color: #999999;
}
Index.html
<!DOCTYPE html>
<html>
<head>
<title>Intes - Register</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header> Header Image </header>
<section id="container">
<article><p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Sed eget vehicula sapien.
Donec vitae quam id dolor pretium viverra.
Nulla viverra quam eget fringilla ultrices.</article>
<label>First Name</label>
<br />
<div class="content">
<input type="text" name="first_name" size="50">
<br />
</div>
<label>Last Name</label>
<br />
<div class="content">
<input type="text" name="last_name" size="50">
<br />
</div>
<label>E-mail Address</label>
<br />
<div class="content">
<input type="text" name="email_address" size="50">
<br />
</div>
<div class="content">
<input type="submit" value="Register">
</div>
</section>
<footer>copyright stuff</footer>
</body>
</html>
To have your desired visual effect you need to figure out to center the form and
get the labels to show above the inputs.
#container{
text-align: center;
}
/* FORMS */
#my_form {
display: inline-block;
text-align: left;
line-height: 1.5;
}
#my_form label {
display: block;
}
#my_form input {
margin: 0.25em 0 0.5em;
}
http://fiddle.jshell.net/g4yzZ/13/
http://fiddle.jshell.net/g4yzZ/13/show
Float your .labels and input elements to the left {float:left} and use {clear:right} on the labels.
Give the label or container a width, and then use text-align: left. It should work.
label {
width: 100px;
text-align: center;
}
You can accomplish this with width.
The trick is to wrap the input and label tags in wrapper divs. You almost got there, but the nesting in your code was off.
Once that's done, you can set the content class to the width of your inputs, 333px and align it center with margin, then text-align left the labels, which are now flush with the inputs.
The working code is here: http://jsfiddle.net/bronzehedwick/xpB3v/
And the relevant css:
.content {
padding: 5px;
width:333px;
margin: 0 auto;
}
label {
text-align: left;
display: block;
}
I am working on getting a two column layout that extends to the bottom of my page.
However, my sidebar cuts off at the container-fluid height even though I am trying to get it to extend to the whole page.
What is weird is that my content column works fine.
HTML:
<div class="container-fluid">
<div class="row-fluid columns no-margin fill">
<div id="sidebar" class="span2 columns no-margin right-edge"></div>
<div id="contentWrapper" class="span10 columns no-margin pull-right"></div>
</div>
</div>
CSS:
html, body, form {
height: 100%;
min-height: 100%;
background-image:url("../../images/lightGreyBackground.png");
background-repeat: repeat;
font-family:"Segoe UI", Helvetica, Arial, Sans-Serif;
}
.container-fluid {
margin: 0 auto;
height: auto;
padding: 0px;
}
.columns {
height: 100%;
min-height:100%;
margin: 0px;
width: 100%;
}
.fill {
position: absolute;
height: 100%;
min-height: 100%;
}
.no-margin {
margin-left: 0%;
width: 100%;
}
.right-edge {
border-right: 1px;
border-right-style: solid;
border-right-color: #CCCCCC;
}
#sidebar {
background-color: White;
padding-top:15px;
}
For have 2 column :
<html>
<head>
<style type="text/css">
.container-fluid { width: 100%;}
.float {
float: left;
width: 50%; /* Size colonne */
margin: 1em 0; /* Margin colonne */
}
.spacer { clear: both; }
</style>
</head>
<body>
<div class="container-fluid">
<div class="float">Colonne 1</div>
<div class="float">Colonne 2</div>
<div class="spacer"></div>
</div>
</body>
</html>
Use the framework bootstrap or 960.gs, powerful front-end framework for faster and easier web development.
With bootstrap 3 :
<div class="container">
<!-- Example row of columns -->
<div class="row">
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
<div class="col-lg-4">
<h2>Heading</h2>
<p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in.</p>
<p><a class="btn btn-default" href="#">View details »</a></p>
</div>
</div>
</div>
I'm trying to center a Div that will have varying width's (based on content of a website).
I read about a relative positioning technique here:
http://www.tightcss.com/centering/center_variable_width.htm
But I thought there has to be an easier way to do it?
That's a pretty solid method that should work well in most browsers. It's not really that complex when you break it down. Here's a basic example:
<style type="text/css">
#hideoverflow { overflow: hidden; }
#outer { position: relative; left: 50%; float: left; }
#inner { position: relative; left: -50%; float: left; }
</style>
<div id="hideoverflow">
<div id="outer">
<div id="inner">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id velit vel augue fringilla rhoncus at et odio. Suspendisse potenti. Aliquam justo libero, commodo ut iaculis in, placerat vel purus.
</div>
</div>
</div>
#Talon; you can do it like this http://jsfiddle.net/sandeep/7PXQF/
CSS:
.container{
background-color:red;
text-align:center;
}
.center{
background-color:yellow;
display:inline-block;
text-align:left;}
HTML:
<div class="container">
<div class="center">
<p>This is a div with an much wider width, to make the yellow div go off the page to the right. We'll type a bit more to be sure.</p>
<p>Most people will see a horizontal scroll bar on the bottom, unless their screen is very wide.</p>
</div>
</div>
Well, it can't get any simpler than this and has full support on all browsers; doesn't even need a container:
.centered {
display:table;
margin:0 auto;
}
<div class="centered">
content
</div>
Here is a working fiddle: https://jsfiddle.net/1tnprnoz/
Now with flex-box you can easily achieve this with justify-content: center;.
#container{
background: gray;
display: flex;
justify-content: center;
}
<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>
This can also be achieved by applying margin: auto to the containers child selector #container>*.
#container{
background: #c7c7c7;
}
#container>*{
margin: auto;
}
<div id="container">
<div id="content" style="width: 200px; padding: 5px; background: #ffa637;">
This is a centered div This is a centered div This is a centered div This is a centered div
</div>
</div>
Note: content div is styled inline as these styles are generated styles and are out of the scope of this question.
______________________
| Header |
|______________________|
| |
| |
| Content |
| |
| |
|______________________|
| Footer |
|______________________|
I would like to make this UI, and each is a div. The header height is 30px. And the footer is 30px. But I don't know the content height. I need to use the user frame to calculate.
The total height should be 100%.
Can I do it in pure CSS?
Using flexbox, this is easy to achieve.
Set the wrapper containing your 3 compartments to display: flex; and give it a height of 100% or 100vh. The height of the wrapper will fill the entire height, and the display: flex; will cause all children of this wrapper which has the appropriate flex-properties (for example flex:1;) to be controlled with the flexbox-magic.
Example markup:
<div class="wrapper">
<header>I'm a 30px tall header</header>
<main>I'm the main-content filling the void!</main>
<footer>I'm a 30px tall footer</footer>
</div>
And CSS to accompany it:
.wrapper {
height: 100vh;
display: flex;
/* Direction of the items, can be row or column */
flex-direction: column;
}
header,
footer {
height: 30px;
}
main {
flex: 1;
}
Here's that code live on Codepen: http://codepen.io/enjikaka/pen/zxdYjX/left
You can see more flexbox-magic here: http://philipwalton.github.io/solved-by-flexbox/
Or find a well made documentation here: http://css-tricks.com/snippets/css/a-guide-to-flexbox/
--[Old answer below]--
Here you go: http://jsfiddle.net/pKvxN/
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Layout</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
header {
height: 30px;
background: green;
}
footer {
height: 30px;
background: red;
}
</style>
</head>
<body>
<header>
<h1>I am a header</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a ligula dolor.
</p>
</article>
<footer>
<h4>I am a footer</h4>
</footer>
</body>
</html>
That works on all modern browsers (FF4+, Chrome, Safari, IE8 and IE9+)
Here is how to to that:
The header and footer are 30px height.
The footer is stuck to the bottom of the page.
HTML:
<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>
CSS:
#header {
height: 30px;
}
#footer {
height: 30px;
position: absolute;
bottom: 0;
}
body {
height: 100%;
margin-bottom: 30px;
}
Try it on jsfiddle: http://jsfiddle.net/Usbuw/
Try This
<!DOCTYPE html>
<html>
<head>
<title>Sticky Header and Footer</title>
<style type="text/css">
/* Reset body padding and margins */
body {
margin:0;
padding:0;
}
/* Make Header Sticky */
#header_container {
background:#eee;
border:1px solid #666;
height:60px;
left:0;
position:fixed;
width:100%;
top:0;
}
#header {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
margin:0 auto;
overflow:auto;
padding:80px 0;
width:940px;
}
#content {
}
/* Make Footer Sticky */
#footer_container {
background:#eee;
border:1px solid #666;
bottom:0;
height:60px;
left:0;
position:fixed;
width:100%;
}
#footer {
line-height:60px;
margin:0 auto;
width:940px;
text-align:center;
}
</style>
</head>
<body>
<!-- BEGIN: Sticky Header -->
<div id="header_container">
<div id="header">
Header Content
</div>
</div>
<!-- END: Sticky Header -->
<!-- BEGIN: Page Content -->
<div id="container">
<div id="content">
content
<br /><br />
blah blah blah..
...
</div>
</div>
<!-- END: Page Content -->
<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
<div id="footer">
Footer Content
</div>
</div>
<!-- END: Sticky Footer -->
</body>
</html>
After fiddling around a while I found a solution that works in >IE7, Chrome, Firefox:
http://jsfiddle.net/xfXaw/
* {
margin:0;
padding:0;
}
html, body {
height:100%;
}
#wrap {
min-height:100%;
}
#header {
background: red;
}
#content {
padding-bottom: 50px;
}
#footer {
height:50px;
margin-top:-50px;
background: green;
}
HTML:
<div id="wrap">
<div id="header">header</div>
<div id="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. </div>
</div>
<div id="footer">footer</div>
with Grid
<div class='container'>
<header>header</header>
<div>content</div>
<footer>footer</footer>
</div>
.container {
display: grid;
grid-template-rows: auto 1fr auto;
height: 100vh;
}
Below is the sample code and you can run a snippet to see the result.
html,body {
display: flex;
flex-direction: column;
height: 100%;
}
sidenav{
border:1px solid black;
flex: .3;
}
container{
border:1px solid black;
flex: 1;
}
header{
border:1px solid black;
flex:.1;
}
content{
display:flex;
flex:1;
border:1px solid black;
}
footer{
border:1px solid black;
flex:.1;
}
<body>
<header >header</header>
<content>
<sidenav>sidenav</sidenav>
<container>container</container>
</content>
<footer>footer</footer>
</body>
Try this
CSS
.header{
height:30px;
}
.Content{
height: 100%;
overflow: auto;
padding-top: 10px;
padding-bottom: 40px;
}
.Footer{
position: relative;
margin-top: -30px; /* negative value of footer height */
height: 30px;
clear:both;
}
HTML
<body>
<div class="Header">Header</div>
<div class="Content">Content</div>
<div class="Footer">Footer</div>
</body>