|
CSS - 2 Column, Float Problem With Opera/ie 6
Hi all, I'm currently working on converting a table based site to a CSS table less one. I have a fairly good understanding of CSS, but have come across a problem and would like some help in sorting it out if possible.
The code I am pasting here is a quick mock up of what I am trying to acheive. It is a 2 column page, with a header and footer. When I run this code in IE 6, it seems to work as I think it should. When I run it in Opera 9, the maincenter content seems to move to the top of the last float in left column. I assume that my css code is wrong or my understanding is wrong, or there is some quirk, hack etc that I should be using. 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> <!--Don't add anything above this line, you may change the DTD to match your page--> <title>Test Page</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <link href="stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header">This is the header</div> <div id="main"> <div id="mainleft">stuff on the left<br /> more stuff on the left</div> <div id="mainleft1">stuff on the left<br /> more stuff on the left</div> <div id="mainleft2">stuff on the left<br /> more stuff on the left </div> <div id="mainleft3">stuff on the left<br /> more stuff on the left</div> <div id="mainleft4">stuff on the left<br /> more stuff on the left</div> <div id="mainleft5">stuff on the left<br /> more stuff on the left</div> <div id="maincenter">stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /> stuff on the right<br /></div> <div class="clear"></div> </div> <div id="footer">This is the footer</div> </div> </body> </html> CSS: Code:
#container {
width: 600px;
text-align: center;
margin: 20px auto 0 auto; }
#header {
width: 598px;
margin: 0px 0px 0px 0px;
border: solid 1px; }
#main {
margin: 20px 0px 0px 0px;
border: solid 1px;
float: left;
width: 598px;
overflow: auto; }
#mainleft {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft1 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft2 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft3 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft4 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#mainleft5 {
margin: 5px 5px 5px 5px;
float: left;
width: 150px;
border: solid 1px;
display: inline;
clear: left; }
#maincenter {
float: left;
display: inline;
margin: 5px 5px 5px 5px;
border: solid 1px;
width: 424px; }
.clear { clear: both; }
#footer {
margin: 20px 0px 0px 0px;
border: solid 1px;
width: 598px; }
Some notes: 1. Originally I had the left hand stuff in a div called mainleft, but had trouble getting that to work. Would that be correct, to include all the code in one div, with smaller divs inside it? 2. The little boxes on the left will be different boxes on the page, but for the mockup they are all the same, with different ids. 3. After looking around, I found out about the overflow: auto; for inside the main div, which fixed a nice problem I was having (main not having any content bar floats). Is IE 6 displaying the code right, or is Opera 9? --> I just had a bit of play around before posting and if I add a div around all the mainlefts, the code seems to work in both IE 6 and Opera. So whould that be best, to stick with that? I think adding in the overflow:auto; fixed the problem I was having with that earlier. Would still apreciate any comments Many thanks Scott Similar TutorialsI am working on a simple css design for my site. It has a header, footer, and I am trying to divide the content into two columns. the attempt is he http://www.jimpix.co.uk/rejig/008.htm I have the two content columns defined as: #leftcol { width:70%; float:left; border:1px solid black; } #rightcol { width:25%; float:right; border:1px solid black; } The above divs sit within a main 'content' div: #content { padding:10px; border-top:2px solid #999999; border-bottom:10px solid black; } But when I view the site in either IE6 or Firefox, the rightcol and leftcol divs do not sit within the content div, or at least, they don't appear to on the screen. Instead of the 'content' div expanding to contain the leftcol and rightcol divs, it just sits at the top, hence why there is a big black line at the top, instead of at the bottom, underneath the columns. Can anyone see what I am doing wrong please? Thanks Jim I have a page that has a header, footer, left content box, and right sidebar. I'm using a negative margin on the content container to get the right sidebar to fill the space so I can keep a sensible order within the html code. The right sidebar isn't taking up the negative margin space like it should. It floats right but takes up residence under the content box. It works without negative margins if I put the right sidebar first in the order (before the content) but I shouldn't have to do that. It also works using absolute positioning on the right sidebar but this is going to be a problem for pages that will have content that takes up less space than the sidebar (because of the footer). I have uploaded the page on one of my servers:test page page so you can see it in action. Here's the CSS/HTML code: 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" xml:lang="en"><head><title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style media="screen">
body {
margin: 0;
padding: 0;
text-align: center;
}
div#pageframe {
border: solid 1px black;
margin: 0px auto 0px auto;
width: 741px; /* total pagewidth */
}
div#headerbox {
border: solid 1px gray;
width: 741px;
height: 95px;
}
div#whiteboxes {
border: solid 1px red;
width: 741px;
float: left;
margin-right: -210px;
}
#middlecontent {
border: solid 1px purple;
margin-right: 210px;
text-align: left;
}
div#rightside {
border: solid 1px yellow;
width: 185px;
float: right;
}
div#footer {
border: solid 1px olive;
float: none;
width:741px;
height:55px;
clear: both;
}
</style></head>
<body>
<div id="pageframe">
<div id="headerbox">
<h1>This is the Header.</h1>
</div>
<div id="whiteboxes">
<div id="middlecontent">
<h1>middle content</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus varius
eleifend tellus. Suspendisse potenti. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos hymenaeos. Nulla
facilisi. Sed wisi lectus, placerat nec, mollis quis, posuere eget,
arcu. Donec euismod. Praesent mauris mi, adipiscing non, mollis eget,
adipiscing ac, erat. Integer nonummy mauris sit amet metus. In
adipiscing, ligula ultrices dictum vehicula, eros turpis lacinia
libero, sed aliquet urna diam sed tellus. Etiam semper sapien eget
metus.</p>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Vivamus imperdiet mattis risus. In hac
habitasse platea dictumst. Curabitur aliquam rhoncus nunc. Suspendisse
sit amet purus in wisi egestas placerat. Nunc varius suscipit magna.
Fusce commodo dolor vel felis. Nunc auctor elit vitae justo. Donec
lorem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus diam wisi, tincidunt et, sollicitudin a, ultricies quis, est.
Sed ut velit.</p>
<p>Aliquam sit amet mi. Pellentesque imperdiet
metus vitae wisi hendrerit imperdiet. Donec molestie tortor quis odio
rutrum mattis. Donec nec sem. Proin tempus tempor risus. Suspendisse
odio. Donec id mi. Maecenas est orci, porttitor eget, vehicula at,
rhoncus a, magna. Duis eu tellus. Donec blandit, orci quis commodo
tincidunt, mi leo tempor enim, in hendrerit eros lacus blandit urna.
Donec sed mi nec dui varius fringilla.</p>
<p>Quisque pretium, augue
non blandit ultrices, ipsum augue varius velit, a adipiscing nulla nunc
consectetuer diam. Maecenas eu ante non dui euismod euismod. Proin est
tortor, bibendum in, imperdiet quis, porta vel, purus. Quisque
tincidunt tincidunt elit. Suspendisse a mi. Nam faucibus. Aliquam
imperdiet pulvinar turpis. Vivamus sit amet elit a leo tincidunt
varius. Cras et orci. Aenean non velit vitae risus posuere iaculis.
Quisque porta nibh sed massa. Aliquam non ante. Proin semper ipsum nec
enim. Maecenas vestibulum nisl non magna. Aenean auctor. Nulla
tincidunt augue ac quam. Etiam ultricies purus et metus. Aliquam tempus
dignissim felis.</p>
<p>Curabitur euismod odio. Suspendisse potenti.
Aliquam est augue, feugiat non, sodales nec, aliquet et, massa. Nulla
eu tellus sed mi mollis aliquam. Fusce sed sem. Etiam tempus augue non
nulla. Nunc pede ligula, fringilla in, lobortis et, dictum a, est. Sed
accumsan, nisl vel suscipit scelerisque, arcu turpis dictum augue, ut
sagittis metus pede non felis. Donec mollis ipsum eu sapien. Sed eget
nisl. Nunc sem eros, dapibus consectetuer, molestie non, elementum sit
amet, felis. Donec eu diam eu nibh tincidunt malesuada. Mauris
fringilla volutpat odio.</p>
</div><!-- end middlecontent -->
<div id="rightside">
<h1>right frame</h1>
<p>Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Phasellus varius eleifend tellus.
Suspendisse potenti. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos hymenaeos. Nulla facilisi. Sed wisi
lectus, placerat nec, mollis quis, posuere eget, arcu. Donec euismod.
Praesent mauris mi, adipiscing non, mollis eget, adipiscing ac, erat.
Integer nonummy mauris sit amet metus. In adipiscing, ligula ultrices
dictum vehicula, eros turpis lacinia libero, sed aliquet urna diam sed
tellus. Etiam semper sapien eget metus.</p>
</div>
</div><!-- end whiteboxes -->
<div id="footer">
<p>FOOTER<br />Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Phasellus varius eleifend tellus. Suspendisse potenti.</p>
</div>
</div><!-- end pageFrame -->
</body></html>
Any help is greatly appreciated. At the moment I have a css layout nearly done. It works fine in IE and Firefox except for that the left navbar does not push the footer down. Instead it jumps out the parent div. The 2nd (maincontent) and 3rd (right column) do push the footer down. This wouldn't be such a problem if the navbar would contain static content, but it is dynamic and database driven. A simple solution would be to move the navigate thing to the right bar, but sadly I'm not allowed to do that. Layout CSS code Code: #body {
position:relative;
margin:0 auto;
width:94%;
min-width:50em;
max-width:70em;
border: 15px solid #ffffff;
}
#header {
/* border: 1px solid #000000;*/
height: 185px;
background-color:#ffffff;
background-image: url(../images/design/test3.jpg);
}
#outer_wrapper {
background: #ffffff url(../images/design/background_3.gif) repeat-y left;
border-top:none;
border-bottom:none;
}
#wrapper {
background: url(../images/design/background_2.gif) repeat-y right;
}
#container {
width: 100%;
float: left;
margin-right: -200px;
background: #ffffff url(../images/design/background_2.gif) repeat-y right;
/*border:1px solid #000000;*/
}
#content {
margin-right: 200px;
/*background: url(../images/design/background_3.gif) repeat-y left;*/
}
#main {
/*border:1px solid #000000;*/
margin-left: 150px;
/* background-color:#bbbbbb;*/
}
#left {
position: absolute;
top:189px;
width: 140px;
/* height: 100%;*/
float: left;
text-align: left;
/* border-left: 2px solid #bbbbbb;*/
font:normal normal normal 12px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#sidebar {
width: 200px;
float: right;
clear:right;
}
#footer {
/* border: 1px solid #000000;*/
background: #304773;
height: 30px;
}
.last {
margin-bottom: 0;
}
.clearing {
height: 0;
clear: both;
}
Div structu Code: <div id="body">
<div id="header"><h1>Welkom bij Overeem de Haas</h1>
</div>
<div id="outer_wrapper">
<div id="wrapper">
<div id="container">
<div id="content">
<div id="main">
</div>
<div id="left">
<? include ("../include/navigatie.inc"); ?>
</div>
</div>
</div>
<div id="sidebar">
<? include ("../include/uitloggen.inc");?>
<? include ("../include/winkelmand.inc"); ?>
</div>
<div class="clearing"> </div>
</div>
</div>
<div id="footer"><p class="content"></p></div>
</div>
navigatie.inc code Code: <div id="navigatie">
<ul>
<li class="menu">Navigatie menu</li>
<li><a href="index.php">Home pagina</a></li>
<li><a href="#">Wat is Overeem?</a></li>
<? ...
echo "<li><a href=\"#\">Contact</a></li>";
echo "</ul>";
echo "</div>";
?>
Live example Can anyone (dev)shed some light on this? I just can't get it to work without messing up the 3rd column. This is my first try at css and i have been at it about a week on and off. I have tried to use examples from here and the o'reilly CSS cookbook. I want to create a two column row of pictures with a caption. I selected DIV as the tool (my css is below). The container DIV looks great. I want the div.float, however, to start a second row when a third picture is added and to continue thereafter with successive two column rows. Unfortunately, each of my rows contain only one picture. here is my css style sheet. A demonstration of the problem can be seen at: http://www.yourline-online.com/demo05/?How_to_create_pages Code: div.float {
float: left;
BORDER-RIGHT: #808080 2px solid;
PADDING-RIGHT: 2px;
BORDER-TOP: #808080 2px solid;
PADDING-LEFT: 2px;
FONT-WEIGHT: lighter;
FONT-SIZE: medium;
PADDING-BOTTOM: 20px;
MARGIN: 16px 2%;
BORDER-LEFT: #808080 2px solid;
COLOR: #000000;
PADDING-TOP: 2px;
BORDER-BOTTOM: #808080 2px solid;
HEIGHT: 200px;
WIDTH: 150px;
BACKGROUND-COLOR: #ffffff;
TEXT-DECORATION: none
}
div.float p {
text-align: center;
}
div.container {
border: 2px dashed #333;
background-color: #ffe;
}
div.spacer {
clear: both;
}
MY HTML is like this: Code: H1>How to create pages</H1> <P>The headings are used for splitting up the content file. An H1, H2 or H3 heading will dynamically split the document into new pages in the table of contents. An H4-heading is used as a heading within a page. See the following pages...<BR></P> <P></P> <DIV class=container> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 1" src="image1.gif" width=100> <P>caption 1</P></DIV> <DIV class=spacer></DIV> <DIV class=float><IMG height=100 alt="image 2" src="image2.gif" width=100> <P>caption 2</P></DIV> <DIV class=spacer> <DIV class=float><IMG height=100 alt="image 3" src="http://www.yourline-online.com/demo05/image3.gif" width=100> <P>caption 3</P></DIV> <DIV class=spacer></DIV></DIV></DIV> Say I have the code: Code: <div style="float: left">left</div> <div style="float: right">right</div> In Opera, Firefox and IE, "left" will be on the left side of the scren, "right" will be on the far right. Now let's say I nest those two in a parent. I want the parent to expand with the child's content, so I float it too: Code: <div style="float: left;"> <div style="float: left">left</div> <div style="float: right">right</div> </div> In Firefox in IE, "left" is still on the far left and "right" on the far right. In Opera, it collapses the div so they're right next to each other, or "leftright". Now I could set a width of 100% on the parent, but the situation I'm actually using something like this in is more complicated -- padding, margins, etc. So setting a width of 100% makes the parent overflow it's parent nodes. I've tried not floating the parent and setting it to overflow: auto, but that doesn't seem to work either. Is there an easy fix I'm missing? Ok, I've created an XHTML/CSS site that looks fine in IE5+, Mozilla, FireFox and Netscape. It almost works in Opera and on a Mac but it seems something slightly is going wrong. The biggest problem is on the Mac, while the page looks fine, for some reason part of the left div goes over to the right, making the right div drop below it. I am sure it is just a CSS problem with the position or maybe float but if I could get someone to pin point the problem it would save me a lot of time. Also on the Mac and in Opera, my columns have a gap at the very bottom of the page somehow, not quite sure why? They seem fine in the other browsers. Also, just another quickie, in IE4.0 does it not support columns of floats? My site just expands the full length and ignores the float left rule, any ways to get round this? The site URL is: www.gladiatorszone.co.uk/home/gladiators/ Thank you in advance to anyone that can help. I'm including some images within a UL. I've coded them in there to float. IE displays the list as I want but NN and Opera won't play along. In fact they both "get it wrong" in different ways. What am I doing wrong? (as you can see it is for a course and it is important to me to get it right not just good enough). Here's the address. The CSS coding is on the actual page for easy viewing. link Greetings, Basic Layout is: Page-Containter -> Header-Container -> Side-Container -> Content-Container -> Footer-Container Header is normal Side is a Float Left with a width of 250 Content has a left margin of 260 (to allow for the Side-Container) Footer is normal. Pretty basic. In the content area there are more divisions to handle different sections of data. The problem is that in some of the content sections, I need to have dynamically allocated "blocks" of data that form psuedo "columns". I do this by doing a float:left on each of the content blocks. (generally a 250px width) That way if I show 1 or 5, they all snug up next to each other and wrap properly in the browser. Still pretty basic. Until ... drum roll please ... the next section. Since the content is "float:left", it's removed from the layout and the following sections will just "snug up" next to the last content block. I want the section to "clear" the previous content division, but don't really have a clean way to declare the "height" of that division, due to the dynamic nature of the data. Silly Rabbit ... just do a clear:left !! In IE it works fine. In Firefox, the clear:left command is clearing the previous container! (side-container ... aka: left nav bar) First question: Which browser is right? is IE right and the clear:left should be contained to it's own division? or is firefox right and the clear:left checks all float:left regardless of division? Second question: If IE is right, what is the fix ... if Firefox is right, how should I actually structure this? I'm doing a 2 column layout via css (my first attempt at doing full css layout) and I'm having some problems in firefox getting it to work right. Code:
#navBar{
float: left;
width: 20%;
margin: 0px;
padding: 0px;
background-color: #eeeeee;
border-right: 1px solid #0163CB;
}
#content{
width: 80%;
float:left;
}
then my divs are as follows:
<div id=navBar>
stuff
</div>
<div id=content>
more stuff
</div>
The problem is that in firefox the top of content sits directly to the bottom and left of the end of navBar . If I set conent width to 78% it seems to be fine but it there are borders inside content that i want to take up 100% of the remaining page. Thanks Dave Hello, I am a fan of css and use it all the time. My one and only one problem with it is centering an image in a column that has been floated right. I've tried numerous ways to do this, but none have worked. Usually I end up adding a 2 column table, fixing the right column with x px, then adding images in rows in the left table column. This really does not center the image for all screen sizes, but it does move the images to the left. Also, margin-right:xpx would do about the same thing. This long-winded explanation leads to my css question: Is there a way to center images in a column that has been floated right? Maybe I am over-looking the obvious. Regards, Lee I have the following: Quote: <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> <div class="video"> <h1>Header</h1> <p><a href="#" title="title"><img src="images/01.jpg" alt="alt" width="150" height="150" class="img-left border"/></a></p> <div class="redBG border" style="margin-left:180px;"> <p><strong>Content</strong></p> </div> </div> Not the nicest of code but it'll do for now. I want each div with class=video to come under one another but at the moment, the 2nd div starts just after the text in the first div and not actually under it. This is in the middle column of a 3 column CSS layout. The bottom is what the .video class has. Quote: .video { margin-bottom:10px; } Any help? Hello! I'm new to CSS, so any help would be greatly appreciated! I'm working on this page: sugarhooker[dot]com/testing/index2.html *The CSS is included in the head The right column is suppose to start where it says 'Are you hooked...' It should be right underneath the navigation bar. Anyone know what I'm doing wrong? Thanks in advance! Hello there! I am new here.. So Hello to all of you people. I am having a problem. I run my website locally and i can preview it fine in chrome, firefox and ie.. but i have a problem with opera. I see a white space under my footer.. Let me give you my code and please tell me your opinions! Code: * { padding:0; margin:0 0 0 0px; outline:0; }
html, body { height:100%; }
Code: /* center all content */
.center { width:950px; margin:0 auto; }
/* keep all content except footer */
#wrapper,
#wrapper-error
{
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -82px;
}
#wrapper-error { margin-bottom: 0px; }
.footer
{
width:100%; height: 82px;
position:relative;
background-image: url('../images/bgfooter.jpg');
background-repeat: repeat-x;
-moz-box-shadow: 0px -13px 130px 20px #808080;
-webkit-box-shadow: 0px -13px 130px 20px #808080;
box-shadow: 0px -13px 130px 20px #808080;
}
.push
{
width:100%; height: 82px;
position:relative;
}
Thank you! Hi, have a weblog, powered by wordpress, styled with css. it looks all right in firefox & IE, but i'm not too happy with the look in opera, as the content has a large blank gap between the first post and the rest of the content. to view my site: http://www.jarra.nl/ CSS: http://www.jarra.nl/css/weblog.css and this is a screenshot: http://www.jarra.nl/_TEST/opera.gif I can't find out what's causing it, and don't have an idea how to solve it, any help is appreciated a lot.. thanx, jarra Sorry to bother you guys again, but I'm having some image and CSS related problems with IE and Opera. I've just finished implementing sIFR into my textpattern-powered journal, and have now come across some odd bugs in Opera and IE. The first problem is apparent in Opera and IE, which involves the browsers enlarging my image icons from the 16px x 16px to twice their size. Here is a link to some screenshots: Internet Explorer and Opera Only FireFox renders the page correctly. However, since IE contributes to 60% of my visitors I need to ensure that I fix this bug! Internet Explorer also displays the main blog/article below the sidebar content. This should be apparent in the IE photo, if not, please check out: my website to see what I mean in your own browsers. I believe the second problem can be fixed with CSS, but I'm not even sure where to start looking! Any help would be greatly appreciated! Sajid Hi, Well, they're at it again, those cheeky browsers. Check it out. I have a site that consists of a main, central container, with a background image of 675x1px. So far I also have a top banner and a menu bar both 600px wide. The extra 75px are drop shadows either side of the main box of colour. In IE, I put my banner and menu divs into the container and everything works fine - they're nicely centred and look good. However, in opera/firefox, the divs are over to the left of the central container, and hence screw everything up. Also, even though my central container has 100% height, in Opera it doesn't extend to the bottom of the page. Here's the CSS: Code:
/* CSS Document */
body
{
background-color:#E1FFDC;
text-align:center;
margin:0px;
}
#container
{
width:675px;
height:100%;
background-image:url(mainbg2.gif);
background-repeat:repeat-y;
margin-left:auto;
margin-right:auto;
text-align:center;
}
#mainphoto
{
width:600px;
height:278px;
margin-left:2px;
background-image:url(maintop.jpg);
position:relative;
}
#menubar
{
width:600px;
height:39px;
margin-left:1px;
position:relative;
}
mainbg2.gif is the central container background And the page is here Any help would be much appreciated. Cheers NEWSFLASH Problem solved - i basically just took the images out of their divs. I still have a problem with Opera not stretching the div down though, but I think that will be solved once I put some content in. Here is my design. Look at it in IE and/or Firefox. Everything looks right. Now look at it in Opera. You can see some of the "wrapper" layer, which I've given a pink background. Is there any way to fix this? Here is my code: Code:
<html>
<head>
<style type="text/css">
body {
background: #3e1f00 url(../images/background.gif);
background-position: top center;
font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 80%; color: #FFFFFF;
margin-top:30px;
}
#top {
background: red;
position: relative;
margin-left: auto; margin-right: auto;
width: 758px; height: 167px;
text-align: left;
}
#wrapper {
position: relative;
margin: 0 auto;
width: 758px;
background: pink;
}
#middle {
position: relative;
margin: 0 auto;
width: 758px; height: 200px;
text-align: left;
background: yellow;
}
#bottom {
position: relative;
margin-left: auto; margin-right: auto;
width: 758px; height: 23px;
text-align: left;
background: green;
}
/*** see http://www.positioniseverything.net/easyclearing.html
for explanation of Tony Aslett's elegant hack ***/
.clearing:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearing {
display: inline-block;
}
/* hides from IE/Mac \*/
* html .clearing {
height: 1%;
}
.clearing {
display: block;
}
/* end hide from IE-Mac */
/*** end clearing hack ***/
</style>
</head>
<body>
<center>
<div id="top">
TOP
</div>
<div id="wrapper" class="clearing">
<div id="middle">
MIDDLE
</div>
</div>
<div id="bottom">
BOTTOM
</div>
</center>
</body>
</html>
This page - juicyart dot net / test.html (sorry I can't post URLs yet) - displays fine in IE, but not in Firefox or Opera. In those two browsers the top image and white background of the container div won't display. The top image displays, but not completely - only about half of it shows up. Any suggestions? I can't figure this out for the life of me and W3C validates my css as valid so I'm at a loss. Hi. I've been banging my head against the wall for ages with this! Could someone please explain, and perhaps offer some code, on why the footer on the Home and About Me pages (http://www.freewebs.com/mike-elley/) renders the page header and title below, differently. These pages seem to work fine in IE6. I'm testing on Opera 7.23 by the way. Thanks very much for any help! Hello, I have a code below which works fine in IE and Firefox. However in Opera the 4 boxes are displayed in a 2x2 form insetad of 4x1. Any idea? 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>Untitled Document</title>
<style type="text/css">
#container {
margin: auto;
padding:0px;
width: 980px;
border: 1px solid #000000;
}
#center {
margin: 0px;
padding: 0px;
clear:both;
}
#left_panel {
width: 240px;
float:left;
border:1px solid #ff0000;
}
#main_panel {
padding: 0px;
margin: 0px;
margin-left:295px;
width:660px;
border:0px solid #ff0000;
}
#main_panel #main_panel_header {
padding-top: 5px;
border:1px solid #ff0000;
overflow:hidden;
}
#main_panel_header .photo_box {
float:left;
background-color:#000000;
}
#main_panel_header .photo_box img {
background-color: #000000;
height: 115px;
width: 140px;
border:2px solid #000;
border-bottom:0px;
margin:0px;
}
#main_panel_header .photo_box a{
color: #ffffff;
text-decoration:none;
font-size:10px;
font-weight:bold;
display:block;
text-align:right;
text-transform: uppercase;
width:140px;
float:left;
padding:2px;
margin:0px;
background-color:#000000;
}
</style>
</head>
<body>
<div id="container">
<div id="center">
<div id="left_panel">
Menu1<br/>Menu1<br/>
</div>
<div id="main_panel">
<div id="main_panel_header">
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
<div class="photo_box">
<img src="style/tmp/pic.jpg" />
<a href="#">Link</a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
|||||||