|
CSS - 2 Column Float Problem
I 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 Similar TutorialsHi 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 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> 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! subject isn't too good anyhow.. i have 4 cells __ __ |1 | |2 | --- --- __ __ |3| |4 | --- --- 2 and 4 are said to float right, such that 1 and 3 define the height of the page.. but.. when the contents of 2 go LONGER than the contents of 1, number 4 doesn't float right properly.. instead this happens __ __ |1 | |2 | --- | | --- | | |4| --- --- __ |3| --- do you see that? 4 tries to float right, but since it's called underneath 1, and 2 is extended, floating right relative to the page doesn't make it ACTUALLY float right any thoughts that will render this properly? (namely that cells 1 and 3 will inherit the height of 2 and 4 somehow?) Hello, I have developed some very simple code. This code is working well on FireFox (and also netscape) and Operan but not well on IE6. The code is very simple. I have a div tag that containes two other div's. One div contains text to be aligned to the left (using float: left) and another div contains a list (ul) to be aligned to the right (using float: right). The following is the code I have so far: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
.leftText {
float: left;
}
.rightText {
float: right;
}
.top ul {
width: 100%;
text-align:center;
margin: 0;
padding-left: 0;
border: 0;
list-style-type:none;
}
.top ul li {
display: inline;
text-align: center;
float:left;
border-right:none;
background-image: none;
padding-left: 5px;
}
</style>
</head>
<body>
<div class="top">
<div class="leftText">
This is the text on the left.
</div>
<div class="rightText">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
</div>
</body>
</html>
Now I did some testing before posting here. First of all I tried to hack it. What I did is add *float: right; inside the .top ul li {...} element. This naturally was not cought by FireFox and Opera, and thus the website still looked fine on these browsers. However when I tried it on IE6 I had a surprose. The list was alligned to the right, but instead of writing "one two three", it wrote "three two one". I do not know how best to solve it, and be greatfull for any advise. thanks and regards, sim085 I started a new post on this one because it is something I have just noticed in FireFox, but not in IE6. I have created a new html page with a top, middle and bottom div sections. The middle section contains two other div's, left and right. All these div's I wraped inside another div called container. What I did (with CSS) is set the container with a width of 400px, and a solid red border. I then set the top and bottom with a height of 40px each. I did not set the height of the middle section since that would grow according to its content. The right div I set it as float:right and the left div I set it as float:left. This worked fine but then I decided to set the bottom div as float:left ... and it broke in FireFox In FireFox, the container wraped only around the top div, and the other middle and bttom div remained outside that white container. Here is the code I used: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style>
body {
margin: 0;
text-align: center;
padding: 10px;
background: #00ff00;
}
.container{
width: 400px;
margin: 0 auto 10px auto;
padding: 0;
text-align: left;
background: #ffffff;
border: 1px solid #d1c7ac;
}
.top {
height: 40px;
}
.middle{
/*
can not put height here,
since the middle section
data changes from page
to page.
*/
}
.left {
float: left;
width: 200px;
}
.right {
float: right;
width: 200px;
}
.bottom {
height: 40px;
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="top">
Top Section
</div>
<div class="middle">
<div class="left">
Left Section.
</div>
<div class="right">
Right Section.
</div>
</div>
<div class="bottom">
Bottom Section.
</div>
<!-- placed here -->
</div>
</body>
</html>
As I said this problem only apears in FireFox, and in IE6 it does not show. I know I am doing something wrong, mostly because I still do not know all about what a float do. I know it is because of the float thing. because what I did is add an (space) before the end of the container div wraped around the middle, bottom and float as well. I am sorry for posting yet another question on floats. Thanks for any advise and sugestions. regards, sim085 I have the following pretty straight forward and simple layout borders For some reason the "right" floated div "Add Account" is not going to the right in FF3. Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Borders</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
form
{
margin:0px;
}
.container
{
position:absolute;
top:0;
left:0;
}
.outer
{
float:left;
margin:10px;
background-color:#FFFFFF;
border:1px;
border-style:solid;
border-color:#990000;
}
.inner-left
{
float:left;
padding:10px;
}
.inner-right
{
float:right;
padding:10px;
}
</style>
</head>
<body>
<div id="container" class="container">
<div class="outer">
<div class="inner-left">
<form>
Filter
<input type="text" name="filer" id="filter" value="" size="20" />
<input type="submit" name="go" value="Go" />
</form>
</div>
<div class="inner-right">
<form>
Add Account
<input type="submit" name="go" value="Go" />
</form>
</div>
</div>
</div>
</body>
</html>
It renders correctly in FF2, IE6 and IE7, but I just can't figure how why it won't display correctly in FF3 (version 3.0.5 to be precise) - just when I thought I'd finally "mastered" most css issues! Any help greatly appreciated. I usually never have problems with CSS layouts but whatever reason I'm struggling with this one... I have a container div and inside it I have 4 divs (2 on the left stacked on each other and two on the right stacked on each other). Code: #container {
height: 604px;
width: 920px;
}
#container_left {
height: 604px;
width: 597px;
float: left;
}
#container_right {
height: 604px;
width: 323px;
float: right;
}
#left_top {
background-image:url(images/001.jpg);
background-repeat:no-repeat;
height: 501px;
width: 597px;
}
#left_bot {
width: 597px;
height: 103px;
}
#right_top {
width: 323px;
height: 308px;
background-image:url(images/002.jpg);
background-repeat:no-repeat;
}
#right_bot {
background-image:url(images/003.jpg);
background-repeat:no-repeat;
width: 323px;
height: 296px;
}
all the divs are empty at the moment (just a bg image) except for #left_bot....HTML below... Code: <div id="container">
<div id="conrainter_left">
<div id="left_top"></div>
<div id="left_bot"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Get Started','','images/start_rollover.jpg',1)"><img src="images/start.jpg" alt="Click here to Get Started" name="Get Started" width="597" height="103" border="0" id="Get Started" /></a>
</div>
</div>
<div id="conrainter_right">
<div id="right_top"></div>
<div id="right_bot"></div>
</div>
</div> <!--end container-->
The results I'm getting...The container left div looks good. The container right div is not to the right of the page, but instead to the left of the page below the left div. Instead of floating it right its pushing down to the next line. Any help would be appreciated. Thanks. I am trying to re-write a forum post box that is fully CSS and XHTML compliant. I have got this working successfully in Safari, Firefox and Opera on the Mac, but it fails on IE6 on the PC. I cannot work out what the problem is. Can anyone help? (URL fixed) http://centerstageproject.com/test/index2.html As you can see that box that contains the post flows to the same height whatever the content. Screen shot from Safari attached. In IE6 though the left content (ie member details) does not begin until the post content is finished on the right side of the box. (inline css for purpose of post only) Anyone know how to get the "float2" div to display at the upper right of the "containerDiv" div rather than pushed down to below "Float1"? Looking in firefox, I can't make this happen.Thanks in advance! Code:
<BODY>
<!--- MAIN CONTENT --->
<div id='Float1' style='width:150px; height:150px; float:right; display:block; border:1px solid black;'>
asdf
</div>
<img src='images/productdetails.gif' border='0' style='margin-left:18px; display:block; margin-top:10px;'>
<div id='containerDiv' style='width:560px; border:1px solid black; position:relative; display:block; vertical-align:top;'>
<div id='Float2' style='float:right; border:1px solid black; clear:right;'>
<img src='../thumbs/sku/test.gif' style='display:block; margin-top:2px;'>
</div>
</div>
</BODY>
i have the following: .topDiv {background-image:url(images/topbg.gif); width:796px;height:60px; margin-top:1em; } .menuBar {background-image:url(images/menubar.gif); width:796px;height:30px; margin-top:-59px; } .compLogo {background-image:url(images/topleftimg3.gif); width:305px; height:123px; float:left; margin-left:1em; margin-top:-60px;} what i want is to float compLogo over menuBar and topDiv. however, compLogo floats over topDiv and then menuBar floats over compLogo. how can i force the menuBar to appear under compLogo div? thanks for the help in advance I would be VERY appreciative if someone could tell me why the big quote mark in the bottom left text box of this page does not look correct in IE7...it looks great in Firefox...the big quote mark should be raised above the text as it is in FF.... I'm floating 2 <p> elements there, and put borders around the <p> elements to see what was happening...I even put the <p> elements inside a container <div>, but that didn;t help....I reluctantly used a negative margin in FF, but the same doesn;t work in IE....Am I missing something simple here? Thanks for any help... When you look at http://www.mvcc.edu/cltrl/movies/thecorporation.cfm in IE and FF, you'll immediately notice the difference. In IE, the paragraphs are next to the image. In Firefox, the text is below the image? What's the deal with this? Is it something to do with the float or margin ? |
|||||||