|
CSS - Having Trouble Getting A Floating Footer
I am trying to get a footer to position properly on all pages of a site. Because of some absolute positioning I have done using CSS, I resorted to pushing the footer to be formatted that way also. Even though the absolute position is at 670 it is off the bottom of a 1024 x 768 standard webpage for some reason.
What I would like to do is get the footer just to display after the last element on the page but I understand that isnt possible since I am using CSS to absolutely position things. The code is something like this: Code:
<title>Program Title Stuff</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body background="#ffffff">
<img src="images/top-banner.jpg">
<div id="menubar">
<script src="bubblemenu.js"></script>
</div>
<p id="separator">
<img src="images/pagesep.jpg">
</p>
<p id="title">Section Title Goes Here</p>
<div id="contentblock">
{ some content goes here such as tables or text }
</div>
<?php
include("footer.inc");
?>
</body>
</html>
The footer.inc has just your typical links with a separator. The CSS to go with all this is basically font, color, and size. Most elements are absolutely positioned...here is the representative CSS: Code:
body {
margin: 0;
padding: 0;
border: none;
}
a:link {color:#6C9999; text-decoration:none};
a:visited {color:#990099; text-decoration:none}
a:hover {color:#CC3333; text-decoration:none}
#menubar {
position: absolute;
left: 25px;
top: 95px;
border: none;
text-decoration: none;
}
#separator {
position: absolute;
left: 250px;
top: 65px;
}
#title {
font-family: PenultimateLight, Tahoma, "Times New Roman", "MS Sans Serif";
font-size: 18px;
font-style: normal;
font-weight: bold;
color: #3A657B;
position: absolute;
left: 275px;
top: 75px;
}
#contentblock {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: normal;
color: #000000;
position: absolute;
left: 275px;
top: 110px;
height: 500px;
width: 650px;
}
#footer3 {
position: absolute;
top: 550px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
left: 285px;
}
#footer4 {
position: absolute;
top: 565px;
font-family: Arial, Helvetica, sans-serif;
font-size: x-small;
left: 370px;
font-style: normal;
}
I'd like to get away from absolutely placing the footer, as the content on each page varies in length. But I cant just center the footer, because other elements are blocked absolute and the footer ends up at the top of the page! Any suggestions? Thanks, Kkathman Similar TutorialsHere's the html and css for http://www.pxgo.com/lifepak-prime.php - What I really need help with is aligning the footer (I know absolute positioning is bad for me, but relative doesn't work either) and floating my image (which for some reason vanished once I added the floatleft class). Thanks in advance for any help! Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML><HEAD><TITLE>Lifepak Prime</TITLE>
<LINK rel="stylesheet" type="text/css" href="style.css"></HEAD>
<BODY>
<?php
include ("include/head.txt");
?>
<?php
include ("include/menu.txt");
?>
<div id="content"><h2>Lifepak Prime</h2><img class="floatleft" src="graphics/lifepak-prime.bmp" width="192" height="192" alt="Lifepak Prime" />
Lifepak Prime contains all the nutrition in Lifepak anti-aging formula <i>and more</i>. Add quality years to your life by providing the vitamins, minerals, and trace elements your body needs to protect and regenerate cells.
<br><br>Lifepak Prime all-natural dietary supplements addresses the specific needs of men over 40 and post-menopausal women with BioGinkgo 27/7 extract (ginkgo biloba), milk thistle, glutathione, alpha-lipoic acid, coenzyme Q10, and grape seed extract.
<br><br>Lifepak Prime provides 150 IU, or 500 % daily value, of vitamin E, increased levels of B6, B12, and zinc for optimal nutrition intake. Lifepak Prime also provides unique dietary components for bone health, as well as those that support memory and circulation.
<br><br>My family uses Lifepak so I'll be happy to answer questions about Lifepak on the <a href="http://www.pxgo.com/discuss/viewforum.php?f=9">Lifepak message board</a>. We'd also love to hear from other people who are using Lifepak.
<br><h2>Lifepak information</h2>Lifepak Prime is optimized for men over 40 and post-menopausal women. There is also a Lifepak for pregnant and lactating women (Lifepak PreNatal), Lifepak for woomen from 18-menopause (<a href="lifepak-women.php">Lifepak Women</a>), and adults from 18 to 40 (<a href="lifepak.php">Lifepak anti-aging formula</a>).
<br><br>Lifepak is a vitmain, mineral, phytonutrient supplement. Lifepak is much more than a multiple although it does address common deficincies:
<ul><li>Vitamins A, E, and B6
<li>Zinc, iron, calcium, and magnesium for healthy bones
<li>Alpha-lipoic acid, vitamins B9 (folic acid), B12, C, E, flavinoids, and carotenoids for the anti-aging processes of cellular protection and cellular regeneration.
</ul></div>
<br><br>
<?php
include ("include/ads.txt");
?><br><br>
<?php
include ("include/footer.txt");
?>
</BODY></HTML>
Code: BODY { margin-left: 0%; margin-right: 0%; margin-top: 0%; font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR:#000000; BACKGROUND-COLOR:#ffffff; }
A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
FONT {BACKGROUND: none; COLOR: #000000; FONT-SIZE: 13px; FONT-FAMILY: verdana, arial, sans-serif}
.titular {COLOR: #000000; background-color:#238c13;}
.negro {background-color:#000000; color: #FFFFFF; FONT-SIZE: 12px; FONT-FAMILY: verdana, arial, sans-serif; font-weight:bold;}
.floatleft {float: left; border=1; padding=1; margin: 4px;}
a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}
#head {
font-family:verdana, arial, sans-serif;
color:#000000;
font-size:16px;
font-weight:800;
background:#238c13;
padding:0px;
}
#head h1 {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-size:18px;
font-weight:800;
z-index:1;
}
#head a,
#head a:link,
#head a:visited,
#head a:active,
#head a:hover {
margin:0px 0px 0px 0px;
padding:20px;
color:#000000;
font-family:verdana, arial, sans-serif;
font-size:18px;
font-weight:800;
text-decoration: none;
}
/* All the content boxes belong to the content class. */
#content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:200px;
margin:30px 170px 20px 220px;
border:0px;
background-color: #ffffff;
padding:10px;
color: #000000;
font:bold 15px verdana, arial, sans-serif;
z-index:5;
}
#content h2 {font:bold 16px verdana, arial, sans-serif; padding:15px;}
#content a:link { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:visited { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:active { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#content a:hover { font-size: 15px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#navi {
position:absolute;
width:200px;
top:120px;
left:20px;
border-right:#238c13 2px dotted;
background-color:#ffffff;
padding:0px;
color:#238c13;
font:bold 13px verdana, arial, sans-serif;
z-index:2;
}
#navi A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#navi A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
#ads {
position:absolute;
width:130px;
top:100px;
right:10px;
border-left:#238c13 2px dotted;
background-color:#ffffff;
padding:10px;
z-index:3;
}
#footer {
position:absolute;
width:100%;
top:730px;
margin:10px 0px 0px 0px;
padding:10px 0px 0px 0px;
border-top:#238c13 2px dotted;
background-color:#ffffff;
z-index:4;
}
#footer A:link { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:visited { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:active { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #238c13; text-decoration: none; background-color: transparent; font-weight:bold;}
#footer A:hover { font-size: 13px; FONT-FAMILY: verdana, arial, sans-serif; COLOR: #FFFFFF; text-decoration: none; BACKGROUND-COLOR:#238c13; font-weight:bold;}
I'm Having problems getting my footer to stay below the content of my page. here's the link to my page. http://www.netgamegurus.com/ main page html Code:
<body>
<div class="container">
<div class="header">
<?php include_once("pages/header.php"); ?>
</div>
<div class="main_body">
<?php include_once("pages/index_body.php"); ?>
</div>
</div>
<div class="clearfooter">
</div>
<div class="footer">
<?php include_once("pages/footer.php"); ?>
</div>
</body>
</html>
main page CSS Code:
body {
background-color: #FFFFFF;
text-align:center;
}
body,html {
margin: 0 0 0 0;
padding: 0 0 0 0;
height: 100%;
width: 100%;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
.container {
position:relative;
padding:0px;
margin:0px;
margin-bottom: -150px;
width:100%;
height:100%;
background-color:#666;
}
.header {
}
main_body {
}
.clearfooter {
clear:both;
height:150px;
}
.footer {
position:relative;
height:150px;
margin: -150px auto 0 auto;
}
index_body html Code:
<body>
<div class="left_col">
<?php include_once("left_col_index.php"); ?>
</div>
<div class="right_col">
<?php include_once("right_col_index.php"); ?>
</div>
</body>
</html>
index_body CSS Code:
.left_col {
position:absolute;
padding:0px;
margin:0px;
top:175px;
left:0px;
width:150px;
height:100%;
background-color:#00F;
}
.right_col {
position:absolute;
padding:0px;
margin:0px;
top:175px;
left:150px;
width:857px;
height:105%;
background-color:#0C3
}
I've looked up a ton of info on this on google, but nothing seems to help. Anybody got an idea on this? I seem to recall seeing this trick, but now when I am looking around for examples I can't find any. What I want is a footer div (with the standard footer links, and email address) which will always be docked on the bottom of the viewing area of a browser. So if I scroll up and down the webpage / or resize the browser window, the footer will always appear, visible at the bottom of the window. Any ideas, examples? Ed I'm trying to float my navigation to the right side of the screen, but not messing up the order of the links. (left to right as in 1.2.3.4.5). The problem I'm having is the links go right, but so does the order of the links (they show right to left 5.4.3.2.1). Here's the CSS: Code:
ul#nav {
width: 890px;
font-size: 0.70em;
list-style: none;
padding: 0;
margin-top: 3em;
float: left;
clear: both;
}
ul#nav li {
background-color: #0776a0;
text-align: left;
float: right;
text-transform: uppercase;
border-right: 2px solid #279bd5;
display: block;
}
ul#nav li a, ul#nav li a:visited {
display: block;
padding: 0.4em 4em 0.4em 0.4em;
color: #FFF;
text-decoration: none;
}
ul#nav li a:hover {
color: #FFF;
background-color: #279bd5;
text-decoration: none;
}
ul#nav li a.current, ul#nav li a.current:visited, ul#nav li a.current:hover {
color: #FFF;
text-decoration: none;
}
And here's the html Code: <ul id="nav"> <li><a href="Home" title="Home">Home</a></li> <li><a href="Example" title="Example">Example</a></li> </ul> Will also post website with the example if asked. Just practicing but can anyone tell me why my footer doesn't stick to the bottom of the page? Also why does my page scroll sideways when I include my table? http://csstest.dmsbdesign.com/templates/templates%201/ css here Code: @charset "utf-8";
/* CSS Document */
body{
margin:0px;
background-color:#F7F7F7;
height:100%;
}
.quicklink{
padding-bottom:10px;
padding-top:10px;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
list-style-type:none;
width:220px;
text-align:left;
padding-left:5px;
}
#container{
background-color:#E1E1E1;
width:1000px;
margin-left:auto;
margin-right:auto;
padding-bottom:100px;
}
#header{
background-color:#666666;
width:1000px;
height:100px;
margin-left:auto;
margin-right:auto;
}
#logo ul{
margin:0px;
position:relative;
left:-15px;
bottom:60px;
}
#logo li{
text-align:right;
list-style-image: none;
list-style-type: none;
}
#logo{
position:relative;
left:5px;
top:10px;
}
#logo img{
height:75px;
width:75px;
}
#logo h1{
position:absolute;
margin:0px;
left:75px;
top:15px;
}
#logo h2{
position:absolute;
margin:0px;
left:75px;
top:45px;
}
#nav{
background-color:#999999;
width:1000px;
height:25px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#nav ul{
margin-top:0px;
}
#nav li{
display:inline;
list-style-type:none;
padding-right:80px;
}
#pictureDiv{
margin-top:10px;
width:940px;
height:240px;
margin-left:auto;
margin-right:auto;
background-color:#CCCCCC;
padding: 5px;
border:1px #000000 solid;
}
#contentDiv tr {
}
#pictureDiv h1{
position:relative;
margin:0px;
width:200px;
font-size:24px;
left:735px;
top:-150px;
color:#ff0000;
}
#pictureDiv img{
position:relative;
left:10px;
}
#contentDiv{
margin-top:10px;
width:900px;
height:325px;
margin-left:auto;
margin-right:auto;
}
#contentDiv table{
position:relative;
top:-510px;
left:550px;
width:375px;
}
#contentDiv tr{
}
#contentDiv td {
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #000000;
padding-bottom:10px;
padding-top:10px;
}
#contentDiv p{
width:75%;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
}
#contentDiv h1{
margin:5px;
}
#footer{
position:relative;
z-index:-1;
margin-top:-50px;
background-color:#666666;
width:100%;
height:100px;
margin-left:auto;
margin-right:auto;
}
html here Code: <!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>My Page</title>
<link href="css/css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<img src="../../images/Placeholder.png" />
<h1> My Webpage </h1>
<h2> My Slogan </h2>
<ul>
<li> Phone Number: 555-555-5555 </li>
<li> Address: 123 Main St </li>
</ul>
</div>
</div>
<div id="nav">
<ul>
<li>Nav 1</li>
<li>Nav 2</li>
<li>Nav 3</li>
<li>Nav 4</li>
<li>Nav 5</li>
<li>Nav 6</li>
<li>Nav 7</li>
</ul>
</div>
<div id="pictureDiv">
<img src="../../images/png/Placeholderstreched.png" />
<h1>Maecenas sollicitudin ultricies neque ut condimentum. Cras id dui dui?</h1>
</div>
<div id="contentDiv">
<h1>Nam vitae lorem!</h1>
<p style="width:500px;">Praesent molestie orci semper lectus aliquet ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut ut diam faucibus magna tempus viverra quis id lorem. Quisque ac pulvinar erat. Nullam pretium, ipsum non cursus facilisis; arcu massa viverra quam, sit amet venenatis arcu elit sit amet arcu. <br /> <br />Proin tempus blandit ante non ultrices. Fusce posuere adipiscing metus, a dapibus risus tristique a! Integer faucibus urna commodo metus suscipit sollicitudin. Duis gravida gravida rhoncus. Sed eget felis in risus euismod imperdiet. Proin quis libero quis purus tincidunt facilisis at non massa. Integer auctor aliquam lorem eget sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<ul style="position:relative; right:20px;">
<li>Suspendisse sagittis leo leo. Lorem.</li>
<li>Suspendisse elit velit, scelerisque ut.</li>
<li>Nullam nec magna risus, adipiscing.</li>
<li>Etiam luctus ullamcorper libero ac.</li>
<li>Aenean pretium orci mollis orci.</li>
</ul>
<ul style="position:relative; top:-116px; left:250px;">
<li>In quis arcu justo, sed.</li>
<li>Nullam elementum varius.</li>
<li>Nulla egestas vehicula erat.</li>
<li>Nam congue rhoncus gravida.</li>
<li>Pellentesque habitant morbi tristique.</li>
</ul>
<table width="290" border="0" cellspacing="0">
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="middle"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />
Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
<tr>
<td width="50"><img src="../../images/png/Placeholdesmallr.png"/></td>
<td width="321" valign="top"><span style="font-size:18px; font-weight:bold;">Mauris consequat eros</span><br />Aliquam ac odio sit amet ligula ornare.</td>
</tr>
</table>
</div>
</div>
<div id="footer">content for id "footer" goes here</div>
</body>
</html>
Hi everyone, I'm having some trouble positioning this footer to the bottom of the page. I'd like for the footer box to display directly under the content/navigation bar, with a gap of four pixels between the respective boxes. In action: http://www.stabhead.com/css/index.html Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title>Layout</title>
<style type="text/css">
<!--
body {
background-color: #FFFFFF;
color: blue;
text-align: center;
margin: 5px 0px 0px 0px;
}
#container {
position: relative;
width: 981px;
border: 0;
padding: 0;
margin: 0;
text-align: left;
}
#topbar {
position: absolute;
width: 981px;
height: 95px;
top: 0px;
background-color: #DDDDDD;
}
#loginbox {
position: absolute;
width: 249px;
height: 92px;
top: 97px;
background-color: #FFBD72;
}
#adbar {
position: absolute;
top: 97px;
left: 251px;
width: 730px;
height: 92px;
background-color: #949494;
}
#navbar {
position: absolute;
top: 193px;
left: 0px;
width: 117px;
background-color: #DDDDDD;
}
#content {
position: absolute;
top: 193px;
left: 121px;
width: 860px;
background-color: #DDDDDD;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
height: 64px;
background-color: #DDDDDD;
}
-->
</style>
</head>
<body marginheight="0" marginwidth="0">
<div align="center">
<div id="container">
<div id="topbar">topbar</div>
<div id="loginbox">loginbox</div>
<div id="adbar">adbar</div>
<div id="navbar">navbar</div>
<div id="content">content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>content<BR>
</div>
</div>
</div>
<div id="footer">footer</div>
</body>
</html>
The content may consist of something that is 500 pixels in height, or 10,000 pixels - it totally depends on how many words or images are in there, so the footer needs to grip on to the bottom of the content and stretch across the whole of the bottom of the page. If anyone could help me out here, it would be greatly appreciated. So I'm not really new to CSS or HTML though I might as well be considering the last time I did anything in either that had much substance was a class back in high school, about 6 years ago. This is what I want... DIV1 --------------- DIV2 --------------- DIV 3 2 would be in the center with 1 and 3 floating left and right respectively. Instead I'm getting this... DIV1 --- DIV2 ----------------------------------------- DIV 3 or DIV1 DIV2 DIV3 ...I hope you guys get the idea. I'm having trouble figuring it out. My ext CSS sheet, if you care to look, is he http:// livingway.110mb. com/mainstyle.css the frame in question, he http:// livingway.110mb. com/main.htm I'm hoping it'll let you all look at them. It's nothing professional yet because I'm only trying to give an update idea to our "webmaster". Anywho, let me know what I'm doing wrong. My brain hurts right now. I'm having trouble with my website structure... view this page for an example... css is here... The Footer (which currently consists just of the validation images) is suppossed to be at the bottom of the page... It works in IE except there is a little line between the images (it is also part of the link...), and it doesn't work at all in FF... how do I get rid of the line in IE, and what do I need to add or change in my css to get it to be viewed properly in FF? Thanks Bryan hi, i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com. does anyone know a tutorial on how to create one? thanks for the help in advance I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity? Hi Everyone, I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on... I think it's a question of Floating. This is in reference to http://www.arabellamusic.co.uk I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking: Code: HTML
<div class='inner'>
<div class='left'>
BLOG PHP HERE
</div>
<div class='right'>
SOME OTHER STUFF HERE
</div>
</div>
And the CSS:
.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }
If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...) So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure. I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff! Thanks in advance... James Learning CSS and trying to emulate the following table: Code: |--------------------------------------| | Text 1 |----------------| | | Text 2 | Inner box text| | | Text 3 |----------------| | |--------------------------------------| I can get a nested div to work vertically but not horizontally. I'm trying: Code:
div#container { float: left }
div#title { float: right }
<div id="container">
hello<br>hello
<div id="title">
Text 1<br />
Text 2
</div>
</div>
Which is producing: Code: |--------------------------------------| | Hello | | Hello | | |----------------| | | | Text 1 | | | | Text 2 | | | |----------------| | |--------------------------------------| Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx! Hi, Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it. Code:
<div class="cmsHeader">
<div style="float: left;">Page Name</div>
<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>
.cmsHeader{
background: #809096;
padding: 5px;
width: 98%;
color: #FFFFFF;
}
.cmsHeader a{
color: #FFFFFF;
text-decoration: none;
}
.cmsHeader a:hover{
text-decoration: underline;
}
I currently have the following layout Code:
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
how do i go about making the same layout but using CSS. Each <td> is 50% wide Hi im experiencing big problems with creating this layout. I spent whole day with positiooning this divs but i cant do this final layout. Everytime i want to float divs to left DIV 1 and DIV 2 are ok but DIV 3 jump to new line under DIV 2 and dont fit the gap between DIV 3 and div 1 . Can someone please help me ? Thanks ... link to image : xipic.eu/ufiles/njf25uy8_divs.png http://jordanmeeter.com/new/links.php If you view that page in Firefox, it displays how it is supposed to. But if you view the page in Internet Explorer, you can see that it is severely ****ed up! Any suggestions? Thanks, Jordan I have a 4 column div layout using floats. When I resize the browser the text in the columns goes outside of the div, and over everything below it. Is there any way to insure that as the browser is resized the text will stay inside it's div? Here's an example of my code: CSS: Code:
div#middle {
line-height: 130%;
text-align: left;
margin-left: auto;
margin-right: auto;
min-width: 800px;
}
div#featured {
background-color: #666;
color: #333;
border-right: 1px solid gray;
width: 30%;
float: left;
padding: 1em;
font-size: 14px;
}
div#snippets {
background-color: #444;
color: #333;
width: 20%;
float: left;
padding: 2em;
font-size: 12px;
}
div#tools {
color: #333;
background-color: grey;
width: 150px;
float: left;
padding: 1em;
}
div#ads {
background-color: #444;
color: #333;
width: 100px;
float: left;
padding: 1em;
}
HTML: Code: <div id="middle" class="minmax"> <!-- Main Articles --> <div id="featured" class="vsize"> <h1>Featured Header</h1> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <!-- Short Articles --> <div id="snippets" class="vsize"> <h1>Snippets Header</h1> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p> </div> <!-- Search, other tools, event calendar --> <div id="tools" class="vsize">Tools</div> <!-- Ads --> <div id="ads" class="vsize">Ads</div> </div> Hi Guys, Am farely new to CSS and was workin on a wordpress site. when I started getting this error ... Now what I want is three DIVs to be placed side by side on the same background image ... so I instill a wrap ... I want them to look something like this ... http://img244.imageshack.us/img244/8750/wantga3.jpg Here is the code am using .... Code: /* bottom page
================================================= */
#bottom {
width: 1000px;
background: #95A566 url("images/bottom.gif") repeat-x top left;
}
#wrap {
padding-top: 3%;
padding-left: 0;
width: 1000px;
}
#wrap
a:hover {color: #000;}
#wrap ul {
margin-left: 0px;
list-style-type: none;
}
#wrap ul li {
background: url("images/li_bottom.gif") no-repeat;
padding-left: 25px;
background-position: 0 0.4em;
}
.tools {
padding-left: 25px;
background: url("images/leaf2.gif") no-repeat top left;
margin-top: 1.5em;
}
.left {
width: 25%;
float: left;
margin-left: 10%;
}
#bottomnav li a span {
display: none;
}
#bottomnav li a:hover span {
display: inline;
}
.center {
width: 25%;
float: left;
margin-left: 2.5%;
}
#bottomnav li a span {
display: none;
}
#bottomnav li a:hover span {
display: inline;
}
.right {
width: 25%;
float: left;
margin-left: 2.5%;
}
And the Implementation .... Code: <div id="bottom">
<div id="wrap">
<div class="left">
<h3 class="tools">Recent Posts</h3>
<ul>
<?php get_archives('postbypost', 10); ?>
</ul>
<h3 class="tools">Toolshed</h3>
<?php include (TEMPLATEPATH . "/bottomnav_menu.php"); ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
</div><!-- end left -->
<div class="center">
<h3 class="tools">Recent Posts</h3>
<ul>
<?php get_archives('postbypost', 10); ?>
</ul>
<h3 class="tools">Toolshed</h3>
<?php include (TEMPLATEPATH . "/bottomnav_menu.php"); ?>
<?php include (TEMPLATEPATH . "/searchform.php"); ?>
</div><!-- end center -->
<div class="right">
<h3 class="tools">Recent Comments</h3>
<p><?php mdv_recent_comments(8, 13, '', ' [...]<br />', true, 0); ?></p>
</div><!-- end right -->
Now ... this gives me a perfect view in FireFox .... http://img148.imageshack.us/img148/9121/firefoxej7.jpg But Internet Exploder messes up .... and pushes everything to the right ... http://img148.imageshack.us/img148/5365/ievs9.jpg Can you guys suggest approprate solutions for this Any help would be much appreciated.... Thanks, Abhi |
|||||||