|
CSS - (solved) Css Float Layout Problem
Hello all, first time poster here...
I was working on a new site for an RP environment I gm using a table based layout. I ran into some problems and got fed up with it, So now for all the great reasons out there I decided to better learn CSS overnight and make the layout based on div tags and all that good stuff instead. After piling all my information into the page I've been having some funky stuff happen to the layout; the right most column moves down below the other two if the window takes up less than the 1000px width I've allotted. Does anyone know why and a way to fix this? Please feel free to rip on my usage of png-s or anything else you'd like to also Here's a temp link to the page on my site: louisjustmanDOTcom/prinz/newMOTD.html ...and a direct to my css file too: louisjustmanDOTcom/prinz/css/master.css Thanks a lot in advance! EDIT: Wow; all that time and it was a stupid mistake... extra closing div tag where i didn't need one. Similar TutorialsHi all, I've spent several hours to solve this problem, but found nothing working . The problem (well, there are much more problems ) is that I use 2-cols layout, so the left column (menu) is floating left. And now I need in the one page's head to get 2 images, one aligned to the left, the other to the right and actual text of the headings. I've found 2 good solution: 1) Classic, use float:left on one image, float:right on the other, and text-align: center on the headings. First thing I don't understand, why the image on the right is moved down? You can see it here. Then, the clear property should be used to force the headings to end bottom the images, but clear can't be used, because it also clears the menu (floating to the left) so the headings ends bottom the menu. 2) Using absolute/relative positioning - headigns can be made relatively positioned, images absolutely, one with left:0 and the other with right:0, but then the contents following after the headings is moved to the top, mixed with the heading. Similar problem is being solved in this thread, but I didn't found there anything working . Can anybody help, please? Here are used CSS: Web.css, Fotogalerie.css. 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. Hi, Is it possible to make the following "LEFT MENU" sits on left side and "RIGHT MENU" on right side without using "float" ? <div id="menu"> <div>LEFT MENU</div>'; <div>RIGHT MENU</div> </div> Thank you. I'm having trouble with a table layout I'm trying to convert to a float layout my attempt so far is as follows Code:
--loop--
lfloat{
float:left
}
boatLeft{
width:100px;
}
#cls# gets replaced with a class that only sets the background for odd and even rows.
<div class="lfloat boatLeft #cls#" style="border-right:1px solid black;height:150px;">
<a href="javascript:void(0);" onclick="displayVessel(#rssearch.YSNNUM#);">View Details*<br />
<img id="thumb#currentrow#" style="border-color:white;width:100px;" src="#getpic.thumbpicname#" alt="#boatname#" />
</a>
</div>
<div class="#cls#">
<div class="boatLeft lfloat">
<strong>Boatname</strong>
</div>
<div>
<strong>#BOATNAME#</strong>
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
LOA
</div>
<div>
#loam#m / #loaft#' #val(loain)#"
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Builder
</div>
<div>
#MFGNAME#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Naval Architect
</div>
<div>
#hulldsnr#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Designer
</div>
<div>
#designer#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Decorator
</div>
<div>
#decorator#
</div>
<div class="clear"></div>
<div class="boatLeft lfloat">
Stylist
</div>
<div>
#stylist#
</div>
<div class="clear"></div>
</div>
<div class="clear"></div><!--- clear the float for the outer div --->
-end loop--
in both ie and FF this looks terrible. I'm not sure If I should just be using a table here or if I should be using floats. Gary you should probably have somehting to say about that... the attachment show's how its supposed to look. The black boxes represent block level elements, not borders. Dave I am having some trouble using float to align containers on my page. Here is what it looks like. http://filebox.vt.edu/users/kfalcon...less_broken.JPG In this image the blue area is the "content" id, the red area is the "rostercontainer" and the cream color is the "profilecontainer". I would like the profilecontainers to appear in two columns instead of one as in this image. The problem is when i add 'float : left' to the profilecontainer or rostercontainer I get the following: http://filebox.vt.edu/users/kfalcon...scrn_broken.JPG The two profile containers are now next to each other, but the rostercontainer seems to be missing, and the profilecontainers are not being loaded into the content area. From the index.php page i am using javascript to load the roster.php page into the content area. Code:
<div id="main-nav">
<dl>
<dt id="roster"><a class="loadinto-content" href="roster.php">Roster</a></dt>
</dl>
</div>
<div id="content">
<h2>Main Page</h2>
</div>
The roster.php page looks like this: PHP Code: <div class="rostercontainer"> <?php // Go through all profiles while($profile = mysql_fetch_assoc($profiles)) { ?> <div class="profilecontainer"> <img src="image3.gif" class="floatLeft" width="150" height="115" alt="image 3" /> <strong><h3 class="profile"><?php echo $profile['name']; ?></h3></strong><br/> <?php echo $profile['active']; ?><br/> <?php echo $profile['status']; ?><br/> <?php echo $profile['ride']; ?><br/> <?php echo $profile['major']; ?><br/> <?php echo $profile['hometown']; ?><br/> <?php echo $profile['info']; ?><br/> <div class="editlink"> <a href="roster_admin.php?idx=<?php echo $profile['id']; ?>">edit</a> </div> </div> <?php } ?> </div> And here is my css file, ive only included the important parts. Code:
#page-container {
width: 760px;
margin: auto;
}
#content {
font-family: Tahoma, Arial, Helvetica, Sans-serif;
background: blue;
border-top: 1px solid #efefef;
padding: 25px;
}
div.profilecontainer {
position: relative;
width: 325px;
height:200px;
margin: 10px;
padding: 5px;
background-color: #ffe;
border: 1px dashed black;
}
div#content div.rostercontainer {
background-color:red;
float : left;
}
I am not sure if this is a CSS issue or some problem with the javascript library(HTMLHttpRequest) i am using to load pages into my content area. It is really odd the adding the float to the roster/profile container would cause such a behavior. Any ideas on how i can fix this? Thanks for any help, Karl Hi all, This is my first post here so go easy on me. Firstly, please look at this: h ttp://digitalformula.net/temp/layout.jpg - I can't post a proper URL since I'm a new user ... sorry for the space at the start of the address. Anyway, the top part is what I have now and the bottom part is what I'm trying to get to. Can someone please assist with the CSS for this? I know just enough CSS to be dangerous but I can't seem to find the right way to put the captions under the images without the image on the right dropping below the image and caption on the left. I've tried all different types of float etc but nothing seems to work - I know it's something I'm doing wrong as this is probably one of the more basic questions posted here. ANY help would be much appreciated! Thanks, digitalformula 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 I have been trying to figure out how to achieve this layout with css for about an hour. I'm sure it is something very simple that I am missing. Can anyone help? It looks like the image at the address below. tophermorrison.com/css_layout.jpg I have 3 divs 1.banner (100px tall 100% wide) 2.content (100% tall 650px wide) 3.image (100px x100px) I want the image to stay relative with the content and the content to be centered. The image should be 0 from the top and centered over the right edge of the content. Is this possible? Hello, I'm new to css layouts. I had to float:left every element so the heights stretch problem is if the image in "page_c_left" is wider than 45% then "page_c_right" will automatically go on the next line. (in Firefox, IE seems to wrap the text without moving the element). also, i wanted to have the content displayed first for non-css browsers, but the examples used position:absolute. when the impression i got was that float is preferable to position. i'm very confused on which method to use for layouts. what method would you use for complex css layouts? float, position or other? this is code with the text wrap problem Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
#main_c {
float:left;
width:770px;
padding: 10px;
border: 1px solid black
}
#header_c {
float:left;
border:1px solid brown
}
#page_c {
float:left;
width:100%;
border:1px solid red
}
#page_c_left {
float:left;
padding:10px;
border:1px solid blue
}
#page_c_right {
float:left;
width:55%;
padding:10px;
border:1px solid green
}
#footer_c {
float:left;
border:1px solid yellow
}
</style>
</head>
<body>
<div id="main_c">
<div id="header_c">
THIS IS THE HEADER
</div>
<div id="page_c">
<div id="page_c_left"><img src="../../photos/image.jpg" alt="image" /></div>
<div id="page_c_right">RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br />RIGHT SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /> SIDE paragraph RIGHT SIDE paragraph as ohajst aisdncn uajajs
ajshd hfhgg<br />lakshh toyt a bTr asnf f Uahdlalsl jahjsu aujsjdhduwhtn ausud aushd aiua akshdusjj<br />
ka u annf au ffsdjkfjs didjs dd sjskjdk<br /></div>
</div>
<div id="footer_c">
THIS IS THE FOOTER
</div>
</div>
</body>
</html>
if you could help, thank you 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'm new to CSS and I'm in the process of building my first table-less page. It is quite exciting, but I'm having one major problem. For some reason, I cannot get my main content div to float next to my side bar navigation. In the normal write up, it works in IE but not Firefox or Opera. I took just the essential parts of the code to create a test page for this forum, and now it doesn't even work in IE!!! Here is the code: Code:
<html>
<head>
<style TYPE="text/css">
#topNav {
margin: 10px 0px;
border: 1px solid #000;
width: 100%;
}
#sideNav {
margin-right: 10px;
border: 1px solid #000;
width: 150px;
}
#main {
margin: 0;
border: 1px solid #000;
float: left;
}
</style>
</head>
<body>
<div id="topNav">
Top Nav
</div>
<div id="sideNav">
Side Nav
</div>
<div id="main">
MAIN CONTENT AREA
</div>
</body>
</html>
Any help would be greatly appreciated!!! Page: http://dev.donmyersministries.com/test.html Ok, time is money, I decided to change my design a little bit because the way I was headed wasn't working. Now this isn't, I'm fixin to just go back to tables, this is retarded. Anyway, my problem. In FireFox/Opera my right hand column is fine (2 column layout), in IE however, it is pushed down below the left hand column. The left hand side is floated left. An image if it helps at all: Please help, before I abandon CSS layouts, again. later 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. 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 thanks in advance for the help! if you can take a look at the code below, you will see that all the subcontents are not aligned right. i am trying to display subcontent1, subcontent2 and subcontent3 in row1. then, repeat it for row2. so it will look like 3 cols X 2 row table. what i am doing wrong? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <style type="text/css"> #content { margin-left: 200px; border-left: 1px solid gray; margin-right: 200px; border-right: 1px solid gray; padding: 1em; } #subcontent2 {float:left; height:50px; margin:0 0 .2em .5em; background:#eee8aa; border:1px solid black; } #subcontent3 {float:right; height:50px; margin:0 0 .2em 0; background-color:#CCCCCC; border:2px dotted red;} #subcontent1 {margin-left:400px; border:1px solid blue; margin-right:150px; padding:1em; } #subcontent p {margin:0 0 .5em .5em; font-family:Verdana; font-size:11px; background-color:#CCCCCC; border:1px solid black; text-align:center } </style> </head> <body> <div id="content"><h2>Subheading</h2> <p>fg gdhoiuw eiouhe viouwbfu8igdofi goiwehviuh eropihpvoih epfiovhpoefvh fbv iopwehfviu teopiuhrguioh gfdg tgt wg</p> <p>afd dfouighoiweh oiehoiuehoiu iuashfoiuerfiugeroigriugh lirduivh lrehv ioperviuherviuo qouitrhvui tgvwre</p> <p>rg uwtdh guoiseh uisgoiunb oiutruighepguihgptuhg dfhgpeorhv oiuhgoihetoishgoi </p> <p>sdfgdf gwetguh reigqre uyreaiu qeroi er fdgfg thgwrtighuroiu og9hghgtuih wtpghwepipeg ptbsrthb </p> <div id="subcontent2">dfgdghureuererg uiruykerf fgsgs gsgh sdg sfg fdsgg</div> <div id="subcontent1"><p id="st3">zones:</p><select name="selZone" size="10" multiple class="sel1"> <option value="%%">* Select One *</option> <option value="1">Ferrari</option> <option value="2">Lamborghini</option> <option value="4">Porsche</option> <option value="5">Konigssen</option> </select></div> <hr align="right" width="276" id="dV"> <div id="subcontent2">dsfwuy rbefuyerwfy erg</div> <div id="subcontent1"> <textarea name="s" rows="10" cols="10"> fiyrqeyfreuyf uuyqfyu fgg tg sdgsgfdg teg tg tg wgtgtrg rgregfwregfwgwg wtgrtg rtghtrghg trgtrgtrg</textarea></div> <div id="subcontent3">this is subcontent3</div> </div> </body> </html> Hi all i have a problem with a website i am building. It is very annoying. I have a masterpage with a float left menu, a contentplaceholder and a float right element. It used to work correctly but now it floats right OK but when I zoom in the left menu and content zoom correctly but the right float overlaps the content as though it is stuck. I have tried all sorts of things but nothing I can find works. Here is the css : body { height:100%; } #div.row span.left { float: left; text-align: left; font-weight: bold; color: #fff; width: 49%; } #div.row span.right { float: right; text-align: right; font-weight: bold; color: #fff; width: 49%; } #container { width: 100%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; line-height: 100%; } #top { padding: .5em; background-color: #FFFFFF; border-bottom: 0px solid gray; height: 46px; font-family: Arial, Helvetica, sans-serif; font-size: 2.5em; color: #006000; text-align: center; } #top h1 { padding: 0; margin: 0; font-family: Arial, Helvetica, sans-serif; background-color: #FFFF66; } #leftnav { float: left; width: 167px; height: 483px; margin: 0; padding: 0; height: 409px; list-style: none; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 1em; } #link { } ul#navigation { width: 9.2em; float: left; margin: 0 0px 0 0; padding: 1em; height: 497px; font-family: Arial, Helvetica, sans-serif; font-size: 1em; color: #0207f6; } ul#navigation li { list-style:none; background-color:#ECEEFA; border-top: solid 1px #ECEEFA; text-align: left; margin: 0; } ul#navigation li a { display:block; text-decoration: none; padding: .25em; border-bottom: solid 1px #39f; border-right: solid 1px #39f; height: 21px; width: 141px; } #rightnav { float: right; width: 160px; margin: 0; padding: 1em; height: 399px; font-family: Arial, Helvetica, sans-serif; text-align: center; right:0; } #content { margin-left: 203px; border-left: 0px solid gray; margin-right: 0px; border-right: 0px solid gray; padding: 1em; width: 100%; height: 20px; font-family: Arial, Helvetica, sans-serif; font-size: 1em; text-align: center; margin-top: 0px; width: 619px; } #h2 { color:#ff0000; font-weight: bold; text-align:center } any ideas anyone? Andy 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've been working on this project for over a month and for some reason cant get my tic-tac-toe container to float in the middle of the page in IE6. The container that is causing the problem is called "<div id="tic-tac-toe">". It centers perfectly in Firefox and IE7 but stays far off to the right in IE6 no matter what I do. Please help if you can help me figure this out your a genius!! Here is a link to to the site: http://dev.blackstonemedia.net/dfh/products.html Hello, Not so long time ago I had a problem in firefox when i placed float content in another div. Basically the parent div did not want to wrap my float div's. Thanks to Kravvitz I solved this by following the url over here http://css-discuss.incutio.com/?page=ClearingSpace However today I tried doing the same thing, and I realized that now, my screen is showing fine on FireFox, but not on IE6.0! here I placed some html to show my problem: Code: <html>
<head>
<style>
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
div.myBox{
border: 1px solid red;
display: inline-table;
}
div.myBox:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
div.dofloat{
float:left;
border: 1px solid green;
}
</style>
</head>
<body>
<div class="myBox">
<div class="dofloat">
float1
<br />
<br />
</div>
<div class="dofloat">
float2
<br />
<br />
</div>
</div>
</body>
</html>
If you open this html page in firefox you will notice that a red border is wrapping two green boxes. However opening it in IE6.0 shows a red line in top, and the two green boxes under it. I know that this is because the float objects are not wrapped automatically, however the hack i have placed in the above html solved it for fire fox. What would be the best way to make it work in IE6.0 as well? I did find a hack, that is to place height: 1px; in the div.mybox body: Code: div.myBox{
border: 1px solid red;
display: inline-table;
*heght: 1px;
}
However I am not sure if this is the best way to tackle this problem... thanks for any comments Regards, Sim085 |
|||||||