I can't add top margin to footer that uses clear:both.
Using padding seem to solve the problem. But it ruins the top solid border of the footer.
index.php:
<!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>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Study at Best</title>
<link rel="stylesheet" rev="stylesheet" href="styles/layout.css" />
<link rel="stylesheet" rev="stylesheet" href="styles/ddm.css" />
<script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.corner.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<div id="container">
<div id="logo">
<img class="imageCenter" src="images/logo.png" alt="Best School"/>
</div>
<div id="navigation">
<?php include("navigation.html"); ?>
</div>
<div id="header">
</div>
<div id="left-column">
<h2>left-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
</p>
</div>
<div id="main-column">
<h2>main-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
</p>
</div>
<div id="right-column">
<h2>right-column</h2>
<p>
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
erat, nec semper dui diam ut libero. Donec adipiscing placerat metus.
Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor
non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est.
In hendrerit turpis sed ligula. Integer vulputate nibh congue magna.
</p>
</div>
<?php include("footer.html"); ?>
</div>
</body>
</html>
footer.html:
<div id="footer">
Home |
About Us |
Contact Us |
Menu Item 4 |
Menu Item 5 |
</div>
style.css:
/*Default*/
* { margin: 0px; padding: 0px; }
body { font-size: 75%; font-family: Arial, Helvetica, sans-serif; }
ul { list-style: none }
a { outline: none; }
a img { border: none; }
h1 { font-size: 3.0em; }
h2 {
font-style: normal;
font-size: 1.0em;
padding: 5px 10px;
margin-bottom: 10px;
color: #FFF;
background-color: #A53030;
}
/*Tools*/
.textCenter { text-align: center; }
.imageCenter { margin-left: auto; margin-right: auto; display: block; }
.floatLeft: { float: left; }
.floatRight: { float: right; }
.clear { clear: both; }
/*Page*/
#container {
width: 800px;
margin: 0px auto;
}
#logo {
width: 170px;
height: 60px;
margin: 5px;
}
#header {
width: 800px;
height: 200px;
background-image: url('../images/best.jpg');
}
#navigation {
color: white;
width: 800px;
background-color: #000;
}
#left-column {
width: 150px;
padding: 10px;
float: left;
color: #FFF;
background-color: #A53030;
}
#main-column {
width:360px;
padding: 10px;
float: left;
}
#right-column {
width: 200px;
padding: 10px;
float: right;
}
#footer {
margin-top: 50px;
width: 800px;
border-color: #262626;
border-top-style: solid;
border-width: medium;
clear: both;
}
#footer ul li {
list-style: none;
float: left;
}
#footer ul li a {
display: block;
padding: 5px;
width: auto;
color: #000;
font-weight: bold;
text-align: center;
text-decoration: none
}
#footer ul li a:hover {
color: #49A3FF;
}
Try using padding instead. The margin is being "swallowed" under the floating elements.
You need to clear the float on left-column and right-column.
Add overflow:hidden; to #container
Emily's answer works perfectly well! I was faced with the same problem a couple of days ago, and I found 3 different ways to achieve this (one with HTML, two via CSS).
Adding a structural element: This basically entails adding an empty div after your floating elements so as to clear the floats. Old-fashioned, and unpopular because we're using HTML to fix a problem relating to appearance. Add a div with the attribute style="clear:both" right after your floating elements.
Adding content via CSS: You can use the container:after selector in CSS to achieve the same thing. Best explained here: http://www.positioniseverything.net/easyclearing.html.
Using overflow: As explained by Emily, or here: http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html.
Margin does not work with inline elements, just add "display: inline-block" to footer css, margin-top should be working.
Related
I made HTML page, with left side navbar(vertical), position fixed , so it will not move when i scroll down the other div(the guide with text),
after that div with text.
I am trying to make it responsive, but since it is fixed position it won't help.
Is there any trick to fix this?
example (not extacly as mine, since its very long code above 200 lines with css and everything)
but still it is the same idea.
notice because the navbar is fixed position it will hide the guide div when screen pixels go down
.sidenav {
height: 100%;
width: 260px;
position: fixed;
z-index: 1;
top: 140px;
left: 135px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
border-radius: 5px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: #2b8bc6;
display: block;
}
.sidenav h3 {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: black;
display: block;
}
.box22 {
background-color: #fff;
max-width: 1000px;
margin: auto;
margin-top: 20px;
border-radius: 8px;
}
<body>
<div class="sidenav">
HTML 1 editors
HTML 2 editors
HTML 3 editors
</div>
<div class="box22">
<h1>HTML part 1 intro</h1>
<p>text</p>
</div>
</body>
Use a relative CSS Unit like vw, which is equivalent to 1% of the total viewport.
Right now, you've got it set to an absolute size, 260px. Change that to something like 10vw.
For more info on CSS units, including a list of relative units, check out this W3 page.
.sidenav {
height: 100%;
width: 10vw;
position: fixed;
z-index: 1;
top: 140px;
left: -6px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
border-radius: 5px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: #2b8bc6;
display: block;
}
.sidenav h3 {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: black;
display: block;
}
.box22 {
background-color: #fff;
max-width: 1000px;
margin: auto;
margin-top: 20px;
margin-left: 11vw;
border-radius: 8px;
}
<body>
<div class="sidenav">
HTML 1 editors
HTML 2 editors
HTML 3 editors
</div>
<div class="box22">
<h1>HTML part 1 intro</h1>
<p>text</p>
</div>
</body>
Could you do something with a bit of jQuery and more traditional nav layout for smaller responsive designs? Here's an idea: (fiddle: https://jsfiddle.net/moqb29cr/)
HTML:
HTML 1 editors
HTML 2 editors
HTML 3 editors
<h1>HTML part 1 intro</h1>
<div id="responsive_nav">
☰
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu maximus turpis. Cras non leo et felis consectetur tristique. Fusce rutrum erat non facilisis suscipit. Quisque id mi dictum, vestibulum massa sit amet, pharetra justo. Sed rutrum, ligula iaculis mattis sagittis, nisi urna commodo diam, eu auctor mi nunc eu odio. Quisque vel odio viverra, imperdiet augue at, rhoncus orci. Nullam fringilla id tortor vel rutrum. Morbi interdum egestas luctus. Suspendisse nec lacus lacinia, mollis massa auctor, consectetur nisi. Quisque interdum iaculis turpis vitae posuere. Aenean sollicitudin blandit interdum. Nulla vel bibendum nibh, at semper ex.Sed ornare dolor dui, sit amet efficitur lacus varius eget. Nunc ut urna at risus tristique cursus. Nulla rutrum rhoncus odio, vel volutpat nibh hendrerit sed. Nulla tempus id erat nec dictum. Phasellus laoreet pretium posuere. Etiam fringilla ipsum ut porttitor euismod. Mauris auctor nisi vitae sapien lacinia, porta tempor est consequat. Phasellus auctor bibendum varius. Duis convallis justo vitae nibh finibus, et vestibulum enim congue. Sed id nulla quam. Quisque sed cursus eros. Integer ut telVestibulum malesuada elementum diam non tincidunt. Integer et pharetra mi, nec tempus erat. Integer tempor dictum feugiat. Duis vel elit tellus. Etiam ornare consequat accumsan. Fusce sit amet sapien vitae mauris vestibulum mattis a sit amet odio. Maecenas volutpat orci tincidunt ante suscipit eleifend. Sed tempor faucibus ligula, vitae vulputate tortor viverra id. Phasellus ultricies, erat et fermentum tincidunt, augue nisl cursus nulla, id facilisis nunc ante commodo quam.Praesent euismod varius eros non euismod. Fusce posuere nisl lacus, a condimentum nunc efficitur eu. Ut et molestie tortor. Nunc vitae magna at felis rutrum blandit vel ut est. Aenean condimentum ipsum nec lorem condimentum convallis. Donec nec diam vel enim dapibus pretium eu at tortor. Maecenas vulputate sed diam ac aliquam. Aenean pharetra ullamcorper nisi, at egestas justo. Interdum et malesuada fames ac ante ipsum primis in faucibus.Morbi malesuada dui vitae ex pretium, eget congue nisi viverra. Donec hendrerit lorem non augue aliquet dictum. Vivamus molestie in justo in pharetra. Nunc finibus, velit sit amet malesuada bibendum, turpis elit maximus tortor, et vehicula ex tellus non lectus. Donec rhoncus erat placerat, pulvinar est eu, tincidunt neque. Donec ligula enim, bibendum non est non, porta blandit risus. In et facilisis lorem, ut commodo ipsum. Nulla feugiat felis vel rhoncus ultrices. Vivamus vitae orci tincidunt, mattis risus a, mattis dui. Curabitur congue enim at lorem lobortis, nec venenatis leo interdum. Quisque id euismod felis, ut congue nunc.</p>
jQuery:
$("#responsive_nav").click(function(){
$(".sidenav").toggle();
});
And CSS:
p {
position:relative;
display:block;
width:75%;
left:28%;
}
.sidenav {
height: 100%;
width: 25%;
position: fixed;
z-index: 1;
top: 85px;
left;0px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
border-radius: 5px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: #2b8bc6;
display: block;
}
.sidenav h3 {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 22px;
color: black;
display: block;
}
.box22 {
background-color: #fff;
max-width: 1000px;
margin: auto;
margin-top: 20px;
border-radius: 8px;
}
#responsive_nav {
display:none;
}
#media only screen and (max-width: 600px) {
.sidenav {
display:none;
}
#responsive_nav {
display:block;
position:fixed;
top:15px;
left:80%;
cursor:pointer;
border-radius:6px;
border:thin solid #ccc;
padding:10px;
}
#responsive_nav:hover {
background-color:#ccc;
border-radius:6px;
padding:10px;
}
p {
width:90%;
left:0%;
}
}
When I resize my window to 1280 x 720 or below I just realized I'm getting some behavior I do not want. The right column (.right class) is getting "bumped down" below when I resize my window
What is it in my CSS code (or not in the code) that's causing this? I have a feeling that I'm missing a very important concept here. :)
Here is what happens to the right column on smaller screens: http://s11.postimg.org/vp9c7o3dv/css.png
And here is the faulty code:
http://codepen.io/cosmonaut/pen/yyvZjZ?editors=110
html {
background: url(http://s16.postimg.org/k5re12691/bg_radium.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
width: 95%;
font-family: courier;
font-size: 15px;
color: #E7DFC2;
margin-left: 30px;
}
.container {
width: 90%;
margin: 10px auto;
background-color: #273E23;
opacity: 0.97;
margin-top: 25px;
}
.header {
text-align:center;
font-size: 40px;
padding: 1em;
border-bottom: 1px solid gray; /* Temporary. */
background-color: #273E23;
}
.header p {
font-size: 25px;
padding: 0px;
margin: 0px;
background-color: #273E23;
}
.header img {
padding: 0px;
margin: 0px;
width: 200px;
height: 200px;
}
.menu {
text-align: center;
}
.menu ul {
}
.menu ul li {
margin: 0 20px;
padding: 0;
list-style-type: none;
display: inline-block;
}
.menu ul li a {
text-decoration: none;
background-color: #273E23;
color: #D3B474;
}
.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
.right {
padding: 1em;
float: right;
width: 860px;
background-color: #273E23;;
}
.right p {
background-color: #273E23;
}
.footer {
clear: both;
margin: 0px;
padding: .5em;
text-align: center;
background-color: #273E23;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet_v2.css"/>
<title>Radium Recordings</title>
</head>
<body>
<div class="container">
<div class="header">
<img src="http://s11.postimg.org/z08mz7o9f/radium4.png">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Releases</li>
<li>Tours</li>
<li>Contact</li>
</ul>
</div>
<div class="left"><p>Hi, I'm the left side. Not sure if I'm even going to keep this column. Lorem Ipsum added:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
</div>
<div class="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris lacinia tellus vel nunc accumsan maximus. Pellentesque justo sem, condimentum non lectus sed, consequat dignissim eros. Integer id ante lectus. Nam id nisi dui. Curabitur euismod volutpat accumsan. Donec pellentesque metus eleifend, imperdiet arcu lacinia, convallis est. Curabitur porta interdum vehicula. Fusce mollis quam et ex venenatis, eget luctus risus pellentesque.</p>
<p>Aliquam convallis nulla commodo convallis scelerisque. Curabitur elementum porttitor purus, posuere tincidunt turpis sagittis et. Proin non nulla vitae velit rutrum egestas id vitae dolor. Mauris placerat nec metus vel ultrices. Integer molestie lobortis eros a dapibus. Pellentesque commodo iaculis magna fringilla rhoncus. Nullam luctus dui elit, nec ornare erat volutpat vitae. Vestibulum nulla velit, porttitor in hendrerit vel, varius sit amet elit. Aliquam erat volutpat.
</p>
</div>
<div class="footer">
<p>P.O. Box 321, Anywhere, USA 31721 | Tel: (888) 888-8888</p>
</div>
</div>
</body>
</html>
Change your column widths to percentages. One example is this Codepen.
I used:
.left {
float: left;
width: 20%;
margin: 0;
padding: 1em;
}
.right {
padding: 1em;
float: right;
width: 67%;
background-color: #273E23;;
}
but you can use any percentages that look right to you.
You have two column in your site. One have class name "left" another have class named "right". Now each of those class have fixed width. So when the screen size goes less than the declared width the 2nd column get down to get it desire size.
If we see the explanation:
.right {
padding: 1em;
float: right;
width: 860px;
background-color: #273E23;
}
.left {
float: left;
width: 160px;
margin: 0;
padding: 1em;
}
Here we can see right class have width of 860px and the left class have width of 160px. Also the right class have a padding of 1em which is 15 in pixel. So if you want to show both of the element in single line then the minimum screen size should be 1050px (860 + 30 + 160). Here 30 is summation of both side padding 15 px.
If you want to do the code in such way that you what ever the screen size is both column should maintain size ratio then instead of using fixed width you should use %. For batter understanding you can check example of #bobdye
On small screen you have not enough space in .container for two columns.
You should set .container width in px, or declare min-width for it, or declare width of left and right columns in %.
Please review this Sample Fiddle.
You'll notice I have two colums, side by side, and content under the headers. I'm trying to align the Lorem Ipsum with the vertical center of the paragraph to the right.
I thought a vertical align set to the column 1 would would, but it's not.
.col1-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width:45%;
margin-left: 4%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
text-align: center;
}
Ideas?
Set "col1-row1" and "col2-row1" to display: table-cell instead of inline-block, and then include vertical-align: middle.
just replace this css for col1-row1 and col2-row1 classes in your stylesheet,this works fine in your fiddle.
.col1-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width:45%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
vertical-align:middle;
text-align: center;
}
.col2-row1 {
margin-top: 2%;
display: inline-block;
background: transparent;
padding: 5px;
width: 45%;
color: #f8981d;
font-weight: bold;
font-size: 20px;
line-height: 20px;
vertical-align:middle;
text-align: center;
}
If you can pre-determine the height of the right-hand block of text, you can do something like the following (I set it at 206px):
<style>
#container {
width:940px;
margin:0 auto;
}
div.left {
width:460px;
margin-right:20px;
float:left;
display:inline;
}
div.right {
width:460px;
float:left;
display:inline;
}
div.clear {
clear: both;
}
div.left p {
height:206px;
line-height: 206px;
}
div.right p {
height:206px;
}
</style>
<div id="container">
<div class="left">
<h1>Exemption Reason</h1>
<p>Lorem ipsum</p>
</div>
<div class="right">
<h1>Documentation Required</h1>
<p>sit amet, consectetur adipiscing elit. Proin at nunc convallis, venenatis lectus auctor, porta nisi. Donec sit amet mauris non justo ultrices dignissim sed at ipsum. Aliquam accumsan faucibus nunc, id pulvinar massa consequat at. Pellentesque sed mauris leo. Nullam pulvinar sit amet tortor a suscipit. Ut varius et eros a aliquam. Donec tortor nisi, tristique at feugiat at, malesuada eu tortor. Pellentesque quis sapien mauris. Mauris pulvinar posuere auctor. Praesent nec felis at mi ultricies elementum. Nulla vitae pharetra mi, et semper ipsum. Etiam eget tristique mi. Vivamus rutrum ipsum dapibus enim malesuada sodales. Nullam rhoncus elit ut condimentum tincidunt. Quisque dapibus lorem eget euismod mattis. Praesent id consectetur urna.</p>
</div>
<div class="clear"></div>
</div>
If the height of the paragraph in the right hand column is dynamic and can not be determined beforehand, you can use JavaScript (here I'm using jQuery):
<style>
#container {
width:940px;
margin:0 auto;
}
div.left {
width:460px;
margin-right:20px;
float:left;
display:inline;
}
div.right {
width:460px;
float:left;
display:inline;
}
div.clear {
clear: both;
}
</style>
<div id="container">
<div class="left">
<h1>Exemption Reason</h1>
<p>Lorem ipsum</p>
</div>
<div class="right">
<h1>Documentation Required</h1>
<p>sit amet, consectetur adipiscing elit. Proin at nunc convallis, venenatis lectus auctor, porta nisi. Donec sit amet mauris non justo ultrices dignissim sed at ipsum. Aliquam accumsan faucibus nunc, id pulvinar massa consequat at. Pellentesque sed mauris leo. Nullam pulvinar sit amet tortor a suscipit. Ut varius et eros a aliquam. Donec tortor nisi, tristique at feugiat at, malesuada eu tortor. Pellentesque quis sapien mauris. Mauris pulvinar posuere auctor. Praesent nec felis at mi ultricies elementum. Nulla vitae pharetra mi, et semper ipsum. Etiam eget tristique mi. Vivamus rutrum ipsum dapibus enim malesuada sodales. Nullam rhoncus elit ut condimentum tincidunt. Quisque dapibus lorem eget euismod mattis. Praesent id consectetur urna.</p>
</div>
<div class="clear"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
var target_height = $('div.right p').height()+'px';
$('div.left p').css({
'height': target_height,
'lineHeight': target_height
});
});
</script>
PLease help!
This is what I have so far: http://beauxlent.com/nicole
When you click "one" "two" or "three", it takes you to a div that is still on the same page. However, I would like the div to stay within the right div and still on the same page used #tags. I've seen this done before.
<style type="text/css">
{
padding: 0;
margin: 0;
}
body {
text-align: justify;
overflow: hidden;
background: #F8F8F8;
font: -blocked- arial;
}
table, p {
display: none;
}
div {
width: 100%;
}
.container {width: 800px; display:block; margin:0px auto}
.left {width:200px; float:left; background: #eee; display:block; height:200px;
line- height:2}
.right {width:600px; float:right; background: #808080; display:block; height: 200px;
line-height:2; }
#o {position:absolute; right: 2000px;}
.blog {
background: 0;
position: absolute;
top: 150px;
left: 500px;
width: 290px;
height: 140px;
}
#omg {
z-index: 7;
position: absolute;
top: 1000px;
right: 0;
color: #000;
height: 1000px;
}
#plz {
z-index: 7;
position: absolute;
top: 9000px;
right: 0;
color: #000;
height: 9000px;
}
}
#nande a:hover {
color: #000;
}
#nande {
z-index: 7;
position: absolute;
top: 7000px;
right: 0;
color: #000;
height: 1000px;
}
body, table {
color: #fff;
}
font, table, tr, td, br, p {
font: -blocked- franklin gothic medium;
color: #fff;
}
#content {
width: 100%;
}
#main, #content {
border: 0px none;
background: #fff;
}
}
.framed {
background: #fff;
padding: 5px;
overflow: auto;
position: absolute;
top: 20px;
left: 0px;
}
</style>
<div id="boxed">
<div class="container">
<div class="left">
1
2
3
</div>
<div class="right">
<div id="omg">
<a name="uno"></a>
<div class="framed">
one
</div>
</div>
<div id="nande">
<a name="dos"></a>
<div class="framed">
two
</div>
</div>
<div id="plz">
<a name="tres"></a>
<div class="framed">
three
</div>
</div>
</div>
Tabbings you mean. This can be done too in CSS. Try to check it here -> http://css-tricks.com/functional-css-tabs-revisited/
HTML code:
<div class="tab">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1">Tab One</label>
<div class="content">
stuff
</div>
</div>
<div class="tab">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2">Tab Two</label>
<div class="content">
stuff
</div>
</div>
<div class="tab">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3">Tab Three</label>
<div class="content">
stuff
</div>
</div>
</div>
CSS code:
.tabs {
position: relative;
min-height: 200px; /* This part sucks */
clear: both;
margin: 25px 0;
}
.tab {
float: left;
}
.tab label {
background: #eee;
padding: 10px;
border: 1px solid #ccc;
margin-left: -1px;
position: relative;
left: 1px;
}
.tab [type=radio] {
display: none;
}
.content {
position: absolute;
top: 28px;
left: 0;
background: white;
right: 0;
bottom: 0;
padding: 20px;
border: 1px solid #ccc;
}
[type=radio]:checked ~ label {
background: white;
border-bottom: 1px solid white;
z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
z-index: 1;
}
Take a look at jQuery UI Tabs - very easy to implement.
Include
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
The jQuery
$(function() {
$( "#tabs" ).tabs();
});
The HTML
<div id="tabs">
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
<div id="tabs-2">
<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
</div>
<div id="tabs-3">
<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
</div>
</div>
If you only had to worry about Firefox and Webkit browsers, what CSS would you use to make the footer in the following HTML not rise above the bottom or the screen (and go lower if the body content pushed it)? Note: I don't want to add any of markup to the page.
<html>
<body>
<header>...</header>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
</body>
</html>
Here is some copy paste html. How do I need to modify the css to make it work?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
p {
margin-bottom: 10px;
}
article {
display: inline-block;
height: auto;
width: 69%;
}
aside {
display: inline-block;
height: auto;
width: 30%;
}
footer {
height: 30px;
}
</style>
</head>
<body>
<header>
<h1>Lorem Ipsum</h1>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu viverra mauris. Fusce at erat risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt orci eget justo ornare vel iaculis mauris commodo. Ut id leo ipsum. Donec nunc est, convallis sit amet vehicula eget, laoreet id odio. Proin vitae purus magna. Maecenas lorem lacus, convallis ac imperdiet in, ullamcorper sed leo. Maecenas suscipit justo at arcu placerat eu ultricies orci placerat. Etiam vel erat in metus porttitor tristique vel ultricies ante. Aliquam sed porttitor nunc. Sed venenatis, sapien lacinia laoreet facilisis, lectus turpis iaculis leo, nec rhoncus tellus erat bibendum felis. Integer cursus malesuada sem id vehicula. Duis venenatis pellentesque nisi ut vulputate. Nunc elit sapien, pulvinar blandit suscipit ut, imperdiet ut neque. Cras odio dolor, commodo vitae malesuada sed, tempus sed neque.</p>
<p>Sed nec ornare libero. Vivamus ut risus at ligula dignissim lobortis. Pellentesque dignissim iaculis fringilla. Quisque porta sagittis massa eu euismod. Vivamus nunc lectus, iaculis vitae tincidunt et, placerat at risus. Nunc elementum massa at ligula blandit quis volutpat nulla malesuada. Nunc felis massa, placerat at vehicula non, gravida a nibh. Fusce adipiscing magna et nisl aliquet vehicula posuere tortor tempor. Aliquam erat volutpat. Duis eu enim sit amet lacus hendrerit elementum vitae a purus.</p>
<p>Phasellus porttitor congue tellus, eget rhoncus eros consequat a. Donec faucibus lorem at sapien aliquam tempus. Sed sed vulputate magna. Proin eros felis, eleifend vitae posuere vel, dictum ut purus. Pellentesque id felis sit amet neque consectetur porta. Donec non tellus augue, a sollicitudin libero. Nullam blandit hendrerit lacus. Quisque ac libero sapien. Etiam luctus tellus non sapien fringilla ultrices. Aliquam ut erat ut sapien mattis rhoncus nec eu enim. Aenean elementum dui in ligula fermentum nec egestas dui luctus. Praesent sed purus id tellus lacinia aliquam. Donec luctus, metus ut pulvinar bibendum, sapien dui aliquet est, volutpat cursus enim massa non sapien. Quisque mollis nisl a arcu ullamcorper porta. Nunc dapibus pellentesque dui in varius. Donec et eros ut lacus commodo vehicula.</p>
</article>
<aside>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</aside>
<footer>
<span>Made by me.</span>
</footer>
</body>
</html>
Given the requirements of no extra markup and not caring about IE (does work in IE8), I present this solution (which does require the use of a fixed height header). I did have to use float rather than display: inline-block as my Safari 4.0 did not display it with min-height for this solution:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
/*below for illustration only*/
background: yellow;
}
#Header {
position: relative;
z-index: 1;
height: 60px;
margin-bottom: -60px;
/*below for illustration only*/
background: red;
opacity: .8;
}
#Article {
float: left;
min-height: 100%;
width: 69.9%;
vertical-align: top;
margin-bottom: -30px;
/*below for illustration only*/
background: blue;
}
#Aside {
float: left;
min-height: 100%;
width: 30%;
vertical-align: top;
margin-bottom: -30px;
/*below for illustration only*/
background: green;
}
#Article:before,
#Aside:before {
content: ' ';
display: block;
height: 60px;
width: 100%;
}
#Article:after,
#Aside:after {
content: ' ';
display: block;
height: 30px;
width: 100%;
}
#Footer {
position: relative;
z-index: 1;
height: 30px;
margin-top: -30px;
clear: left;
/*below for illustration only*/
background: pink;
opacity: .8;
}
</style>
HTML is just:
<body>
<div id="Header">Header</div>
<div id="Article">Article</div>
<div id="Aside">Aside</div>
<div id="Footer">Footer</div>
</body>
I think I figured this out:
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css">
<style type="text/css">
html {
background-color: orange;
height: 100%;
}
body {
background-color: yellow;
height: auto;
min-height: 100%;
position: relative;
}
ul {
list-style: none;
}
p {
margin-bottom: 10px;
}
header {
background-color: red;
display: block;
}
article {
background-color: blue;
display: inline-block;
margin-bottom: 30px;
vertical-align: top;
width: 70%;
}
aside {
background-color: green;
display: inline-block;
margin-bottom: 30px;
vertical-align: top;
width: 30%;
}
footer {
background-color: pink;
bottom: 0;
height: 30px;
left: 0;
position: absolute;
width: 100%;
}
</style>
CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
HTML:
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<div class="header"></div>
<div class="article"></div>
<div class="aside"></div>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
I think you're talking about the margin of 10-15 pixels below the footer. Try adding this code to your CSS;
body { margin-bottom:0px; }
The body has a default margin of 10-15 pixels so in order to remove it to flush your design to the top or bottom you have to tell the body to have a margin of zero.
Hope that helps.
*
{
display:block;
}
You are going to have to change the display to inline in your wrapper after that though.
First of all, no matter what you do, you'll need a wrapper div for the entire page. I usually call it #page_container or something. If you think about it, having a div container for the whole page doesn't defeat the essence of css style sheets. On the other hand, if you had a bunch of wrappers scattered around the html page, it could potentially get pretty messy with all that extra markup. So, I always use a page_container on my layouts, even if I don't put any css styling on it, I always have one. Basically, it will just act like a body tag, only allow you to style it.
With that said, there are a couple solutions if your layout was refined to:
<html>
...
<body>
<div id='page_container'>
<div id='header'></div>
<div id='contents'></div>
<div id='footer'></div>
</div>
</body>
</html>
Only Firefox you say? Did I hear that right? I don't think I've ever heard anyone say that before. In that case, its fairly easy. The easiest solution would be:
<html>
<head>
<title>Test page</title>
<style>
body{
background-color:green;
margin:0px;
}
#page_container{
width:700px;
margin-left:auto;
margin-right:auto;
display:table;
height:100%;
}
#header{
background-color:red;
text-align:center;
font-size:25px;
font-weight:600;
height:75px;
display:table-row;
}
#contents{
background-color:yellow;
display:table-row;
}
#footer{
background-color:blue;
height:25px;
display:table-row;
}
</style>
</head>
<body>
<div id='page_container'>
<div id='header'>Title of your page</div>
<div id='contents'>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
</div>
<div id='footer'>This is a footer</div>
</div>
</body>
</html>
I've been experimenting with some other css styling, and I think I almost have a layout that could be cross-browser compatible. I'll post it if I'm not too late.
Okay, here is the alternative css that I was talking about. It works in Firefox, Safari, and Chrome. IE7/IE6 don't work, you'd probably have to a little tweaking to get that working. Opera has a small bug with the body margins. Other than that, it uses just basic CSS (unlike the display:table that isn't very compatible).
<html>
<head>
<title>Test page</title>
<style>
body{
margin:0px;
background-color:green;
margin-top:75px;
margin-bottom:25px;
}
#page_container{
max-width:700px;
margin-left:auto;
margin-right:auto;
position:relative;
height:100%;
padding-top:75px;
margin-top:-75px;
}
#header{
background-color:red;
text-align:center;
font-size:25px;
font-weight:600;
height:75px;
z-index:2;
position:absolute;
top:0px;
width:100%;
}
#contents{
background-color:yellow;
width:100%;
min-height:100%;
}
#footer{
background-color:blue;
height:25px;
}
</style>
</head>
<body>
<div id='page_container'>
<div id='header'>Title of your page</div>
<div id='contents'>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
Foo bar baz<br/>
</div>
<div id='footer'>This is a footer</div>
</div>
</body>
</html>
Wow, if you just tweaked it a little and made it IE6-7 compatible, you'd be famous. I think this is the first solution I've seen.
Since you mentioned that your solution worked except for IE, all you need to do is use JS to enable the styling of HTML 5 elements:
http://medero.org/finally.html
That would make the styles apply, but it still looks like, at least in IE6 it needs some extra help.
Is this close to what you need for IE?
Working and tested on:
Google Chrome
Safari
Opera
Internet Explorer
Firefox
EDITED CODE (added overflow:auto; to #aside and #Article to fix the overflow)
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html,body{height:100%;width:100%;margin:0;padding:0;background-color:red;}
#Header,#Article,#Aside,#Footer{position:absolute;}
#Header{top:0;left:0;width:100%;height:60px;background-color:blue;}
#Article,#Aside{top:60px;overflow:auto;bottom:30px;}
#Article{left:0;width:70%;background-color:green;}
#Aside{right:0;width:30%;background-color:yellow;}
#Footer{bottom:0;left:0;width:100%;height:30px;background-color:pink;}
</style>
</head>
<body>
<div id="Header">Header</div>
<div id="Article">Article</div>
<div id="Aside">Aside</div>
<div id="Footer">Footer</div>
</body>
</html>
PS:
Background colors are illustrative, thus the css can me more compact by avoiding repeated attributes!
Another answer for those who only need to target the latest versions of browsers utilizing flexbox and viewport units.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 60px;
}
article {
flex: 1;
}
footer {
height: 30px;
}
</style>
</head>
<body>
<header>
<h1>Lorem Ipsum</h1>
</header>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu viverra mauris. Fusce at erat risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed tincidunt orci eget justo ornare vel iaculis mauris commodo. Ut id leo ipsum. Donec nunc est, convallis sit amet vehicula eget, laoreet id odio. Proin vitae purus magna. Maecenas lorem lacus, convallis ac imperdiet in, ullamcorper sed leo. Maecenas suscipit justo at arcu placerat eu ultricies orci placerat. Etiam vel erat in metus porttitor tristique vel ultricies ante. Aliquam sed porttitor nunc. Sed venenatis, sapien lacinia laoreet facilisis, lectus turpis iaculis leo, nec rhoncus tellus erat bibendum felis. Integer cursus malesuada sem id vehicula. Duis venenatis pellentesque nisi ut vulputate. Nunc elit sapien, pulvinar blandit suscipit ut, imperdiet ut neque. Cras odio dolor, commodo vitae malesuada sed, tempus sed neque.</p>
<p>Sed nec ornare libero. Vivamus ut risus at ligula dignissim lobortis. Pellentesque dignissim iaculis fringilla. Quisque porta sagittis massa eu euismod. Vivamus nunc lectus, iaculis vitae tincidunt et, placerat at risus. Nunc elementum massa at ligula blandit quis volutpat nulla malesuada. Nunc felis massa, placerat at vehicula non, gravida a nibh. Fusce adipiscing magna et nisl aliquet vehicula posuere tortor tempor. Aliquam erat volutpat. Duis eu enim sit amet lacus hendrerit elementum vitae a purus.</p>
<p>Phasellus porttitor congue tellus, eget rhoncus eros consequat a. Donec faucibus lorem at sapien aliquam tempus. Sed sed vulputate magna. Proin eros felis, eleifend vitae posuere vel, dictum ut purus. Pellentesque id felis sit amet neque consectetur porta. Donec non tellus augue, a sollicitudin libero. Nullam blandit hendrerit lacus. Quisque ac libero sapien. Etiam luctus tellus non sapien fringilla ultrices. Aliquam ut erat ut sapien mattis rhoncus nec eu enim. Aenean elementum dui in ligula fermentum nec egestas dui luctus. Praesent sed purus id tellus lacinia aliquam. Donec luctus, metus ut pulvinar bibendum, sapien dui aliquet est, volutpat cursus enim massa non sapien. Quisque mollis nisl a arcu ullamcorper porta. Nunc dapibus pellentesque dui in varius. Donec et eros ut lacus commodo vehicula.</p>
</article>
<footer>
<span>Made by me.</span>
</footer>
</body>
</html>