|
CSS - Floats Not Extending Divs
I swear that I really am learning a great deal about CSS but you wouldn't think so as many threads as I've started in the past few days...
Anyhow, consider the following code: Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My site</title>
<style type="text/css">
#base {
clear: both;
padding-top: 1px;
border-top: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
width: 100%;
background: #00ff00; } /* end #base */
#main {
background: #0000ff;
margin: auto;
text-align: left;
width: 800px; } /* end #main*/
#content {
background: #ffffff;
border-left: 1px solid #0000ff;
padding-top: 1em;
padding-bottom: 1em;
border-right: 1px solid #0000ff; } /* end #content */
#bottom_part {
padding: 0;
line-height: 130%;
padding-left: 1em;
padding-right: 1em;
display: block;
margin: 0;
border: 0;
clear: both; } /* end #bottom_part */
#column_a {
padding: 1em;
margin: 0;
float: left;
width: 33%; } /* end #column_a */
#column_b {
margin-left: 33%;
margin-right: 33%;
padding: 1em;
padding-right: 0;
width: 25%; } /* end #column_b */
#column_c {
display: block;
float: right;
padding: 1em;
width: 33%; } /* end #column_c */
#bottom {
background: #ff0000;
border: none; } /* end #bottom */
.header { font-weight: bold; }
</style>
</head>
<body>
<div id="base">
<div id="main">
<div id="content">
<div id="bottom_part">
<div id="column_a">
<p class="header">Column A</p>
<p>A - A</p>
<p>A - B</p>
<p>A - C</p>
</div>
<div id="column_c">
<p class="header">Column C</p>
<p>C - A</p>
<p>C - B</p>
<p>C - C</p>
<p>C - D</p>
<p>C - E</p>
<p>C - F</p>
</div>
<div id="column_b">
<p class="header">Column B</p>
<p>B - A</p>
<p>B - B</p>
<p>B - C</p>
</div>
</div>
</div>
<div id="bottom"> </div>
</div>
</div>
</body>
</html>
The problem is that the content in Column C does not completely render inside the white box. The same problem occurs when the content is really long in Column A. Column B will extend the height of the white box and I'm certain it is because there is no float style associated with it. How can I achieve this for the other two columns? Removing the floats will do the trick but will also place the columns on top of each other. Similar TutorialsI'm having some issues with my images showing up properly in IE6. They look fine in Safari & Firefox. Basically there is a container div and then individual divs that display an album cover along with a description. In IE6, the images aren't in the divs, but are at the top. Anyone know what the fix is? #container { padding: 0px; margin-top: 10px; margin-bottom: 20px; margin-right: auto; margin-left: auto; background: #333; border: 0px; text-align:center; width: 635px; } #center { padding: 10px; margin-top: 10px; margin-bottom: 0px; margin-right: auto; margin-left: auto; background: #666; border: 2px solid #000000; text-align:left; width: 610px; } #container p.album-cover { float:left; padding:0; margin-top: 0px; margin-bottom: 0px; margin-right: 10px; margin-left: 0px; } #container .album-info { ... just font properties; } Code:
<?php loop through albums to display each one; ?>
<div id="center">
<p class="album-cover">
<?php <a href="..."><img src="..." ></a> ?>
</p>
<p class="album-info">
<?php ..description... ?>
</p>
</div>
?>
I thought I'd got this CSS stuff figured out but now I'm stuck again. I want the last div on this page to be alongside the one above it, but can I get the b****** thing to go there? No! Link I just want them side-by-side with a nice centered gap between them. Can you help? Thanks, John. Hi all, This is really annoying me and I don't think it should happen!! If you see this page, you will see one of the divs spans the whole page and it has gone behine the floated left element. Now if it wnt below it that would be OK as a block level element, but the content is in the right place. If you reduce the width it sits in its place OK. I think this is strange behavior.... is it correct????? http://www.wellandpower.net/website...req=www_contact Regards Charlie Hi all, I'm a beginner to floating divs etc. so I've been following a tutorial to get what I need and I'm tweaking it here and there. Trouble is I've obviously tweaked something incorrectly. The two column's in the contentHoldingDiv don't line up correctly. Does anyone feel like taking a look at my code and telling me what I've done wrong (any other comments freely welcomed - it's the only way I'll learn). Here's the HTML: Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link href="style.css" rel="stylesheet" type="text/css" media="screen"/>
</head>
<body>
<div id="holdingDiv">
<div id="topDiv"><p>You are logged in as <strong>Guest</strong></p></div>
<div id="headerPicDiv">Header Pic</div>
<div id="navDiv">
<ul>
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>
<div id="contentHoldingDiv">
<div id="contentDiv">
<h2>Column 1</h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
<div id="rightDiv">
<h3>Column 2</h3><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
</div>
</div>
<div id="footerDiv">
<p>
Site design by <a href="mailto:Lee@LTheobald.co.uk">Lee Theobald</a>
</p>
</div>
</div>
</body>
</html>
And here's the CSS Code:
* {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #E6E6E6;
margin: 0px;
padding: 0px;
min-width: 760px;
}
#holdingDiv {
background-color: #F8F8F8;
margin: 20px auto;
width: 760px;
}
#topDiv {
height: 25px;
background-image: url(images/gradient25.jpg);
border: 1px solid #D4D4D4;
}
#topDiv p, #topDiv strong {
line-height: 25px;
text-align: right;
padding-right: 5px;
margin: 0px;
font-size: 10px;
}
#headerPicDiv {
height: 125px;
border: 1px solid #D4D4D4;
}
#navDiv {
height: 25px;
background-image: url(images/gradient25.jpg);
border: 1px solid #D4D4D4;
line-height: 25px;
padding: 0 5px;
}
#navDiv ul {
margin: 0px;
padding: 0px;
}
#navDiv li {
display: inline;
list-style: none;
margin: 0px;
padding: 0px;
}
#contentHoldingDiv {
border: 1px solid #D4D4D4;
padding: 0px;
margin: 0px;
clear: both;
}
#contentDiv {
background-color: red;
width: 600px;
float: left;
}
#contentDiv p {
padding: 5px 3px;
margin: 0px;
#rightDiv {
background-color: orange;
width:157px;
margin-left:600px;
}
html>body #rightDiv {
width:160px;
}
#footerDiv {
height: 15px;
background-image: url(images/gradient15.jpg);
border: 1px solid #D4D4D4;
}
#footerDiv p, #footerDiv a {
line-height: 15px;
text-align: center;
font-size: 9px;
margin: 0px;
}
Cheers, Lee Hello, not sure I know how to explain this. I have a page that I want to divide in two parts. To do so I am using floats. The problem is that the content in one div is not the same as the content in the other div and therefore the height of the two floated div is different from one another. However, I want that the div's have a border that seperates them and I would like this border to be from top to bottom of the containing div regardless of which of the two floated div is the highest. I could do this with javascript but I would like to know if there is some pure html/css option. Here is my example; Code:
<html>
<head>
<style>
.main {
margin: 0px auto;
width: 800px;
border: 2px solid red;
}
.wrap:after{
content: ".";
display: block;
position:relative;
height: 0;
clear: both;
visibility: hidden;
}
.wrap{
display: inline-block;
}
/* Hides from IE-mac \*/
* html .wrap{height: 1%;}
div.wrap{display: block;}
/* End hide from IE-mac */
.left {
float: left;
width: 100px;
}
.right {
float: left;
width: 680px;
border: 10px solid blue;
}
</style>
</head>
<body>
<div class="main">
<div class="wrap">
<div class="left">My left div has more.<br/>more..<br /><br />more...<br /><br /><br />lines then the right one</div>
<div class="right">My Right div has only one line but need border till down there ...</div>
</div>
</div>
</body>
</html>
As you can see in the example the border of the right div does not go down till the bottom border of the main div. I have a positioning puzzle for you. It's as part of a web design assignment, so broad accessibility is not required. even working on IE is not required. YES! here is the problem, explained by means of an image. because a picture speaks a thousand words. so they say. [IMG](URL address blocked: See forum rules)[/IMG] Any assistance or suggestions are welcome. Thanks in advance. So I have a body div which has a left and right div(columns). I need to add 2 more divs inside the left div. But, these 2 divs have to unordered lists in them. I know my CSS is pretty average if not worse. My layout looks fine except for when I add 2 divs.. I have the float:left with %50 widths.. Screen shot of how my layout looks. img209.imageshack.us/img209/2913/idear.gif I did not add any clear tags to my css.. which I think might be what's causing the issue. Side note: In IE compatibility view the top of the page has a gap and so does the right of the page.. the logo and footer are both 100% width and the top div has a -negative margin to close the gap, it looks fine without compatibility view, and fine in firefox, and chrome. XHTML passed validation and so did CSS. This is before even messing with the columns. I didn't do anything with the unordered lists. Maybe i should ask how to correctly make my layout first.. Because what I've been doing is just adding new divs where I see fit, and then going back to edit the CSS till it works. Thanks for helping me out! BTW: what book would you recommend me getting.. I understand basics of CSS and I think I'm good with XHTML, I just need to get a better definition of CSS than w3schools has to offer. Thanks again. I have floating items inside of floating items. The problem is I cannot clear my floating items in the middle column because that ruins the other columns. How can I clear floats in the middle column? Do you have any better ideas to make my layout work? I have attached in image of how the layout should work. 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>
<title>Title</title>
<style type="text/css">
#content {
display: block;
margin: 0 5px;
padding: 0 10px;
border-top: 1px solid #0B4867;
}
.content100 {
width: 100%;
padding: 0px;
margin: 0 .5% 0 .25%;
display: inline;
background: #ffeeee;
}
.content50 {
width: 48.75%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeffee;
}
.content33 {
width: 32.25%;
display: block;
float: left;
margin: 0 .5% 0 .25%;
padding: 0px;
background: #eeeeff;
}
</style>
</head>
<body>
<div id="content">
<div style="margin: 0px 215px; padding: 0px; border: 0px; display: block;">
<div class="content100">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vivamus viverra malesuada turpis. Sed iaculis justo sed turpis. Nulla malesuada turpis sed nibh. Mauris dui quam, cursus at, sollicitudin a, auctor quis, ligula. Vivamus varius blandit velit. Sed eu nibh. Vestibulum sit amet massa. Maecenas elementum massa ac ligula. In vitae massa ut dui facilisis lacinia. Maecenas tristique pede in elit. Duis ultricies aliquam metus. Mauris neque. Nunc nec lectus eu metus rhoncus imperdiet. Etiam egestas semper nunc. Nunc pretium tincidunt felis.
</div>
<div class="content50">
<h2>Row 1, Column 1</h2>
In nec est pretium elit eleifend semper. Suspendisse potenti. Nunc bibendum sollicitudin ante. Aliquam facilisis mi quis turpis. Nullam aliquet. Sed eget urna in metus mattis luctus. Sed nunc. Maecenas est. Morbi ullamcorper eros non magna. Donec auctor, orci pretium rutrum eleifend, pede arcu pretium dui, vitae vestibulum ante odio sit amet dui. Aliquam fringilla velit sit amet magna. Proin cursus, elit quis faucibus fermentum, diam tellus rhoncus nulla, ut iaculis orci velit id metus. Pellentesque diam metus, dapibus eu, vestibulum quis, elementum id, turpis. Morbi elementum, quam non rhoncus hendrerit, metus lacus bibendum ante, vitae sodales velit est eu neque.
</div>
<div class="content50">
<h2>Row 1, Column 2</h2>
This column is not very high.
</div>
<div class="content100">
Donec sed velit mollis erat consequat ornare. Donec accumsan, sapien a posuere tristique, felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 1</h2>
Felis turpis tristique odio, nec accumsan velit ipsum eu tellus. Duis vel felis. Maecenas in arcu nec nisi cursus consectetuer. Ut ac felis. Mauris aliquet lectus quis nisl. Aliquam quis urna quis diam facilisis imperdiet. Curabitur sit amet eros. Curabitur purus. In arcu magna, bibendum varius, elementum non, cursus eget, nulla. Etiam vulputate velit. Sed interdum leo in ligula. Sed non justo id odio bibendum tincidunt. Sed dictum, ipsum eget blandit luctus, nisi felis rhoncus nisl, sodales imperdiet neque quam id mauris.
</div>
<div class="content33">
<h2>Row 2 Column 2</h2>
This column is not as high as the previous one.
</div>
<div class="content33">
<h2>Row 2 Column 3</h2>
</div>
<div class="content100">
Nunc vel arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam luctus tellus luctus magna. Aenean tellus sapien, venenatis id, hendrerit sit amet, lacinia sed, ante. Nullam metus. Sed cursus lobortis orci. Etiam suscipit, tellus ut rutrum mollis, urna libero ultrices lectus, non hendrerit quam elit id leo. Quisque sollicitudin, mi id imperdiet sollicitudin, orci enim rutrum nibh, non adipiscing diam augue commodo nunc. Maecenas erat massa, sagittis eu, sagittis at, commodo nec, dolor. Aliquam erat volutpat. Donec nisl erat, vulputate id, dictum non, vulputate egestas, sapien. Fusce non justo eu felis imperdiet placerat. Suspendisse mattis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ac tellus eget risus varius vehicula. In ante.
</div>
</div>
</div>
</body>
</html>
Hi. I am nearly finished with the main layout for my forums but just ran into this problem and can't quite seem to figure it out. Right now I am updating vbulletin template to XHTML 1.1 and having some problems with tables / divs. I am attempting to keep the table code for the tabular data and use divs for the table headers/footers but for some reason the meat (table inbetween header and footer div) will not extend to meet the right border of the header and footer divs. Here is the HTML: Code:
<!-- TOP -->
<div class="topOutter clearFloat">
<div class="topInner floatLeft">
<div class="floatLeft">
<div class="floatLeft" style="width: 21px;">
<img src="customStyle/structure/top_left.gif" alt="" />
</div>
<div class="floatLeft titleTxt" style="margin-left: 5px; padding-top: 12px;">
<a class="darkLink" href="forumdisplay.php?f=16">Event TopiX</a>
</div>
</div>
<div class="floatRight">
<img src="customStyle/structure/top_end.gif" alt="" />
</div>
</div>
<div class="floatRight">
<img src="customStyle/structure/top_right.gif" alt="" />
</div>
</div>
<!-- /TOP -->
<!-- MIDDLE -->
<table style="border: 1px solid #000000;" cellpadding="0" cellspacing="0" width="100%" >
<tbody id="collapseobj_forumbit_16" style="">
<tr>
<td class="thead" style="width: 100%; height: 17px;"></td>
</tr>
</tbody>
</table>
<!-- /MIDDLE-->
<!-- BOTTOM -->
<div class="bottomSpacer bottomOutter clearFloat">
<div class="floatLeft">
<img src="customStyle/structure/blc.gif" alt="" />
</div>
<div class="floatRight">
<img src="customStyle/structure/brc.gif" alt="" />
</div>
</div>
<!-- /BOTTOM -->
The CSS Code (spacer and top/middle classes are just bordering and bottom margins): Code:
.clearFloat { overflow: hidden; }
.floatLeft { float: left; }
.floatRight { float: right; }
Please see the attachment for the visual. This is only happening in IE, Firefox and opera render it fine. And it only happens when I sandwhich a table between the header and footer divs. If the middle portion is also a div it does not display this problem. Thx. I'm totally stumped here.. Granted I'm still new to this, and learning as I go, but anyway http://www.psyberarts.com/work/prism/index.html There is a line in the content area that is being extended up from the footer color. I know it's from the footer color because when I change the footer background to white, it goes away. Should I just make a repeat image for the footer and do it that way? I really like this menu: http://alistapart.com/articles/horizdropdowns (see demo: http://alistapart.com/d/horizdropdowns/horizontal.htm) My problem is that it only works in one level. How can I modify it to support more levels? Or do you guys know any simular menu, that support more levels? I have a div that has a table inside of it. Even though the table expands with content added, the div does not. It's important to me that the div extend with the table because this div in question has a background shadow border for the table. Here is the CSS: Code:
#right {
float: right;
width: 80%;
height: 100%;
}
#rt_brdr {
height: 100%;
width: 100%;
padding-bottom:5px;
padding-right: 10px;
margin-bottom: 5px;
vertical-align: bottom;
background: url(img/r_brdr.gif) repeat-y right;
}
My HTML: Code:
<div id="right">
<div id="rt_brdr">
<table border="0" align="left" width="100%" style="height: 93%; margin-top: 2px;" cellpadding="0" cellspacing="0">
<tr>
<td class="top" style="background: url(img/w_tl.jpg) no-repeat top left #FFFFFF;"></td>
<td class="white_fill"></td>
<td class="top" style="background: url(img/w_tr.jpg) no-repeat top right #FFFFFF;"></td>
</tr>
<tr class="white_fill">
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td class="bottom" style="background: url(img/w_bl.jpg) no-repeat bottom left #FFFFFF;"></td>
<td class="white_fill"></td>
<td class="bottom" style="background: url(img/w_br.jpg) no-repeat bottom right #FFFFFF;"></td>
</tr>
</table>
</div>
</div>
I have attached a screenshot. Note that I took the content out of the table in the post so that the code doesn't extend forever. I have put a black border around the right border to make it stand out in the screenshot. Not 100% sure if this is CSS related, however: The nav and image area below it are obviously 2 separate divs, as referenced by http://www.psyberarts.com/work/prism What is the best way to accomplish this look (the hover image, which is actually just an image for an "Active" State on a page.) I was thining about nested Divs for the pointed peice, but before I proceed I would rather get the opinion of someone who knows more than I do hi, i have the following css Code: #content { width:1000px; text-align:center; height:100%; border:2px #000 solid; }
#mainbody { width:1000px; height:100%; display:run-in; border:#03F 1px solid; }
and my xhtml looks like Code: <div id="content"> <div id="mainbody"> </div> </div> basically what i want to do is to have full available page height covered by content div so that i can stick a footer div at the end of it. so that regardless of the height of the contents covering the mainbody-div my footer always sticks to the bottom of the page. now even before i add footer, the problem is that mainbody is going 50px outside the content div at the bottom making the page to scroll. should it not take the available height within the content-div because it is nested within content div? thanks I have a absolute layout in css with two colums. In left column i have a navigation bar, and then a footer which is positioned 10px from bottom of the div, and right column has content. both have height of 100%, however no matter what resolution, the height extends about 100px further than the browser window, so the header is not seen unless scrolled to, even if other content doesn't exceed the browser window. I dont think its box model issue because there is no major vertical padding..any ideas? I have a site that is using the suckerfish style dropdown sorta... On a previous version I had the li dropdown block entirely clickable, so a user could click in any part of the 160px block, but on a current site using the same navigation just dropped in you can only click on the word and nothing happens for the rest of the 'box'.. It works fine in Firefox but not IE, if there is an image aligned to the right of the link it extends the clickable region... Any help would be appreciated. Here is the CSS for that section: Code: /*******************************/
/* BEGIN: Drop-Down Styles */
/*******************************/
#navigation, #navigation ul {
position:absolute;
padding: 0;
margin: 0;
list-style: none;
line-height: 20px;
font-size: 11px;
font-family: Arial, Helvetica, sans-serif;
z-index: 10;
font-weight: bold;
}
#navigation li.main {
text-align: center;
}
#navigation ul {
margin: 0 0 0 -1px;
}
#navigation a {
display: block;
background-color: transparent;
color: #F1F1F1;
text-decoration: none;
padding: 2px 4px 2px 6px;
z-index: 10;
}
#navigation li {
float: left;
width: auto;
border: solid 1px #0f2344;
border-right: none;
background-color: #0f2344;
color: white;
z-index: 10;
}
#navigation li li {
border-right: solid 1px black;
border-bottom: none;
width: 160px;
}
#navigation li.last {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li.hr {
border-right: solid 1px black;
border-bottom: solid 1px black;
}
#navigation li ul {
position: absolute;
width: 160px;
display: none;
}
#navigation ul ul {
margin: -20px 0 0 160px;
}
#navigation li:hover ul ul, #navigation li.over ul ul, #navigation li.over ul ul, #navigation li.over ul ul ul {
display: none;
}
#navigation li:hover ul, #navigation li li:hover ul, #navigation li.over ul, #navigation li li.over ul, #navigation li li li.over ul {
display: block;
}
#navigation li:hover, #navigation li.over {
color: black;
background-color: #467BB4;
cursor: pointer;
}
#navigation li:hover>a { /* IE/Win ignores this declaraion */
color: black;
background-color: #467BB4;
}
And a segment of the HTML I'm using. Code: <ul id="navigation"> <li><a href="http://links.com">Home <img src="http://links.com/comm_demo3/img/dn_arrow.gif" alt="" border="0"></a> <ul> <li><a href="http://links.com/comm_demo3/pages/news/news.asp">Newsroom</a> <li><a href="http://links.com/comm_demo3/pages/news/archives/archives.asp">Newsletter Archives</a> <li class="last"><a href="http://links.com/dashboard/corporat.htm">Dashboard</a> </li> </ul> </li> At first this was slightly amusing. The border in the lower middle column dubbed "News" extended underneath the other divs to the top in Firefox. See he www.djoj.net/test/indexwierd.html Css: (Look at the way bottom of the CSS. The last 3 styles) www.djoj.net/test/styles2.css So I changed my div's to span's and wrapped them in one div labled "bottom" Now look... www.djoj.net/test/index.html Css: (once again, at the bottom) www.djoj.net/test/styles.css How can I fix this? It's a problem in both browsers. I don't want to use tables, I'd rather stick to CSS positioning. Thank you in advance! ~B I am quite new to css and have stumbled my way through making a page. My issue is the footer. My footer contains a background image that repeats across the page. In order to make the footer stick to the bottom I have placed it in a container. My issue is, when the page is minimized and you scroll over the right of the page, the menu that is on the bottom is on the right but the background image does not extend behind it. Code: /*---------------------------------------------
Footer Area Starts here
----------------------------------------------*/
#FooterBody{
background: #6f1e1a url(http://www.cleverchickcreations.com/images/footer.png) repeat-x;
height:232px;
width:100%;
border:1px solid;
color:#f2f1df;
}
#FooterContainer{
width: 936px; margin: 0 auto; padding: 0; text-align: left;
}
/*------------------------------------------------footer--------------------*/
#footer{
width:100%;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
padding: 0px;
float: left;
height: 232px;
background-image: url(http://www.cleverchickcreations.com/images/footer.png);
background-repeat: repeat-x;
position: relative;
}
#btmmenu_area{
width:1100px;
height:120px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.navcolumn {
float: left;
width: 300px;
height: 120px;
margin-left: 10px;
padding-left: 20px;
padding-right: 20px;
}
.row1 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 140px;
text-align: left;
margin-top: 10px;
padding-left: 10px;
line-height: 140%;
}
.row1 a:link, .row1 a:visited, .row1 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row1 a:hover{
color: #6d5f52;
text-decoration: none;
}
.row2 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row2 a:link, .row2 a:visited, .row2 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row2 a:hover {
color: #6d5f52;
text-decoration: none;
}
.row3 {
float: left;
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: normal;
color: #FFFFFF;
text-decoration: none;
width: 130px;
text-align: left;
margin-top: 10px;
padding-left: 20px;
line-height: 140%;
}
.row3 a:link, .row3 a:visited, .row3 a:active {
float: left;
color: #301010;
text-decoration: none;
}
.row3 a:hover {
color: #6d5f52;
text-decoration: none;
}
.foot-headers {
font-family: Tahoma, Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #ef5f9b;
line-height: 140%;
}
.footer_links {
font-family: Arial;
font-size: 11px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #333333;
padding-top: 35px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.footer_copyrights {
font-family: Arial;
font-size: 10px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: none;
margin: 0px;
float: left;
height: 20px;
width: 100%;
color: #c2c093;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/*------------------------------------------------validation --------------------*/
#validation_area {
width:100px;
height:34px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
font-family: Tahoma;
font-size: 12px;
font-style: normal;
line-height: normal;
font-weight: bold;
font-variant: normal;
text-transform: none;
color: #dcd66e;
text-decoration: none;
padding: 0px;
float: none;
}
.validation {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
.validation:hover {
font-family: Arial;
font-size: 9px;
font-weight: normal;
text-transform: uppercase;
color: #FFFFFF;
text-decoration: none;
background-image: url(http://www.cleverchickcreations.com/images/validation-0.png);
background-repeat: no-repeat;
float: right;
height: 16px;
width: 44px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 0px;
}
I guess let me start with centering. I have Code: body {
margin: 1%;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
line-height: 1.75em;
background-color: #6E4E1C;
text-align: center;
}
#wrapper {
background-color: #343457;
width: 775px;
position:absolute;
margin: 0px auto;
text-align: left;
By everything I read, setting the body's text-align to center, and the wrapper's margins to auto should do the trick. When I copy other stylesheets, they work. But when I type it in, it doesn't? Mozilla puts content at the left, and IE6 puts the left border of the wrapper in the center of the page causing horizontal scroll. (actual pages at http://lgs.lambrite.com/new.css and http://lgs.lambrite.com/test2.htm 2nd, if you visit the htm page above you see that my content div does not extend down to meet the footer. I have looked at the faux columns, but can't make that work and keep my blue border at the bottom, unless I add another wrapper div to hold the background, inside of the primary wrapper div. This seems not the best way to do this. Any suggestions? Lastly, in Mozilla, the url background on my sublinks nicely meets the content background, but in IE, there is a nice empty blue space between them I understand that this probably has to do with the box model issues, but have no idea how to fix it. I'd also welcome any criticism on my stylesheet (aside from the fact that it is not in short-hand - I am not familiar enough yet). You guys are great for newcomers - I know I really appreciate the help! Sarah It's hard for me to explain this so bear with me. This is the page in question. The right side is my float. If it is longer than the left side, then it continues, but the white background does not. I've tried doing height: 100% and so forth and can't get it to stretch. I've tried reversing the float assigning it to the left side and it appears fine in Net/Moz, but IE won't run it right. I don't really want to use float but I can't find another way to do it. I'm redoing the site from tables to CSS to make it cleaner. Floating has always been a problem but I've found ways to deal with it. Now, I'm realizing how finicky it is on different browsers. Any suggestions or alternatives to float? The heights of both sides may change at any point so I don't really want to use any position elements. Will I have to? Thanks in advance. Tim |
|||||||