|
CSS - 2 Columns Growing To The Same Length
Hi everyone.
This is my first venture into laying out pages using style sheets. If you have a look at the attached image you will see what I need done. Please ignore the pink lines, it's ust my graphic designer slicing up images. I'm pretty sure that I can create the colors, borders, positioning etc. I just don't know how to make the left column grow with the right column when more text is added. Help anyone? Thanks in advance. Similar TutorialsAlright, I am new to these forums since the other handful I have went through could not help me out. Here is my situation, I have a layout I am creating for a final project, and I have it set up so that the navigation is in a left column and the content for the actual page is in a right column, right. Both are right next to eachother which you can see below in this image: http://img232.imageshack.us/img232/...sitebug5la1.png My issue is that once the content within the Right Column expands beyond the browser and creates a scroll bar, the left column no longer expands it's background image to match up. All containers and elements have their height set to 100% that are involved. HTML: 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" lang="en" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/css; charset=ISO-8859-1" /> <title>Digital Foundations Final Project</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="allcontent"> <!--PRINT LOGO--> <div id="logo_print"></div> <!--LEFT COLUMN--> <div id="left_column"> <!--NAVIGATION--> <ul> <li id="home"><a href="index.html"></a></li> <li id="students"><a href="students.html"></a></li> <li id="faculty"><a href="faculty.html"></a></li> <li id="facilities"><a href="facilities.html"></a></li> <li id="maps"><a href="maps.html"></a></li> </ul> <!--RIT LOGO--> <div id="logo_rit"><a href="http://www.rit.edu"></a></div> </div> <!--RIGHT COLUMN--> <div id="right_column"> <!--CONTENT--> <div id="header_home"></div> <div id="content"> <p class="text">Fusce ut justo sit lectus. Duisque dolorem in non erat, congue nullam fermenterdiet imper velit. Nam rutrum velis ac, doloreet ames iacus por sit amet malestibus sempus. Vivamus dissim et leo, pede sit sit ametus eu malestie vehiculis nonummy a, rhoncus ipsum primis senean ligula, felis et, ac risus</p> <p class="text">; In cubia tor varius met, venenatoque estibus et nunc vitae odio eget, loreet, blandis vulputate in, nunc ipsum. Nunc. Mauris. Suspendum. Nulla urna quam nunc. Nullam anteget dolorem in, vel, wisi. Nam primis varius. Quis quis nunc gravida. Vest eget hend ipsum sagittis, in et orci eu magna liberos</p> <p class="text">Integet in dui aliquet. Morbi eleifendum. Quis ligula, magnisse bibero nisl pede, congue nec vulputate ipsum dolor. Nulla varius ipsum primis neque. Suspend ero liberos in accumsan quis nonummy condit ametus non luctus. Pellent posuere consequam quam rhoncus orna. Duis met lectus lectum wisi at a or</p> <p class="text">atis pellus felit, erat turpiscing ris nullamcorper estibus non orci sempus. Classa ante in ornaretra tempus ac augue. Morbi ut neque. Sed sodalesuada sit a, cursus et dolor, aliquam et, diam rutrum sempus orci bibendis lor. Nam eu convallicies metuer leo. Vivamus erat. Vivamus sit lacus wisis sit a</p> <p class="text">wisi. Sed ut, condissim turpis wisi. Aliquat libero. Cras dictus dictus in augue nunc. Donec, diam sed, eget, at ligula mollicies at eu wisi. Vestassa met diam varius. Quis parturpis. Nunc a mauristiquat faucibus sapibus a, magna arcu ad lacilis imper commodo et fermenas sed, phare. Alique euismod p</p> </div> </div> </div> </body> </html> CSS: Code:
html, body {
background-color: #262626;
margin: 0;
padding: 0;
height: 100%;
}
#allcontent {
width: 800px;
margin: 0 auto 0 auto;
padding: 0;
height: 100%;
min-height: 100%;
}
#logo_print {
width: 702px;
height: 209px;
background-image: url(images/logo_main.png);
background-repeat: no-repeat;
margin: 0;
}
#logo_rit {
width: 204px;
height: 51px;
background-image: url(images/logo_rit.png);
background-repeat: no-repeat;
margin: 50px 0 10px 0;
}
#logo_rit a{
width: 204px;
height: 51px;
background-image: url(images/logo_rit.png);
display:block;
}
/*----LEFT SIDE OF PAGE----*/
#left_column{
background-image: url(images/BG_left.png);
background-repeat: repeat-y;
margin: 0;
width: 204px;
height: 100%;
float: left;
}
/*--NAVIGATION--*/
ul{
margin: 0;
padding: 0;
list-style: none;
}
li#home{
background-image: url(images/nav_home.png);
width: 205px;
height: 52px;
display: block;
}
li#home a{
background-image: url(images/nav_home.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#home a:hover{
background-image: url(images/nav_home.png);
background-position: 204px 0;
}
li#students{
background-image: url(images/nav_students.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}
li#students a{
background-image: url(images/nav_students.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#students a:hover{
background-image: url(images/nav_students.png);
background-position: 204px 0;
}
li#faculty{
background-image: url(images/nav_faculty.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}
li#faculty a{
background-image: url(images/nav_faculty.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#faculty a:hover{
background-image: url(images/nav_faculty.png);
background-position: 204px 0;
}
li#facilities{
background-image: url(images/nav_facilities.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}
li#facilities a{
background-image: url(images/nav_facilities.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#facilities a:hover{
background-image: url(images/nav_facilities.png);
background-position: 204px 0;
}
li#maps{
background-image: url(images/nav_maps.png);
background-repeat: no-repeat;
width: 205px;
height: 52px;
}
li#maps a{
background-image: url(images/nav_maps.png);
background-position: 0 0;
height: 52px;
width: 205px;
display: block;
}
li#maps a:hover{
background-image: url(images/nav_maps.png);
background-position: 204px 0;
}
/*--END NAVIGATION--*/
/*----RIGHT SIDE OF PAGE--*/
#right_column{
background-image: url(images/BG_right.png);
background-repeat: repeat-y;
width: 498px;
float: left;
margin: 0;
height: 100%;
}
#header_home{
width: 498px;
height: 71px;
background-image: url(images/header_home.png);
}
#header_students{
width: 498px;
height: 71px;
background-image: url(images/header_students.png);
}
#header_faculty{
width: 498px;
height: 71px;
background-image: url(images/header_faculty.png);
}
#header_facilities{
width: 498px;
height: 71px;
background-image: url(images/header_facilities.png);
}
#header_maps{
width: 498px;
height: 71px;
background-image: url(images/header_maps.png);
}
#content {
width: 498px;
background-image: url(images/BG_right.png);
background-repeat: repeat-y;
}
p.text{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: left;
padding: 10px 10px 10px 10px;
text-indent: 20px;
}
/*---Letter Linking--*/
p.letters{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: center;
}
p.letters a{
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: center;
color: #FF6600;
}
p.letters a:hover{
color: white;
text-decoration: underline, overline;
}
/*---PROFILE IMAGE SETTINGS--*/
.profile{
float: left;
margin: 10px 10px 10px 10px;
width: 200px;
height: 200px;
}
.profile_text{
font-weight: normal;
font-family: Times New Roman, Times, Palatino Linotype, Book Antiqua, Serif;
text-align: left;
}
.bold{
font-weight: bold;
}
Both the CSS and XHTML are valid Any help is much appreciated. I have a three column layout. The third column is empty except for a background image which I'd like to be the same length as the main (content) centre column. This would ensure the background image in the right column is at the same length as the main content Any ideas how I can do that? The site is weary.me.uk/MT and the CSS is weary.me.uk/MT/css/threeColumn.css Thank you so much Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg Hi everyone, I am trying to create a div that will "float" over an image when the mouse is moved over the image. I have got the div to appear and disappear when the mouse is hovered over the image, however, unless the positioning is absolute the page grows according to the size of the floating div. Below is the code I have used. I am almost certain there is a better way to do this. Possibly without the javascript. Any suggestions would be greatly appreciated! CSS: Code: #test {
background-color: #6374AB;
display:none;
position: relative;
top: -52px;
z-index: 2;
width: 400px;
}
#container {
background-color: #c0c0c0;
width: 500px;
border: 1px solid #000;
padding: 10px;
}
#fakeImage {
background-color: #00ff00;
width: 100px;
height: 50px;
border: 1px solid #000;
}
.opaque {
opacity: .7;
filter: alpha(opacity=70);
}
javascript: Code: function makeVisible(whichNavs)
{
document.getElementById(whichNavs).style.display="block";
}
function makeInvisible(whichNavs)
{
document.getElementById(whichNavs).style.display="none";
}
HTML: Code: <div id="container">
<div id="fakeImage" onMouseOver="makeVisible('test');" onMouseOut="makeInvisible('test');"><A HREF="javascript:">expanding link</A></div>
<div onMouseOver="makeVisible('test');" onMouseOut="makeInvisible('test');" id="test" class="opaque">shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf<br>
shuuuuf zdf dfdf </div>
</div>
Hello, I'm trying to make the left and right divs increase length with the centre (content) div. http://offhourscomputing.com/test.htm I've tried experimenting with using 100% and auto for the height, but that either makes the left and right sides exactly 100% of the height space in my browser or makes them disappear (using auto). Thanks. The picture you can see is part of a PSD which I'm now "converting" into html... anyway, I'd like to know whether there is a CSS attribute that can define the exact width of borders? Our pages all validate and work fine in all browsers (opera, firefox, mozilla, ie6, 5.5, nn >= 4.8) but in ie 5.01 the page content is far too long...a badly drawn ascii example: normal view: nav | content nav | content nav | content footer-------- problem in ie 5.01 Code: | content
| content
| blank
| blank
nav | blank
nav | blank
nav | blank
| blank
| blank
| blank
| blank
footer--------
Hope that makes some kind of sense. Basically IE is pushing the nav down, but it also seems to be adding the contents height below the nav as well Hi folks. I'm so new at CSS it's sad. I'm using a css template and I can't figure out how to get the page shorter. I tried adding overflow, tried setting it to auto or inherit. Pretty sure I'm way off. I see in the stylesheet it's set to be 1100px but I don't need it that long on every page. This is my first post here so I will wait to see if anyone wants me to post the stylesheet. Thanx so much for the help! So, I want it so that depending on how much content there is on my page, it will be longer or shorter, so I don't have to stick to a fixed height. Draft: I was thinking I need to use a code similar to this link. Would anyone care to help me out? Hi, I need some expertise in trying to get equal length columns on a site. I'm completely revamping a site and having trouble with a two column layout. The right column just stops halfway down the page. What am I doing wrong. The CSS is body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; } p { padding: 10px; } ul { list-style-type: disc; display: list-item; } li { } h1 { padding: 10px; text-align: right; font-size: 20px; } h3 { font-size: 14px; font-weight: bold; } ,clear { clear: both; display: block; height: 1px; overflow: hidden; margin: 0; padding: 0; } #wrapper { margin: 0 auto; float:left; width: 100%; } #topadsense { float:left; padding: 10px 10px 10px 10px; } #bookmarking { float:left; padding: 10px 10px 10px 10px; } #printerfriendly { float:right; padding 10px 10px 10px 10px; } #content { float: left; color: #333; background: #FFFFFF; width: 50%; display: inline; } #pagecontent { float: left; color: #333; background: #FFFFFF; width: 75%; display: inline; } #header { color: #333; width: 100%; float: left; margin-left: 0px; margin-right: auto; height: 250px; background: #FFFFFF; } #pageheader { color: #333; width: 100%; float: left; height: 75px; background: #FFFFFF; } #footer { clear: both; width: 100%; position: relative; text-align: center; color: #000; background: #FFFFFF; } #footerbreak { width: 100%; height: 25px; clear: both; margin-left: auto; margin-right: auto; text-align: center; color: #FFF; background: #000000; } #supportfooter { float:left; } #navigation { float: left; width: 100%; height: 25px; color: #333; background: #CC0033; } #leftcolumn { color: #333; background: #EBE3CD; width: 25%; float: left; } #rightcolumn { color: #333; background: #EBE3CD; width: 25%; float: left; display: inline; } #footerleft { color: #000; background: #FFF; width: 33%; float: left; margin-left:auto; margin-right: auto; } #footerright { color: #000; background: #FFF; width: 33%; float: left; margin-left:auto; margin-right: auto; } #footermiddle { color: #000; background: #FFF; width: 33%; float: left; margin-left:auto; margin-right: auto; } #redcolor { color:#CC0033; text-align: center; font-weight:bold; } #topheader { margin-left:auto; margin-right: 0px; } and the page has this setup: <HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>PC Hell: How to Start Windows in Safe Mode</title> <link rel="stylesheet" type="text/css" href="/common/style.css" /></head> <body> <div id="wrapper"> <div id="pageheader"> <h1>How to Start Windows in Safe Mode</h1> </div> <div id="navigation"> </div> <div id="wrapper"> <div id="pagecontent"> <div id="topadsense"> <!--#include virtual="/adsense336.txt" --> </div> <div id="bookmarking"> <!--#include virtual="/bookmarks.txt" --> </div> <div id="printerfriendly"> <A href="/print/printpage.php"><b>Printer Friendly Version </b><img src="/images/printicon.gif"></A> </div> Main body of content is placed here <div id="supportfooter"> <!--#include virtual="/support/supportfooter.txt" --> </div> </div> <div id="rightcolumn"> <p><!--#include virtual="/adsense.txt" --> </p> <br /> <br /> <p align="center"><!--#include virtual="/searchtables2.txt" --> </p> </div> </div> <div class="clear"></div> <div id="footerbreak"><strong>Recommended Software for PC Hell Visitors</strong> </div> <div id="footer"> <!--#include virtual="/indexfooter2.txt" --></div> </div> </body></html> Any help is appreciated. I have a wrapper div that should do the trick, but its not working. Thanks, Mark Hey, so I've just formatted my first table-free html page, using CSS. It's mostly cool, except that the page length doesn't mesh with the amount of content... http://mailwerx.ca/grundmans/about_us.htm The css is at... http://mailwerx.ca/grundmans/grundmans.css If anyone knows why this is happening, please tell me! I've played with this for hours! (And I know it's probably something small and stupid.) Thanks! -Jaeger Hello, I have 2 questions - hope that ok moderator? First. My sidebar, it bugs me. I would like for it be the same length as the #Maincontent, but It is either to long or to short...Does anybody have a idea for a solution? Second. I would like to have a picture next to the #maincontent, on the right, from top to bottom, and parallel to it, and a bit out. (Sorry I don't know the correct English term). Kind of like the lines next to the sidebar - which is a background image for #sidebar. I already got a background image on body. Is This possible? In advance, thanks for any help or advice. And I can't post url... so here is some CSS: Code: html { margin-top: 20px; }
body { padding: 0px; background-color:#e6e2bf; background-image: url('imgs/bag.png'); background-repeat:repeat-x; background-position: top right; padding:30px; margin-bottom:0px;}
#wrap { width: 850px; height: 500px; padding: 0px; margin-left: auto; margin-right: auto; background-image: url('imgs/right.png'); background-repeat:repeat-y; background-position: top right;}
#maincontent {position: relative; left: 230px; float: left; text-align: left; width: 580px; min-height: 500px; margin-left:10px; background-color:#fff; z-index:2; }
#header { background-color: #e5edf2; width: auto; height: 100px; margin-bottom: 30px; top:35px; z-index:3;}
#footer { width: 100% height: 50px; margin: 0px auto 30px auto; color: #FFFFFF; background-image: url('imgs/bund.png'); }
#sidebar {position:absolute; top: 0px; text-align: left; padding-top: 40px; padding-bottom:200px; width:auto; height:100%; padding-right:10px; z-index:4; background-image: url('imgs/sidebar_bag.gif'); background-repeat:repeat-y; }
#logo {position: relative; right: 40px;}
I've got a site I've started to work on: domosworld.net I want it setup so the three middle columns are equal width? I set right/left borders on the middle content, but am worried that perhaps the right side will be longer than the middle which will cause the layout not to look right. What is the best way to achieve the equal columns? I'm wanting to extend a div all the way to the bottom of the page to give the effect of a white column. How can I make it extend all the way to the bottom if the content is too short to make it do this? The example is at http://www.wattersisere.co.uk/devshed. Thanks, Watters It's a classic problem, but I was just wondering if anyone could give me some help on it. Heres the link to the webpage (note, none of the links or owt work, it's just filler for the mo): Code: http://users.aber.ac.uk/jdg8/WebSiteHelp/ I want to the make the sidebars on each side stretch to the bottom of the page (Down to the footer) but it won't seem to go. I've tried following googles advice and it's not working either. Here's the code: Code: body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background:#FFF;
height: 100%;
margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
padding: 0;
text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
color: #FFF;
}
a:link{color:#00B800;}
a:visited{color:#39F}
a:hover{color:white; text-decoration:underline; font-weight:bold;}
#container {
width: 80%; /* this will create a container 80% of the browser width */
background: #666666; /* the auto margins (in conjunction with a width) center the page */
border: 3px solid #000000;
text-align: left; /* this overrides the text-align: center on the body element. */
height: 100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header {
background: #999999;
height: auto;
margin-left: auto;
margin-right: auto;
color: #390;
}
IMG.ukdm {
display: block;
margin-left: auto;
margin-right: auto;
}
/* Tips for sidebars:
1. Since we are working in percentages, it's best not to use side padding on the sidebars. It will be added to the width for standards compliant browsers creating an unknown actual width.
2. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the "#sidebar1 p" rule.
3. Since Explorer calculates widths after the parent element is rendered, you may occasionally run into unexplained bugs with percentage-based columns. If you need more predictable results, you may choose to change to pixel sized columns.
*/
#sidebar1 {
float: left; /* this element must precede in the source order any element you would like it be positioned next to */
width: 22%; /* since this element is floated, a width must be given */
height:100%;
background-color: #555555;
background-image:url(backgroundshizzle.jpg);
padding: 15px 0; /*top and bottom padding create visual space within this div */
}
#sidebar2 {
float: right; /* this element must precede in the source order any element you would like it be positioned next to */
width: 23%; /* since this element is floated, a width must be given */
height:100%;
background-color: #555555;
font-size:14px;
padding: 15px 0; /* top and bottom padding create visual space within this div */
text-align:center;
}
IMG.albumom {
display: block;
margin-left: auto;
margin-right: auto;
font-weight:bold;}
#sidebar1breaker {
width: 4%;
height:680px;
}
#sidebar1 p, #sidebar1 h3, #sidebar2 p, #sidebar2 h3 {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */
margin-right: 10px;
}
#navi{
display:block;
margin-left: auto;
margin-right: auto;
text-align:center;
font-weight: bold;
font-size: 17px;
}
#aom{
font-style:italic;
}
/* Tips for mainContent:
1. the space between the mainContent and sidebars is created with the left and right margins on the mainContent div.
2. to avoid float drop at a supported minimum 800 x 600 resolution, elements within the mainContent div should be 300px or smaller (this includes images).
3. in the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This avoids several IE-specific bugs.
*/
#mainContent {
/* the right and left margins on this div element creates the two outer columns on the sides of the page. No matter how much content the sidebar divs contain, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the sidebar spaces when the content in each sidebar ends. */
font-size:12px;
margin-left: 3px;
}
#footer {
padding: 0 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
background:#999999;
text-align:center;
font-size:9px;
}
#footer p {
margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
padding: 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}
/* Miscellaneous classes for reuse */
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page The floated element must precede the element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain its child floats */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
It should be noted that I'm not totally sure about CSS and most of it is either stolen from dreamweaver or rehashed together from old websites I made. Any help I could get would be greatly appreciated. Cheers. Hi, My page has 3 elements: one at the top(header banner), one in the middle (a middle content area) and one at the bottom (footer banner). Now I want those positions to remain intact regardless of the number of lines output in the middle element. The content is going to be determined at runtime by a server-side routine so I don't want to use a fixed positioning for the footer banner. I want it to be displayed at the bottom - after the middle content is displayed. And I want the middle content to be visible in the page i.e. I don't want a scroll area within the page. I have tried various approaches and read up on positioning but so far have not been able to do it using css. Any help is much appreciated. Jim EDIT:: Simplier way to write the question ^.^ :: When I scroll off the menu/link onto the first link in the submenu it stays, but when I mvoe down to the next item in the submenu it disappears. (My drop down is vertically aligned on the left.) (bits of the code that relate to the menu) PHP Code: .btn1 { position: absolute; left: 165px; top: 200px; } .btn2 { position: absolute; left: 165px; top: 240px; } .btn3 { position: absolute; left: 165px; top: 280px; } .btn4 { position: absolute; left: 165px; top: 320px; } .btn5 { position: absolute; left: 165px; top: 360px; } .btn6 { position: absolute; left: 165px; top: 400px; } .btn7 { position: absolute; left: 165px; top: 440px; } .btn8 { position: absolute; left: 165px; top: 480px; } .link1 { position: absolute; left: auto; top: 240px; } .link2 { position: absolute; left: auto; top: 280px; } .link3 { position: absolute; left: auto; top: 320px; } .link4 { position: absolute; left: auto; top: 360px; } .link5 { position: absolute; left: auto; top: 400px; } .link6 { position: absolute; left: auto; top: 440px; } .link7 { position: absolute; left: auto; top: 480px; } .link8 { position: absolute; left: auto; top: 520px; } .link9 { position: absolute; left: auto; top: 560px; } #nav, #nav ul { padding: 0; margin: 0; list-style: none; } #nav a { display: block; width: 100px; } #nav li { width: 100px; } #nav li ul { position: absolute; width: 100px; left: -9999px; display: none; top: 0; z-index: 3; } #nav li:hover ul { display: block; left: 266px; z-index: 3; } #nav li:over ul { display: block; left: 266px; z-index: 3; } PHP Code: <ul id="nav"> <li><a href="HOBmain.htm"><img class="btn1" src="../mainbtn.gif" width="100" height="38" alt="MainBtn"></a></li> <li><a href="HOBmain.htm"><img class="btn2" src="../blogbtn.gif" width="100" height="38" alt="BlogBtn"></a> <ul> <li class="link1"><a href=""><img src="../mbtn.gif" alt="bMainBtn"></a></li> <li class="link2"><a href="#"><img src="../anmbtn.gif" alt="bAnimeBtn"></a></li> <li class="link3"><a href="#"><img src="../mgabtn.gif" alt="bMangaBtn"></a></li> <li class="link4"><a href="#"><img src="../gmebtn.gif" alt="bGameBtn"></a></li> <li class="link5"><a href="#"><img src="../bookbtn.gif" alt="bBookBtn"></a></li> </ul> </li> <li><a href="HOBmuse.htm"><img class="btn3" src="../musebtn.gif" width="100" height="38" alt="MuseBtn"></a> <ul> <li class="link2"><a href="HOBmuse.htm"><img src="../mbtn.gif" alt="mMainBtn"></a></li> <li class="link3"><a href="HOBmuse.htm"><img src="../pmbtn.gif" alt="mPoemBtn"></a></li> <li class="link4"><a href="HOBmuse.htm"><img src="../stybtn.gif" alt="mStoryBtn"></a></li> <li class="link5"><a href="HOBmuse.htm"><img src="../drmbtn.gif" alt="mDreamBtn"></a></li> </ul> </li> <li><a href="HOBodd.htm"><img class="btn4" src="../oddbtn.gif" width="100" height="38" alt="ComicBtn"></a> <ul> <li class="link3"><a href="HOBodd.htm"><img src="../mbtn.gif" alt="cMainBtn"></a></li> </ul> </li> <li><a href="HOBart.htm"><img class="btn5" src="../artbtn.gif" width="100" height="38" alt="ArtBtn"></a> <ul> <li class="link4"><a href="HOBart.htm"><img src="../mbtn.gif" alt="aMainBtn"></a></li> <li class="link5"><a href="HOBart.htm"><img src="../recbtn.gif" alt="aRecentBtn"></a></li> <li class="link6"><a href="HOBart.htm"><img src="../gaibtn.gif" alt="aGaiaBtn"></a></li> </ul> </li> <li><a href="HOBpic.htm"><img class="btn6" src="../picbtn.gif" width="100" height="38" alt="PicsBtn"></a> <ul> <li class="link5"><a href="HOBpic.htm"><img src="../mbtn.gif" alt="pMainBtn"></a></li> <li class="link6"><a href="HOBpic.htm"><img src="../recbtn.gif" alt="pRecentBtn"></a></li> </ul> </li> <li><a href="HOBfaq.htm"><img class="btn7" src="../faqbtn.gif" width="100" height="38" alt="FaqBtn"></a></li> <li><a href="HOBcon.htm"><img class="btn8" src="../contactbtn.gif" width="100" height="38" alt="ContactBtn"></a> </li> </ul> <script type="text/javascript" src="drop_down.js"></script> the "nav" is referring to a bit of js, and this is in my header. Also not sure if it's correct, but I can worry about that later. link: The Page I am trying to create a page with two side by side boxes, each coloured differently, and a third box, the full width of the page, directly underneath the other 2. The puzzling thing for me is that when I define the two side by side boxes as 50% each the left box will appear under the bottom box. If I define 1 of the boxes as 49.9% they appear side by side with a small strip between them. The other thing is that although I have defined margin and padding as 0 the boxes do not fill the width of the screen. Can anybody explain to me how to get the screen filled to 100% and the 2 columns to take 50% of the screen each. Here is the code: Code: .main_container{
margin:0;
padding:0;
width: 100%;
height: 400px; //change to whatever size you wish
background-color:#FFF;
}
.left_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: left;
float: left;
background-color:#333;
}
.right_box{
margin:0;
padding:0;
width: 50%;
height: 400px; //change to whatever size you wish
clear: right;
float: right;
background-color:#666;
}
.footer{
margin:0;
padding:0;
width: 100%;
height: 100px; //change to whatever size you wish
clear: both;
position:relative;
background-color:#888;
}
Just wondering is it a good way to do columns in css using two spans set to float left and then right and having their widths set, then the content in divs or spans inside them? Hi, i tried to change this blogger theme from 2 to 3 columns... but when done .... the menu bar on sidebar disapear... Can you help me?... for you I don't think is so difficult; I'm not a web designer but a system administrator... so, is not so easy. This is the link where you can find the xml. plantillasblogyweb.googlepages.com/Blogy-iPlantilla-Blogyweb.blogspot.c.xml Thank you in advance Surfparadise |
|||||||