In this html I basically have a sidebar-div and a page-div with the header, content and footer in it. I wanted the page-div to be in center, not the wrapper-div, therefore I added "left:-75px;" half the width of the sidebar-div for compensation. The only problem is when the browser-window get to small, bits of the sidebar go outside the screen.
What can I do to solve this problem? Here's my html. Thanks in advance!
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FRAME</title>
<style type="text/css">
<!--
html {
padding:0px;
margin:0px;
}
body {
background-color:#e1ddd9;
margin:0px;
padding:0px;
}
p {
margin:10px;
}
li {
list-style-type:none;
margin-left:-10px;
}
#wrapper {
position:relative;
width:1000px;
margin:0px auto;
padding:0px;
left:-75px;
}
#sidebar {
width:140px;
padding:0px;
float:left;
background-color:#ff99cc;
margin-top:130px;
margin-right: 10px;
}
#page {
width:850px;
padding:0px;
float:left;
overflow:auto;
}
#header {
height:100px;
background-color:#ff0;
margin-bottom:10px;
padding:10px;
}
#content {
background-color:#ffffff;
padding:10px;
}
#footer {
height:100px;
margin-top:10px;
background-color:#ff99cc;
padding:10px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Sit</li><li>Amet</li></ul>
</div>
<div id="page">
<div id="header"><p>This is the header</p></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare mauris vel nulla fermentum sed iaculis mi sollicitudin. Nullam tortor ante, suscipit eu rutrum nec, pharetra et turpis. Vestibulum a metus et massa porta tincidunt. Nam ac enim quam, vitae dictum tortor. Cras porttitor rutrum turpis, id scelerisque sem pharetra eget. Proin rhoncus tincidunt erat, a ornare nibh faucibus dictum. Nam leo dui, lacinia sed hendrerit in, tempus vitae libero. Nam non erat ac ante tempus adipiscing.</p>
<p>Nulla a sodales ipsum. Phasellus nec erat vitae enim laoreet sollicitudin. Morbi a egestas augue. Curabitur ac justo sit amet ipsum suscipit pulvinar eget vitae turpis. Sed iaculis arcu velit, sed vestibulum quam. Maecenas semper dolor ac leo laoreet sed vehicula libero scelerisque. In dui augue, faucibus id feugiat eu, vulputate id ante. Ut rutrum placerat orci, vitae lacinia lorem gravida et. Nullam semper eros lacus, sit amet tristique erat. Curabitur imperdiet lacus sit amet odio auctor congue. Sed ultricies erat et felis tincidunt pulvinar.</p>
<p>Cras enim ipsum, faucibus sed vulputate sit amet, dignissim non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rutrum accumsan nibh, pharetra pharetra sem luctus eget. Donec vel tincidunt enim. Nunc vel ligula massa, in varius ante. Cras laoreet dui volutpat libero ultricies hendrerit. Maecenas lectus orci, rhoncus at elementum id, lobortis in velit. Praesent elementum tincidunt dui, id porttitor urna sollicitudin eget. Nunc sed quam justo, et consectetur lectus. Suspendisse eleifend erat eget felis sollicitudin dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce tincidunt, metus eu elementum venenatis, nibh purus pulvinar purus, eget convallis turpis risus a turpis. Praesent vel felis erat. Aenean elit nunc, dictum sit amet faucibus a, vehicula eget velit.</p>
</div>
<div id="footer"><p>This is the footer</p></div>
</div>
</div>
</body>
</html>
I have to admit I'm not sure what you're trying to do. With a 850px long main div, if you want it centered in a small resolution (like 800x600), it's clear to me you won't be able to show the side pane at all.
So it seems you can either have it centered or the side pane completely centered. Are you looking for a solution where the horizontal scroll would appear if the screen is too small ?
<!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>FRAME</title>
<style type="text/css">
<!--
html {
padding:0px;
margin:0px;
}
body {
background-color:#e1ddd9;
margin:0px;
padding:0px;
overflow: hidden;
}
p {
margin:10px;
}
li {
list-style-type:none;
margin-left:-10px;
}
#wrapper {
width: 1150px;
margin: auto;
padding: 0px;
}
#sidebar {
width:140px;
padding:0px;
float:left;
background-color:#ff99cc;
margin-top:130px;
margin-right: 10px;
}
#page {
width:850px;
padding:0px;
float:left;
overflow:auto;
}
#fakebar {
width: 140px;
float: left;
}
#header {
height:100px;
background-color:#ff0;
margin-bottom:10px;
padding:10px;
}
#content {
background-color:#ffffff;
padding:10px;
}
#footer {
height:100px;
margin-top:10px;
background-color:#ff99cc;
padding:10px;
}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<ul><li>Lorem</li><li>Ipsum</li><li>Dolor</li><li>Sit</li><li>Amet</li></ul>
</div>
<div id="page">
<div id="header"><p>This is the header</p></div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ornare mauris vel nulla fermentum sed iaculis mi sollicitudin. Nullam tortor ante, suscipit eu rutrum nec, pharetra et turpis. Vestibulum a metus et massa porta tincidunt. Nam ac enim quam, vitae dictum tortor. Cras porttitor rutrum turpis, id scelerisque sem pharetra eget. Proin rhoncus tincidunt erat, a ornare nibh faucibus dictum. Nam leo dui, lacinia sed hendrerit in, tempus vitae libero. Nam non erat ac ante tempus adipiscing.</p>
<p>Nulla a sodales ipsum. Phasellus nec erat vitae enim laoreet sollicitudin. Morbi a egestas augue. Curabitur ac justo sit amet ipsum suscipit pulvinar eget vitae turpis. Sed iaculis arcu velit, sed vestibulum quam. Maecenas semper dolor ac leo laoreet sed vehicula libero scelerisque. In dui augue, faucibus id feugiat eu, vulputate id ante. Ut rutrum placerat orci, vitae lacinia lorem gravida et. Nullam semper eros lacus, sit amet tristique erat. Curabitur imperdiet lacus sit amet odio auctor congue. Sed ultricies erat et felis tincidunt pulvinar.</p>
<p>Cras enim ipsum, faucibus sed vulputate sit amet, dignissim non odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc rutrum accumsan nibh, pharetra pharetra sem luctus eget. Donec vel tincidunt enim. Nunc vel ligula massa, in varius ante. Cras laoreet dui volutpat libero ultricies hendrerit. Maecenas lectus orci, rhoncus at elementum id, lobortis in velit. Praesent elementum tincidunt dui, id porttitor urna sollicitudin eget. Nunc sed quam justo, et consectetur lectus. Suspendisse eleifend erat eget felis sollicitudin dapibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce tincidunt, metus eu elementum venenatis, nibh purus pulvinar purus, eget convallis turpis risus a turpis. Praesent vel felis erat. Aenean elit nunc, dictum sit amet faucibus a, vehicula eget velit.</p>
</div>
<div id="footer"><p>This is the footer</p></div>
</div>
<div id="fakebar"></div>
</div>
</body>
</html>
Related
I have this code:
/**
* CSSReset.com - How To Keep Footer At Bottom of Page with CSS
*
* Original Tutorial: http://www.cssreset.com/2010/css-tutorials/how-to-keep-footer-at-bottom-of-page-with-css/
* License: Free - do whatever you like with it! Credit and linkbacks much appreciated.
*
* NB: Make sure the value for 'padding-bottom' on #content is equal to or greater than the height of #footer.
*/
html,
body {
margin:0;
padding:0;
height:100%;
}
#wrapper {
min-height:100%;
position:relative;
}
#header {
background:#ededed;
padding:10px;
}
#content {
padding-bottom:100px; /* Height of the footer element */
}
#footer {
background:#ffab62;
width:100%;
height:100px;
position:absolute;
bottom:0;
left:0;
}
<!DOCTYPE html>
<!--[if lt IE 7]>
<style type="text/css">
#wrapper { height:100%; }
</style>
<![endif]-->
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="content">
</div><!-- #content -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam vel tellus eros. Cras id sapien vulputate, molestie mauris convallis, vestibulum mi. Nullam vestibulum interdum massa, quis feugiat dolor venenatis id. Nulla pellentesque pharetra consectetur. Curabitur placerat neque sed ex mattis lobortis. Quisque vitae hendrerit urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed odio sem, hendrerit in tortor in, cursus aliquam orci. Etiam sed dolor lobortis, fringilla elit nec, tincidunt odio. Maecenas et consectetur ante, quis ullamcorper ex. Quisque tempor mollis mattis. Aliquam tempus tellus eu posuere ullamcorper. Duis tempor libero vel quam accumsan congue.<br><br>
Curabitur porta congue eros eu vulputate. Donec a lacus a ante accumsan faucibus sit amet sit amet enim. Aliquam erat volutpat. Vivamus interdum dui nisi, sed placerat tortor consectetur at. Aenean volutpat ex non risus sagittis, nec pulvinar justo consequat. Proin eget nibh quis erat suscipit pulvinar. Etiam varius neque id dui volutpat, nec tempor eros venenatis. In ullamcorper dignissim lorem quis imperdiet.<br><br>
Nunc hendrerit maximus dignissim. Pellentesque eget dui erat. Curabitur sed justo accumsan, varius elit eu, fringilla ligula. Fusce varius magna id blandit placerat. Etiam aliquam nunc sed pulvinar tincidunt. Nullam ut sodales tellus. Mauris bibendum pretium dui a lobortis. Suspendisse sit amet consectetur nisl. Aliquam enim sem, tincidunt ut molestie ornare, tristique ut nibh. Nam lacinia scelerisque tortor, eget pretium eros aliquam quis. Mauris volutpat quis tellus eu pharetra. Ut a cursus turpis. Cras placerat ante sit amet leo ultricies convallis.<br><br>
Curabitur sollicitudin iaculis porta. Proin tellus libero, laoreet ut eros vitae, ultricies vestibulum est. Pellentesque iaculis, risus eget eleifend blandit, dui nisl venenatis mauris, at finibus orci turpis sit amet ligula. Nunc sed nisi sit amet diam congue maximus eget at metus. Duis suscipit magna a tortor porta laoreet. Donec ac magna non turpis porta varius eget ac urna. Cras et nibh odio. Nullam vitae sem justo. Morbi laoreet vehicula sem, elementum maximus erat egestas id. Curabitur id eros purus. Nullam eget nibh a augue tristique interdum nec eu nunc. Suspendisse potenti. Ut sed finibus eros. Ut in tortor et neque cursus tempor et sit amet orci.<br><br>
<div id="footer">
</div><!-- #footer -->
</div><!-- #wrapper -->
</body>
In IE 11.0 all ok, but in FF and Chrome there is a small vertical scrollbar. If I change in #footer bottom:0; to bottom:5px; all ok. But why? Not critical but I would be very interested how can I avoid it.
I'm trying to make a website layout like this:
|----------------------------|
| header |
|----------------------------|
| S | |
| I | |
| D | |
| E | |
| | |
|_____| Mainn |
| |
| |
| |
| |
| |
| |
|----------------------------|
But the content area text is going underneath the side section when I want it to go around it. I don't understand why it is doing this, and it would be great if someone could tell me why it's happening and what I can do to fix it.
CSS:
.menuebar {
position: absolute;
left:178px; top:92px; right:0; bottom:0;
}
.mainn {
position: absolute;
left:178px; top:92px; right:0; bottom:0;
margin: 0 auto;
padding-left: 200px;
padding-right: 200px;
max-width: 80px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5em;
color: #545454;
background-color: #ffffff;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
}
.side {
text-align: center;
}
.side > headers {
font-family: "Trebuchet MS", Helvetica, sans-serif;
text-align: center;
}
.side > bar {
position:absolute;
left:30px; top:430px; bottom: 0;
width: 240px;
border-radius: 10px;
background-color: #0e83cd;
padding-left: 20px;
padding-right: 20px;
}
Html:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AntRush-Home</title>
<meta name="author" content="Ant" />
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" href="css/nav/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/nav/demo.css" />
<link rel="stylesheet" type="text/css" href="css/nav/component.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/nav/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<section class="color-4">
<nav class="cl-effect-2">
<span data-hover="Start">Home</span>
<span data-hover="Buy">Contact</span>
<span data-hover="Pictures">Galary</span>
<span data-hover="Play">Creativity Lab</span>
</nav>
</section>
</div><!-- /container -->
<div class="side">
<bar>
<nav class="cl-effect-2">
<span data-hover="Info">News</span>
</nav>
<h4>Some Testing Text</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper euismod nulla quis mattis. Donec ac elit id arcu ullamcorper bibendum id a massa. Praesent eget blandit metus. Sed finibus nisl ac purus cursus, sed dapibus sem dapibus. Suspendisse gravida metus non posuere auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lobortis risus non libero eleifend aliquam eu in augue. Phasellus pellentesque nisl id lectus porta, a convallis dui varius. In et gravida</p>
</bar>
</div>
<center>
<h1>Welcome</h1>
<div id="mainn">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper euismod nulla quis mattis. Donec ac elit id arcu ullamcorper bibendum id a massa. Praesent eget blandit metus. Sed finibus nisl ac purus cursus, sed dapibus sem dapibus. Suspendisse gravida metus non posuere auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lobortis risus non libero eleifend aliquam eu in augue. Phasellus pellentesque nisl id lectus porta, a convallis dui varius. In et gravida. </p>
<p>Enjoy your stay,</p>
<p>-Ant</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut semper euismod nulla quis mattis. Donec ac elit id arcu ullamcorper bibendum id a massa. Praesent eget blandit metus. Sed finibus nisl ac purus cursus, sed dapibus sem dapibus. Suspendisse gravida metus non posuere auctor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lobortis risus non libero eleifend aliquam eu in augue. Phasellus pellentesque nisl id lectus porta, a convallis dui varius. In et gravida ligula, at rutrum sapien. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ultrices nulla id enim interdum, at tincidunt diam vestibulum. Sed nec velit eget ex semper blandit.
Ut tempus ornare maximus. Nunc tempor felis sit amet velit porttitor, eget interdum dui interdum. Cras nec gravida turpis. Morbi malesuada dui metus, vel aliquam augue tristique ac. Nam in erat at tortor gravida finibus. Sed ullamcorper imperdiet tellus. Nulla scelerisque lacinia mi, sed feugiat tellus consectetur sed. Fusce molestie quam et faucibus pellentesque. Suspendisse vel neque in ex placerat placerat. Phasellus congue accumsan feugiat. Integer tincidunt dignissim enim, non ornare sapien volutpat ac. Morbi tincidunt felis in libero elementum porttitor. Suspendisse faucibus venenatis suscipit. Morbi lacinia ac nibh in egestas. Curabitur accumsan mauris egestas purus efficitur rutrum.
Praesent maximus semper quam vel faucibus. Maecenas vel vehicula ipsum, eu tempor purus. Donec elementum vitae dui eu sodales. Ut eleifend erat non orci finibus, eu semper augue pharetra. Vivamus tortor dolor, faucibus id tincidunt congue, tempor at sem. Pellentesque mattis sapien ac sapien gravida consequat. Suspendisse porttitor pellentesque ipsum non rhoncus. Sed vestibulum nulla sed convallis condimentum.
Phasellus posuere dolor vitae nulla bibendum cursus ac eleifend lacus. Aliquam tempor in neque quis dictum. Mauris sed sapien vel lorem vestibulum facilisis. Fusce vulputate nulla non augue tempus commodo. Praesent elementum leo vel ultricies vulputate. Mauris at ipsum pharetra, vehicula tellus vel, pretium metus. Ut aliquet semper augue eu efficitur. Sed risus arcu, cursus et est nec, semper auctor ligula. Nulla convallis elit sodales mi pharetra, vel congue sapien euismod. Duis vehicula imperdiet ultrices.
Nunc condimentum, nulla ac ultrices ultricies, augue leo malesuada massa, in porttitor nisi tortor eu enim. Curabitur varius dolor ex, sit amet sagittis libero bibendum in. Duis et pulvinar nulla. Donec interdum id ligula a ornare. Vivamus elementum egestas fermentum. In pulvinar semper nibh a porttitor. Nulla facilisi. Proin leo mauris, finibus nec rutrum eu, egestas eget metus.</p>
</div>
</body>
</html>
your question was rather vague so I'll post a couple interpretations
https://jsfiddle.net/7daffjh8/3/
.side{
width:20%;
background-color:lightyellow;
padding:20px;
margin-right:20px;
float:left;
}
https://jsfiddle.net/7daffjh8/4/
.side{
width:20%;
background-color:lightyellow;
padding:20px;
display:inline-block;
float:left;
}
.content{
width:80%;
padding:20px;
display:inline-block;
}
https://jsfiddle.net/7daffjh8/6/
.main{
position:absolute;
width:100%;
height:100%;
}
.side{
width:20%;
background-color:lightyellow;
padding:20px;
display:inline-block;
position:absolute;
left:0;
top:0;
bottom:0;
}
.content{
width:80%;
padding:20px;
display:inline-block;
position:absolute;
top:0;
right:0;
bottom:0;
}
Hi I am looking to place the 'learn more' button at the bottom of the page. It's a div.learn-more inside a div.container. Is there a way to force the div.learn-more to the bottom of div.container, in a similar fashion that floating a div right/left will force it to the right or left side of the page? Thank you
http://jsfiddle.net/vaKsk/
html
<div class="container">
<div class="page1">
<nav class="navigation">
<ul>
<li>Home</li>
<li>Support</li>
<li>Sign Up</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="page1-content centered">
<h1> Generic Header</h1>
<h2> Generic Content 1</h2>
<h2> Generic Content 2</h2>
<h2> Generic Content 3</h2>
</div>
<div class="learn-more centered">
learn more
</div>
</div>
<div class="page2-content" id="text">
<p> 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. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc</p>
</div>
CSS
body {
background: blue;
color: white;
}
.centered {
margin: 0px auto;
position: relative;
vertical-align: middle;
text-align: center;
}
nav {
list-style: none;
}
.navigation ul li {
list-style: none;
float:left;
margin: 5px;
}
.page1-content {
clear:both;
}
.learn-more a {
color:red;
}
.page2-content {
margin: 200px 0 auto;
background-color: white;
color: black;
background-size: 100% 1000px;
margin-top: 200px;
}
Make the div.container positioned relative and the div.learn-mor positioned absolute with bottom of 0px.
CSS:
div.container
{
position:relative;
}
div.learn-more
{
position:absolute;
bottom: 0px;
}
You can try below code:
Working Demo
.container{position:relative; height:400px;}
.learn-more{position:absolute; bottom:0;text-align:center;}
I'm struggling to get my div (#content) to full 100% height of the page, if I resize my browser, my div (.divAboutRight) stretches accordingly to accommodate the content but my wrapper div (#content) does not? I have an image (#logo) which is centered to it's parent (#content) which it is not doing when the parent doesn't fill 100%.
I'm sure I'm missing something really basic.
Any assistance or guidance would be appreciated.
<style>
html{margin:0; padding:0; width:100%; height:100%;}
body{height:100%;min-height:100%; margin:0; padding:0; width:100%; background-color:#fb9f32; color:#FFF;}
.head{width:100%; height:60px; background-color:#FFFFFF;}
#content{width:100%;height:100%;min-height: 100%; position:relative; border:1px solid red;}
#Back
{
position:absolute;
left:0;
background:url(../images/Back.png) no-repeat;
background-size: 100% 100%;
float:left;
min-width:55%;
height:59%;
border:1px solid green;
}
#logo
{
display:block;
position: absolute;
top: 50%;
left: 50%;
max-height: 132px;
max-width: 133px;
margin: -66.5px 0 0 -66px;
z-index:9999999;
}
.divAboutRight{width:35%; margin-right:5%; margin-top:3%;float:right; border:1px solid yellow;}
</style>
<body>
<div class="head">
<!-- Header Content -->
</div>
<div id="content">
<div id="Back">
<!-- absolute positioned -->
</div>
<!-- Fixed logo to be center of content wrapper -->
<img id="logo" width="133" height="132" src="images/logo.png"/>
<div class="divAboutRight">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam id est leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In et volutpat metus. Cras et ante in enim sollicitudin facilisis quis eget lacus. Donec a justo in lacus ornare porttitor feugiat sit amet velit. Nunc iaculis, tellus quis sollicitudin placerat, leo nulla viverra lectus, id semper massa arcu in purus. Vivamus dictum venenatis metus quis viverra. Donec euismod, mauris vel aliquam convallis, lectus diam scelerisque lacus, id adipiscing orci augue nec arcu. Nulla molestie est lobortis tempor consectetur. Curabitur convallis malesuada velit et volutpat. Morbi a commodo velit. Integer malesuada nunc augue, ac convallis justo sollicitudin a. Nam nulla urna, facilisis quis ullamcorper dictum, venenatis eu ante. Ut consectetur sit amet lacus sed posuere. Nunc facilisis est eu ultrices scelerisque.
Cras feugiat tincidunt justo, et eleifend felis pretium ac. Nulla ornare, massa eu tincidunt tristique, sapien enim congue nisl, id pellentesque nisl lorem vel dolor. Mauris imperdiet, diam ac aliquam convallis, eros ante rhoncus justo, non malesuada mi nulla non sem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse potenti. Praesent sapien velit, sodales eget odio at, ullamcorper molestie nibh. Mauris iaculis posuere leo, non sollicitudin libero ullamcorper quis. Integer lobortis et eros vitae imperdiet. Ut ligula sem, tempor quis lobortis imperdiet, interdum ac nisl. Sed non lectus mauris.
Donec mattis lorem dolor, a feugiat neque dictum in. Nullam pharetra magna mi, quis hendrerit odio vestibulum id. Donec faucibus risus sed felis mattis pharetra vel a enim. Curabitur ultrices bibendum dapibus. Nulla sit amet metus mauris. Phasellus at tellus est. Mauris sagittis, eros quis laoreet sodales, tortor justo tempus dolor, et tincidunt dui tellus et erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque vitae pulvinar sapien. Praesent pellentesque metus sem, pellentesque ullamcorper augue pellentesque eu.
In neque lectus, ultricies ultrices nisi sed, commodo viverra justo. Cras quis neque vulputate, elementum ante non, pellentesque urna. Fusce id tempus magna. Fusce nec tortor id nulla pharetra sodales nec at tellus. Suspendisse gravida felis non turpis consequat, sit amet gravida risus ornare. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis elementum consequat mauris ut accumsan. Donec nec aliquet tortor. Donec turpis tellus, convallis at faucibus sed, volutpat ac turpis. Vestibulum consequat sapien mi, et ultricies libero convallis ultricies. Mauris placerat mollis elementum. Nulla molestie felis purus, sed hendrerit enim vehicula ac. Curabitur adipiscing fringilla ultricies. Nunc hendrerit libero non aliquet egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam mattis dui a enim interdum aliquet.
Nulla sagittis ligula enim, in vulputate lectus tincidunt ac. Sed imperdiet gravida orci at semper. Proin mollis adipiscing neque, vitae convallis risus rutrum eget. Praesent augue neque, lacinia nec tincidunt sed, elementum non sem. Suspendisse a mi condimentum, pellentesque lorem id, tempor turpis. In tortor nibh, convallis egestas ornare scelerisque, semper non nisi. Pellentesque ullamcorper euismod malesuada. Curabitur condimentum arcu id lorem posuere tincidunt. Proin convallis, elit vel fringilla tincidunt, eros diam ullamcorper lacus, eget posuere tortor velit vestibulum lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras sit amet pellentesque lacus. Maecenas molestie augue id ipsum feugiat, non pulvinar mi eleifend. Aenean augue metus, tincidunt non pellentesque eu, tristique quis metus. In a neque viverra, commodo velit ut, pretium diam.
</div>
</div>
</body>
From what I can see, Your div #content does not cover the full height because you have a div .head with a height of 60px;
Yo can either float your .head div or make it's position:absolute;
You could also include the .head div iside the #content div like this:
<body>
<div id="content">
<div class="head">
<!-- Header Content -->
</div>
<div id="Back">
<!-- absolute positioned -->
</div>
<!-- Fixed logo to be center of content wrapper -->
<img id="logo" width="133" height="132" src="images/logo.png"/>
<div class="divAboutRight">
<!-- Dynamic Content -->
</div>
</div>
</body>
If you are OK supporting IE9+, here is the code:
<style>
#content{
.
.
height:calc(100% - 60px);
.
}
</style>
Calc is supported in all modern browsers now.
On the other hand, if you can't support calc, here is one more way:
<style>
.head {
... // rest of head's css
z-index: 2;
}
#content {
position: relative;
box-sizing('border-box');
height: 100%;
padding-top: 60px; // height equal to the header
margin-top: -60px; // this will offset your content up again
z-index: 1; // make the content go BEHIND the head
... // rest of the CSS
}
</style>
note: this will make the scrollbar start from behind the head, because the content will be under the head.
I am new to the world of coding as well as CSS and am attempting to create a page that has 2 columns and multiple rows akin to a table however am unsure if this is the correct way to achieve the result.
NOTES
I am using an internal stylesheet before I copy it across to an external stylesheet.
I have simply named the columns leftnav and leftnav1 and content and content1. I know these names are not ideal however I am trying to ascertain the best way to code the page rather than worry about naming conventions at the moment.
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Language" content="en-us" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sample</title>
<link rel="icon" type="image/png" href="" />
<link rel="stylesheet" type="text/css" href="" />
<style type="text/css" media="all">
* {
margin: 0;
padding: 0;
}
body {
font-family: arial, verdana, sans-serif;
font-size: 0.8em;
}
#backdrop {
background-color: #000000;
width: 100%;
height: 10px;
}
#wrapper {
/* background-color: gray; */
width: 960px;
margin: 0px auto;
margin-top: 100px;
}
#logo {
float: left;
background-color: #E0EEEE;
margin-bottom: 10px;
}
#topnav {
float: right;
margin-right: 180px;
margin-bottom: 10px;
/* background-color: #C1CDCD; */
}
#topnav ul {
word-spacing: 5px;
}
#topnav ul li {
list-style-type: none;
display: inline;
}
#innerwrapper {
clear: both;
width: 800px;
margin: 0px auto;
}
#header {
background-color: #000000;
width: 700px;
height: 200px;
}
#innerhead {
color: #ffffff;
padding: 50px;
}
#leftnav {
float: left;
/* background-color: #838B8B; */
margin-top: 10px;
width: 200px;
}
#content {
float: left;
/* background-color: #CDC9A5; */
margin-top: 10px;
width: 500px;
}
#leftnav1 {
float: left;
/* background-color: #838B8B; */
margin-top: 10px;
width: 200px;
}
#content1 {
float: left;
/* background-color: #CDC9A5; */
margin-top: 10px;
width: 500px;
}
</style>
</head>
<body>
<div id="backdrop"></div>
<div id="wrapper">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="innerwrapper">
<div id="header">
<div id="innerhead">
Sample text
</div>
</div>
<div id="leftnav">About</div>
<div id="content">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div id="leftnav1">About</div>
<div id="content1">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div>
</body>
</html>
For dividing your page up into columns, you'd be best to invest some time learning grid CSS frameworks such as 960, Blueprint or OOCSS.
Once you have your page (or parts of your page, if desired) divided up into the required number of columns, you can divide each column up into either fixed-height or variable-height rows.
While it's noble that you want to work this out yourself, I would suggest that as you are "new to the world of coding", you might actually benefit more from looking at existing examples and solutions to this known design problem and adopting a best-practice approach from the outset.
EDIT
Ok, so given we're sticking with what we've got, let's look at a way to clean the styles up.
You're declaring the exact same styles in two places: Leftnav and Leftnav1 would be better changed to:
.leftnav { float: left; margin-top: 10px; width: 200px; }
You can then apply that class to both left nav containers. The same goes for your content and content1 styles.
To answer your original question, "is this the correct way to do it", I would say, "strictly speaking, no it's not. But it is one way to do it.
A better approach might be to use the following:
<body>
<div id="backdrop"></div>
<div id="wrapper">
<div id="logo">logo</div>
<div id="topnav">
<ul>
<li>about</li>
<li>browse</li>
<li>faq</li>
<li>contact</li>
</ul>
</div>
<div id="innerwrapper">
<div id="header">
<div id="innerhead">
Sample text
</div>
</div>
<div class="leftCol col300">About</div>
<div class="main">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
<div class="leftCol col300">About</div>
<div class="main">
Lorem ipsum dolor sit amet, at elementum neque vestibulum sollicitudin semper neque, vitae metus. Nibh ligula mi. Faucibus rutrum elit turpis, nec congue quam ipsum felis neque et, wisi amet, architecto eros congue. Maecenas suspendisse tellus arcu eget pharetra, rhoncus aenean sapien morbi nec arcu, vivamus aliquet lorem amet at, vestibulum purus sociis varius id. Imperdiet id magnis turpis beatae aliquet, vestibulum dolor nec eget eu cras lobortis, vel rerum, risus sed et, libero et non eros commodo. Taciti eu leo sollicitudin malesuada, nibh duis amet aenean, odio aptent ultrices. Tristique morbi nunc ullamcorper ut curabitur. Et a in ut sem varius, sem rutrum vehicula sem sed, at diam amet erat vel. Et sit in ante felis vitae sit.
Quam eget sed elit natoque velit, enim mauris mauris urna, integer amet tellus illo ipsum, dolor fermentum cursus enim mollis tristique porttitor. Non dignissim. Sit ligula leo tincidunt, justo ut ut placerat quisque non, risus nonummy. Ultrices mauris congue aliquam aliquam felis, at placerat, amet vestibulum dictumst pellentesque iaculis risus. Sem sed impedit nullam ultrices lorem aliquam, nulla tellus consequatur in ornare magna. Viverra amet pede in in ornare eu, id arcu. Justo mus suspendisse praesent et, amet mattis convallis ullamcorper felis, fermentum nibh at ac, ullamcorper ipsum auctor et maecenas, aliquam molestiae in qui. Massa elit suspendisse penatibus molestie libero dolor, non leo vitae, sollicitudin a, platea tristique iaculis, tortor augue non est. Ante rutrum quis pellentesque lacinia convallis non, vestibulum nibh nunc luctus nibh a, in amet, iaculis dui ornare pede laoreet eu. Cursus integer vehicula quis, justo eget purus mattis donec vestibulum nunc, nunc vel eros lectus.
</div>
</div>
<div>
</body>
Your three required styles then become:
.leftCol { float: left; }
.col300 { width: 300px; }
.main { overflow: hidden; }