I have an arrow image that needs to immediately follow the period of the last sentence in each paragraph. This image is surrounded by an href that needs to link to another page. I cannot figure out how to get this arrow to automatically be positioned next to period of sentence (vs left or right aligned all the way to the edge.) Using background image doesn't really work for me because of the href around image. I know there are ways to link a div, but I'd prefer not to handle it that way if possible.
Here is live code: http://codepen.io/trevoray/pen/LVxYrv
HTML:
<div class="column-4-layout">
<div class="left-column">
<div class="column-container"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/financialPolicy-spl.jpg" />
<h2>Vision and Policies</h2>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque ac nunc eu placerat. Sed vulputate iaculis est vitae gravida. Praesent accumsan leo dapibus aliquam interdum. Vestibulum quis nisl volutpat, tempus metus id, scelerisque erat. Suspendisse sed vestibulum magna. Maecenas dignissim, neque ac accumsan molestie, eros felis sagittis sem, sed tempus nunc turpis sed ex. Praesent elit diam, bibendum sed aliquam vel, sollicitudin at turpis. Phasellus sagittis maximus vehicula. Donec vulputate fermentum ligula nec efficitur. Ut magna libero, pulvinar porttitor rutrum et, bibendum vitae libero. Phasellus ac elementum diam. Praesent scelerisque dui id nunc congue semper. <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/more-arrow.gif" width="15" />
</P>
</div>
<div class="column-container"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/financialPolicy-spl.jpg" />
<h2>Best Practices</h2>
<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In scelerisque ac nunc eu placerat. Sed vulputate iaculis est vitae gravida. Praesent accumsan leo dapibus aliquam interdum. Vestibulum quis nisl volutpat, tempus metus id, scelerisque erat. Suspendisse sed vestibulum magna. <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/189477/more-arrow.gif" width="15" />
</P>
</div>
</div>
</div>
</div>
CSS:
.column-4-layout {
color:#565657;
margin-bottom:100px;
padding-left:25px;
padding-right:25px;
}
.column-4-layout .column-container {
width:475px;
margin-top: 50px;
min-height:240px;
}
.tall-column-4 .column-container {
margin-top:40px;
min-height:0;
!important;
}
.column-4-layout .column-container img {
width:227px;
padding-right:15px;
padding-bottom:50px;
float:left;
}
.column-4-layout .column-container p img {
width:auto;
float:right;
padding-top:5px;
margin-right:10px;
display:inline-block;
}
.column-4-layout .left-column {
float:left;
}
.column-4-layout .left-column .column-container:first-child {
margin-top:0px;
}
.column-4-layout .right-column {
float:right;
}
.column-4-layout .right-column .column-container:first-child {
margin-top:0px;
}
Give the anchor display: inline-block.
a{
display: inline-block;
vertical-align: middle;
}
and remove unnecessary padding from the img tag which is inside anchor tag of p tag.
The exact css to use is:
.column-4-layout .column-container p a img {
padding: 0;
}
.column-4-layout .column-container p a{
display: inline-block;
vertical-align: middle;
}
Working Fiddle
find .column-4-layout .column-container p img and do following changes into your css file
.column-4-layout .column-container p img {
display: inline-block;
float: none;
margin-right: 10px;
padding-bottom: 0;
padding-top: 5px;
width: auto;
}
updated your codepen :http://codepen.io/anon/pen/wagvRg
Related
I have two divs with two main properties display block and width
#block1 {
display:block;
width:20%;
background-color:red;
height:100px;
}
#block2 {
display:block;
width:70%;
background-color:yellow;
height:100px;
}
<div id="block1">
</div>
<div id="block2">
</div>
when I add float propery it makes the two divs behave like an inline-block :
#block1 {
display:block;
width:20%;
float:left;
background-color:red;
height:100px;
}
#block2 {
display:block;
width:70%;
float:left;
background-color:yellow;
height:100px;
}
<div id="block1">
</div>
<div id="block2">
</div>
Why adding the property float:left makes the div behave like an inline-block
Using float takes the elements out of the normal document flow in a way that other inline elements can wrap around them; it does not make them behave like inline-block elements.
If you would like alternative ways to achieve the same effect, give a look at the following examples.
Example 1:
Here's an example using display: flex on the parent element to make the children stay on the same line.
body {
display: flex;
}
#block1 {
width: 20%;
background-color: red;
height: 100px;
}
#block2 {
width: 70%;
background-color: yellow;
height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
Example 2:
Here is an example using display: inline-block on both elements to make them stay on the same line. Also, font-size: 0 is used on the parent to ensure that the gap in-between vanishes.
body {
font-size: 0;
}
#block1 {
width: 20%;
display: inline-block;
background-color: red;
height: 100px;
}
#block2 {
width: 70%;
display: inline-block;
background-color: yellow;
height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
Example 3:
Here is an example using display: table-cell on both elements to make them stay on the same line, while display: table is used on the parent.
body {
width: 90%;
display: table;
}
#block1 {
width: 22.2222222%; /* 20% of 90% */
display: table-cell;
background-color: red;
height: 100px;
}
#block2 {
width: 77.7777778%; /* 70% of 90% */
display: table-cell;
background-color: yellow;
height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
You are correct in saying that this particular situation float behaves like inline-block. But in reality it just looks like it's behaving the same way. To show the difference... let's say you were to float:left with some text below it: then your div would appear to the left and the remaining available horizontal room would be filled with the text.
With float:
.floatie {
float:left;
width:170px;
height:170px;
background:blue;
}
<p>
Lorem ipsum dolor sit amet, <div class="floatie"></div>consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
But then if you display:inline-block you get a different result:
.floatie {
display:inline-block;
width:170px;
height:170px;
background:blue;
}
<p>
Lorem ipsum dolor sit amet, <div class="floatie"></div>consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
Adding the property left to your div's css haven't made them as inline-block. It has made them floated in the DOM.
A floated element is removed from the normal flow of the document (but not exactly like an absolutely-positioned element).
That's why the next element moves to the top row and sits next to the floated element.
If you want the next element to stay at the bottom row, you need to use the clear property.
#block1 {
display: block;
width: 20%;
float: left;
background-color: red;
height: 100px;
}
#block2 {
clear: both; /* NEW */
display: block;
width: 70%;
float: left;
background-color: yellow;
height: 100px;
}
<div id="block1"></div>
<div id="block2"></div>
I am working on my portfolio for school (I am a developer on Mediacollege Amsterdam) and I need help with my css. I have searched for answers, but I cannot get my page as desired. I have 3 divs, i want 2 of them to be next to each other and the third one below the first one, how would I do that?
I want the picture where it's at and I want the block that starts with "my tasks" where it is, but I want the block that starts with "About the game" positioned directly underneath the image
This is how I have the divs sorted, the div gameplay is the video, the div info is the "my tasks" block and the about div is the "about the game" block.
<div class="item">
<div class="legend">Fear The Blue</div>
<div class="content">
<div class="gameplay">
<video autoplay loop muted>
<source src="resources/video/portfolioVideos/FTB.webm" type="video/webm" />
<source src="resources/video/portfolioVideos/FTB.mp4" type="video/mp4" />
Video not available :(
</video>
</div>
<div class="info">
<span class="tit">My tasks:</span>
<ul>
<li>Puzzle logic</li>
<li>First puzzle</li>
<li>Second puzzle</li>
<li>Audio Manager</li>
<li>Controller support</li>
<li>Inventory</li>
<li>Outline Shader</li>
<li>Movement</li>
<li>Start menu</li>
<li>VR support</li>
<li>Keypad logic</li>
<li>Performance improvements</li>
<li>Door/teleport logic</li>
</ul>
<span class="tit">Engine:</span> Unity3D
<br />
<span class="tit">Language:</span> C#
<br />
<span class="tit">team:</span>
<ul>
<li>2 programmers</li>
<li>3 artists</li>
<li>2 mediamanagers</li>
</ul>
</div>
<div class="about">
<span class="tit">About the game:</span>
<ul>
<li>Single player puzzle game</li>
<li>Oculus support</li>
<li>Best played with controller</li>
</ul>
I've chosen to put this game on my portfolio, because this is my first oculus game. I am also proud of my audiomanager class, inventory class and the endproduct.
</div>
</div>
<div class="foot">
<img class="git" src="resources/images/resources/GithubIcon.png" />
<!--<img class="trailer" src="Images/resources/filmklapper.png"/>-->
<a><img class="game" src="resources/images/resources/controller.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac.zip" web="SchoolFiles/IDP/FearTheBlue/web-build/FearTheBlue.html" /></a>
<a><img class="game" src="resources/images/resources/oculus.png" win="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Win_Oculus.zip" mac="SchoolFiles/IDP/FearTheBlue/FearTheBlue_Mac_Oculus.zip" /></a>
</div>
</div>
My full css:
.item
{
font-family: normalFont, sans-serif;
margin: 0.9em auto 0.5em auto;
background-color: #222222;
border-radius: 1em;
display: block;
color: white;
width: 95%;
}
.item .legend
{
font-family: headerFont, sans-serif;
border-top-right-radius: .5em;
border-top-left-radius: .5em;
padding: 0.2em 0 0.2em 0.4em;
background-color: #4CAF50;
font-size: 1.2em;
}
.item .content{padding: .5em;}
.item .gameplay
{
max-width: 100%;
display: block;
margin: 0 auto;
}
.item .gameplay video{width: 100%;}
.item .gameplay img{width: 100%;}
.item .info
{
text-align: left;
display: block;
height: auto;
}
.item .info :visited,
.item .info a:link
{
text-decoration: none;
color: darkorange;
}
.item .info a:hover
{
text-decoration: underline;
color: lightblue;
}
.tit{color: #4CAF50;}
.item ul
{
padding: 0 0 0 1em;
margin: 0;
}
.item li{list-style-type: "- ";}
.item .foot
{
border-radius: 0;
border-bottom-right-radius: .5em;
border-bottom-left-radius: .5em;
background-color: #4CAF50;
width: 100%;
height: 2em;
}
.item .foot a
{
margin: 0.05em 0 0 0.6em;
display: inline-block;
width: 30px;
float: left;
}
.item .foot img
{
cursor: pointer;
width: 100%;
}
.item .foot .game, .item .foot .git{margin-top: 1px;}
#popup .message
{
text-align: center;
margin: 1em;
}
#popup
{
width:11em;
border-radius: .5em;
outline:none;
height:7em;
background-size: 100% 100%;
background-color: #333;
z-index:2;
position:absolute;
margin:0 0 0 -4.56em;
}
.input-group
{
width: 85% !important;
margin: .5em auto !important;
}
.input-field
{
background-color: #222 !important;
border: 1px solid #111 !important;
}
.input-field:hover
{
background-color: #111 !important;
}
.icon-background
{
border: 1px solid #111 !important;
}
#media screen and (min-width:600px){.item{width: 80%;}}
#media screen and (min-width:1000px)
{
.item{width: 60%;}
.item .legend{font-size: 2em;}
.item .gameplay
{
display: inline-block;
margin-top: .3em;
width: 25em;
float: left;
}
.item .about
{
width: 20em;
}
.item .info
{
display: inline-block;
margin: 0 0 0 1em;
max-width: 40%;
}
}
regards,
Dani
Try removing the property
float:left for the image div
Or you can put the two divs that want to be one below the other in one big div and the div you want at right outside in a different div.
From the information you provided, I think you're trying to make a 2 column layout. If you're floating all of your div containers to the left, since you added your "about" div last in your html and because your 2 first div's take up the full width of the container, your third div will be positioned below the div with the greatest height. If you want to avoid this You should use 2 divs (one for each column). Float them both left and add your content inside your respective columns.
.container {
position: relative;
width:100%;
}
.col1{
position: relative;
float:left;
width:60%;
}
.col2 {
position: relative;
float: left;
width: 40%;
}
img {
max-width:100%;
}
<div class="container">
<div class="col1">
<div class="image">
<img src="http://www.telegraph.co.uk/content/dam/pets/2016/03/18/bunny-large_trans_NvBQzQNjv4BqqVzuuqpFlyLIwiB6NTmJwfSVWeZ_vEN7c6bHu2jJnT8.jpg" />
</div>
<div class="about">
bla bla bla
</div>
</div>
<div class="col2">Cras quis venenatis est, in pretium eros. Duis a rutrum sem, ac ultricies nunc. Nulla non placerat turpis, a elementum lorem. Duis porttitor, tortor eu congue feugiat, arcu dolor pellentesque ante, sit amet ullamcorper mauris elit quis dui. Suspendisse sem lacus, viverra eget nunc id, ornare volutpat eros. Aliquam erat volutpat. Maecenas eu efficitur neque. Curabitur tortor ex, dictum tempor neque vitae, semper suscipit arcu. In at velit non velit molestie fringilla nec a nunc. Integer et tincidunt risus. Integer finibus, arcu eu hendrerit tincidunt, ante urna vestibulum ante, sit amet accumsan turpis purus id arcu. Curabitur non aliquet sapien, malesuada imperdiet orci. Sed posuere lectus ac nulla viverra, consequat semper lorem commodo. In fermentum nisl lacus, non congue velit sagittis sit amet. Phasellus mollis diam mi, id mollis lectus imperdiet ut. Mauris egestas neque urna, vehicula cursus nisi auctor vitae.
Aliquam ornare vitae urna auctor pretium. Ut vestibulum suscipit volutpat. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cras viverra lorem non ex maximus, tempus gravida justo tempus. Pellentesque fermentum volutpat tortor ut pellentesque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut efficitur mattis tortor. Fusce et lectus pulvinar, sollicitudin leo interdum, molestie risus. Nullam non consectetur arcu. Phasellus congue, eros vel euismod pulvinar, erat ex viverra velit, vitae bibendum arcu odio in dolor. Maecenas efficitur massa faucibus pretium accumsan. Duis id suscipit neque.
Nulla pulvinar tempus dui, vitae pellentesque orci dapibus id. Nullam hendrerit egestas dui. Nullam tempus mattis dui. Proin in rutrum purus. Vivamus tempor justo mauris, non bibendum dui luctus ac. Nunc vulputate libero velit, sed auctor nulla mattis ut. Nullam finibus mollis ante eget rhoncus. Suspendisse at purus ante. Vivamus tristique felis eu quam pulvinar, nec viverra quam porta. Phasellus gravida enim non sem facilisis maximus. In varius ac lacus nec convallis. Quisque molestie commodo mi in fermentum.
</div>
</div>
This is very basic CSS and I'm sure if you google enough you will find other grid methods (as mentioned above) that will make your layouts a whole lot easier. Hope this helps.
I expect my question has already been answered numerous times but I couldn't find it.
I'm trying to create 2 divs which are next to each other within a container. However as soon as I add content, they overflow. I've included a JSFiddle but for some reason my 2 divs are already appearing outside of the container - it doesn't on my local version. I'd like the div which the content is in to expand as well as the container. Hope I've explained it ok.
JSFiddle
* {
margin:0px;
padding:0px;
}
body {
background-color:#C0D498;
}
#page-wrap {
background-color:#FFF;
width:940px;
margin:0 auto;
margin-top: 40px;
border-radius: 5px;
padding: 20px;
}
.logo {
width:175px;
height:auto;
}
.banner {
width:755px;
height:175px;
float:right;
border-radius: 5px;
background-image:url('images/banner.png');
}
.contentWrap {
padding-bottom: 20px;
}
.contentMain {
width:70%;
background-color:blue;
float:left;
}
.contentSub {
width:30%;
background-color:red;
float:left;
}
replace your html with this:
<div id="page-wrap">
<div class="banner"></div>
<div class="contentWrap">
<div class="contentMain">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ac semper mauris. Maecenas orci dui, auctor ac auctor eu, pretium et mi. Donec interdum diam in est euismod gravida. Curabitur ligula tortor, bibendum nec odio maximus, efficitur lobortis mauris. Vestibulum in est rutrum, imperdiet turpis quis, elementum massa. Sed quis odio ut urna porttitor lobortis. Vivamus feugiat accumsan porttitor. Quisque sed ligula ac neque faucibus tristique. Suspendisse molestie eleifend purus vitae maximus. Proin posuere ante ut velit condimentum aliquam. Nullam pellentesque, mi rhoncus sagittis efficitur, libero ante scelerisque turpis, quis cursus dui libero eget dui. Suspendisse fringilla ut massa at aliquam. Praesent ut tempus erat, nec euismod ligula. Aliquam dui ex, viverra id commodo a, cursus sed sem. Praesent vel egestas nisl.</div>
<div class="contentSub">g</div>
</div>
<div style="clear:both; float:none;"></div>
</div>
The important part is this: <div style="clear:both; float:none;"></div>
and of course you can do it like this (recommended)
<div class="clear"></div>
and CSS
.clear{clear:both; float:none;}
.contentWrap { overflow: hidden; }
only this!
don't know if you want to float your banner
http://jsfiddle.net/flocko/fhrpghjb/
.contentWrap {
padding-bottom: 20px;
clear: both;
overflow: hidden;
}
as a rule of thumb: every element you float - you should clear in the parent element.
a clearfix class could help you on your way: http://nicolasgallagher.com/micro-clearfix-hack/
Okay, my problem is that #main_content is the child of #content but it will not display in #content. I need for #content to vertically expand to #main_content's size. Also, #content is a part of #main_wrap, which should extend all the way to #footer. Any help would be greatly appreciated.
#main_wrap {
width: 850px;
margin-top:15px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#top {
width: 850px;
height: 288px;
}
#top_content {
width:850px;
height:250px;
}
#nav {
background-color:#333;
height:38px;
#content {
width:850px;
padding-top:15px;
padding-bottom:15px;
}
#main_content {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
float:left;
width:850px;
height:auto;
}
#footer {
float: left;
width:100%;
height:250px;
background-image:url(images/footer_bg_blue.png);
background-repeat:repeat-x;
margin-bottom:0px;
margin-left:0px;
margin-right:0px;
text-align:center;
}
#footer_cont {
padding-top:15px;
padding-bottom:15px;
}
<div id="main_wrap">
<div id="top">
<div id="top_content">
</div>
<div id="nav">
</div>
</div>
<div id="content">
<!--<div id="sidebar">
</div>-->
<div id="main_content">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean libero risus, tincidunt a placerat vel, dignissim eget ligula. Mauris lobortis adipiscing orci, ut scelerisque nibh rhoncus nec. In metus ante, bibendum ac hendrerit et, vulputate id dolor. Sed et tellus at ipsum molestie tempus. Ut vitae vulputate sem. Sed sed ipsum elit, eget adipiscing magna. Sed et nisl eros, vitae convallis dui. Nullam nec feugiat nisi. Praesent in tortor ut enim molestie fermentum a et enim. Proin at porttitor ligula. Nulla vitae vulputate mauris. Donec auctor odio elit, vel egestas justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec suscipit pretium mollis. Sed egestas hendrerit quam eu pellentesque. Phasellus pharetra urna in mauris bibendum interdum. Pellentesque pellentesque pellentesque eros, eu adipiscing lectus fermentum id. Nullam iaculis, nisi auctor tincidunt hendrerit, eros quam accumsan elit, at cursus quam quam ac leo</p>
</div>
</div>
<!--</div>-->
<div id="footer">
<div id="footer_cont">
test
</div>
</div>
You can specify overflow: hidden; for your #content div to expand its height all the way to the footer, as you can see at this jsFiddle, http://jsfiddle.net/68FFL/2/. I'm not really sure why that works. If you look at the WordPress.com Mystique theme demo, you'll see that they use that rule to expand their #main div, otherwise it has no height like yours did.
I'm not entirely sure, but I think one of the reasons why you're #content div had no height was because it had child elements that weren't in the document flow on the inside, because they were floated. If you put another element inside that isn't floated, then the height of the div will expand, as you can see here, http://jsfiddle.net/68FFL/3/
I have a css layout which is centered, with 100% height. Everything looks good except that I need borders on the left and right side, with background images, that also must extend to 100% height of the page.
I've tried lots of different options but can't seem to get this worked out.
Please take a look at my code and let me know what I can do. Keep in mind everything but the right and left columns is positioned as I need it.
The left and right columns are leftbdr and rightbdr.
Thanks for any assistance.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Tmp Site Mockup</title>
<!-- <link rel="stylesheet" type="text/css" href="assets/css/core2.css" /> -->
<style type="text/css">
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
background:#E7E7E7 url(assets/img/bg.gif) repeat-x top;
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
h1 {
font:1.5em georgia,serif;
margin:0.5em 0;
}
h2 {
font:1.25em georgia,serif;
margin:0 0 0.5em;
}
h1, h2, a {
color:#9C090C;
}
p {
line-height:1.5;
margin:0 0 1em;
}
#container {
position:relative; /* needed for footer positioning*/
margin:0 auto; /* center, not in IE5 */
width:974px;
background:#F2F8FB;;
height:auto !important; /* all other browsers */
height:100%; /* IE6: treated as min-height*/
min-height:100%; /* all other browsers */
}
#leftbdr{
width:49px;
float:left;
position:relative;
background:url(assets/img/lftSideShadow.jpg) repeat-y right top;
}
#rightbdr{
width:11px;
float:right;
position:relative;
background:url(assets/img/rgtSideShadow.jpg) repeat-y top;
}
#header {
height:22px;
padding-top: 4px;
padding-right: 27px;
border: 1px solid #6B0100;
background-color:#CE0200;
color:#FFFFFF;
text-align: right;
}
#header p {
font-family: Tahoma, arial;
font-size:11px;
margin:0;
}
#subheader {
height:122px;
border-bottom:2px solid #B3B3B3;
background-color: white;
}
#welcome {
height:31px;
border-top:1px solid white;
border-bottom:1px solid white;
background-color: #C20F00;
}
#topnav {
height:62px;
background:#B1B1B1 url(assets/img/topNavBG.jpg) no-repeat left top;
}
#topnav p{
text-align:right;
padding-right:22px;
font-size:10px;
color:#333;
}
#content {
padding:1em 1em 5em; /* bottom padding for footer */
background:#F2F8FB;
}
#content p {
text-align:justify;
padding:0 1em;
}
#footer {
position:absolute;
height:72px;
width:100%;
bottom:0; /* stick to bottom */
background:#9C090C url(assets/img/footerBG.gif) repeat-x;
color:white;
}
#footer p.left {
float: left;
padding-left:15px;
padding-top:7px;
}
#footer p.right {
float: right;
padding-right:15px;
padding-top:7px;
}
</style>
</head>
<body>
<div id="container">
<div id="leftbdr" > </div>
<div id="header">
Home | Website.com | My Site | Logout
</div>
<div id="subheader">
</div>
<div id="welcome">
</div>
<div id="topnav">
<p><input name="radiobutton" type="radio" value="radiobutton" />All <input name="radiobutton" type="radio" value="radiobutton" />Documents <input name="radiobutton" type="radio" value="radiobutton" />People <input name="radiobutton" type="radio" value="radiobutton" />Google</p>
</div>
<div id="content">
<h2>Lorem ipsum dolor</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pellentesque arcu eget massa laoreet sit amet eleifend sapien accumsan. Sed ut tellus augue. Phasellus non blandit sem. Aliquam consequat ipsum rhoncus augue vehicula suscipit. Nunc laoreet gravida magna nec sodales. Cras quis lorem erat. Suspendisse eu urna in lorem placerat venenatis. Curabitur sed turpis in nulla convallis blandit. Donec ut tortor libero. Donec ante eros, facilisis vitae dictum eu, ornare nec libero. Nulla turpis purus, eleifend ac porta adipiscing, adipiscing non odio.
</p>
<h2>Vestibulum eu purus</h2>
<p>
Vestibulum eu purus ut enim eleifend sodales vel a purus. Aenean at orci dolor. Sed suscipit lorem nec est venenatis rutrum. Maecenas tempor, mi ac molestie suscipit, augue diam ultricies nibh, sit amet faucibus nulla leo vel nunc. Integer magna est, egestas nec placerat vel, pulvinar sed erat. Sed blandit ligula ac sapien venenatis rutrum. Aenean nec velit ut neque pharetra lobortis. Sed vulputate, ante ut euismod semper, nisi ante viverra ipsum, ac malesuada tellus nibh in tellus. Proin non velit ligula, eget egestas sapien. Curabitur ut viverra leo. Suspendisse pellentesque mauris lectus. Aenean sed arcu eleifend tortor cursus dapibus id in turpis. Nullam neque purus, congue id consectetur ut, dignissim id dolor. Praesent vehicula arcu vitae tellus lobortis mollis. Sed nec dapibus orci.
</p>
<h2>Maecenas faucibus sapien</h2>
<p>
Vestibulum at nibh nec elit pulvinar feugiat vel et erat. Maecenas faucibus sapien at enim dictum pharetra ac et augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In porttitor consequat auctor. Phasellus eu nibh nulla. Donec tempor scelerisque sodales. Fusce id neque quam. Cras sollicitudin dictum nisi, eu facilisis velit sodales quis. Aenean tempus congue erat in consequat. Curabitur odio ipsum, luctus sit amet accumsan quis, consequat nec elit. Nunc tristique nunc eget metus placerat vitae consequat erat tempus.
</p>
<p> </p>
</div>
<div id="footer">
<p class="left">
2010 Company Name, Inc. All Rights Reserved.<br />
<span style="color:#CCCCCC;">For internal use only by Company employees. Please do not disturibute.</span>
</p>
<p class="right">
Company Home | My Site | Log Out
</p>
</div>
<div id="rightbdr" > </div>
</div>
</body>
#container is the key. It takes up the full area of your page. You could apply a background/border style to it and/or <body> to achieve what you want.
For example a repeating image slice on <body> that is centered with repeat-y could give the effect of a graphical border without needing leftbdr and rightbdr.