|
CSS - Very Simple Problem Regarding The Float Property
Hi,
Here's my problem: css Code: Original - css Code <div style="width:69%; text-align:center; float:left;"> <div style="width:80%; min-height: 98px; border: black thin solid;"> BLEH </div> </div> <div style="width:30%; text-align:center; float:right;"> RIGHT </div> <div style="width:69%; text-align:center; float:left;"> The above code, should in theory make two "cells", one on the left and one on the right, side by side. Within the left one there should be another box, aligned centrally. This is fine in internet explorer, yet in Firefox & similar browsers it refuses to do this - I'm sure this is something very simple. Many thanks, Alan Similar TutorialsI'm having a problem with a float property placing a nested div outside of a parent box. I've ran validation on both the XHTML/CSS. Both are coming up with no errors. Heres the DIV snippet: Code: <!-- Div snippet -->
<!-- start main -->
<div id="main">
<div class="mainbx">
<!-- top border -->
<!-- top left -->
<div class="tl">
<div class="c"></div>
</div>
<!-- top center -->
<div class="tc">
<div class="c"></div>
</div>
<!-- top right -->
<div class="tr">
<div class="c"></div>
</div>
<!-- top border -->
<!-- bdy1 -->
<div class="bd">
<!-- content area -->
<div id="leftcol">
<pThis column ( leftcol ID ) is correctly placed.</p>
</div>
<div id="rightcol">
<!-- Rounded corner dialog begins -->
<div class="dialog">
<!-- top border -->
<!-- top left -->
<div class="tl">
<div class="c"></div>
</div>
<!-- top center -->
<div class="tc">
<div class="c"></div>
</div>
<!-- top right -->
<div class="tr">
<div class="c"></div>
</div>
<!-- top border -->
<!-- bdy1 -->
<div class="bd">
<div class="c">
<div class="s">
<!-- content area -->
<h1>This is an inline dialog.</h1>
<!-- content area -->
</div>
</div>
</div>
<!-- bdy1 -->
<!-- botom border -->
<!-- bottom left -->
<div class="bl">
<div class="c"></div>
</div>
<!-- bottom center -->
<div class="bc">
<div class="c"></div>
</div>
<!-- bottom right -->
<div class="br">
<div class="c"></div>
</div>
<!-- botom border -->
</div>
</div>
<!-- content area -->
</div>
<!-- bdy1 -->
<!-- botom border -->
<!-- bottom left -->
<div class="bl">
<div class="c"></div>
</div>
<!-- bottom center -->
<div class="bc">
<div class="c"></div>
</div>
<!-- bottom right -->
<div class="br">
<div class="c"></div>
</div>
<!-- botom border -->
</div> <!-- end mainbx -->
<div id="footer">footer text</div>
</div> <!-- end main -->
If I place a float property in the left or right col ID, the whole ID is placed outside of the mainbx class. For instance: Code: /* example w float */
#rightcol {
float: right;
height: auto;
width: 500px;
padding-top: 0px;
padding-right: 35px;
margin-right: 0px;
}
This is how it looks: http://b.imagehost.org/0176/inc_plcmnt.jpg URL Click to view larger image! Now if I remove the float and add a position property: Code: #rightcol {
position:relative;
right:-320px;
top:-190px;
height: auto;
width: 500px;
padding-top: 0px;
padding-right: 25px;
margin-right: 0px;
}
This is how the rightcol is placed: http://d.imagehost.org/0643/cor_plcmnt.jpg URL Click to view larger image! It seems better, but if the black box is re-sized eventually it will end up outside mainbx class ( the purple box ). This leads me to belive that the problem has something to do with nesting. The weird thing is if I add lots of text to the black dialog box, mainbx re-sizes. Any ideas of how to fix this? Thanks for any help or ideas. Hi, Small problem he http://www.salewhale.com/z.html The box with the "What would you like to do?" is as follows: Code: <div class="boxarea"> <div class="boxarea_left"><b>What would you like to do?</b></div> <div class="boxarea_right"><a href='3_changepass.php'>Change Password</a></div> </div> The CSS for this is: Code: .boxarea {
border: 1px solid #0000FF;
background-color: #F5F5F5;
padding: 2px 2px 2px 2px;
}
.boxarea_left {
width: 140px;
float: left;
}
.boxarea_right {
width: 300px;
}
The point is to have the left column (boxarea_left) as 140px, so that the text wraps to the next line. Does anyone have any idea why the border box doesn't really take account of the new line? It simply ignores the divs and has a basic one line height. Of course, if I put a spacer within the boxarea div, the problem will be solved - but this leaves a gap at the bottom of the box - which I dont want. Is there a simpe fix? Thanks very much! Thanks for all the continued help/support. . . Makes learning CSS so much easier! Link: www.vairlinecms.com Question: I set the html up like this on purpose to grasp the concept. <p> tags are block level containers. So each new set of <p> tags should equal start on new line. w/the float property holding a value of left, it floats all content to the left. Since each instance of float occurs in its own container...the two different <p> sets should not be affected. In short, the password: paragraph should be on a new line, not both on the same line. There should be no need to clear it because they are in their own containers - which are block level. Where is my logic/understanding of CSS flawed? HTML: Code: <div id="clientLoginBoxBody">
<form action=#">
<br />
<p class="user">Username:</p>
<p class="pass">Password:</p>
</form>
</div>
CSS: Code: #clientLoginBoxBody p.user, p.pass {
float: left;
margin: 0;
margin-left: 10px;
padding: 0;
font-size: 12px;
text-align: right;
}
Uggghhh, I hate it when seemingly simple things turn out to be very difficult. Ok, so I'm tasked with creating a newsletter and I have an image that I'm floating and there are words around the image. At least there are when you look at it in a browser or any email client other than Office 2007. Office 2007 apparently (just learned this today) now uses the Word engine instead of Internet Explorer. Float (among many, many, MANY other things) is not supported. Is there an equivalent to float? To try and simulate float, I put the images and words in a table and did a reasonable job...when viewed by a browser!!! Honestly, I try to be OS agnostic and just use these things as tools to get my job done. But Microsoft has proved time and again that they have no qualms about completely changing the rules and not supporting previous stuff. I mean, we're talking basic html here!!! Ok, rant over. Anybody have any suggestions on how to simulate a float? Thanks in advance. Well, I'm trying to make a comments-page for a certain thing, and I can't get the image to stop going over the bottom of the div, without using the min-height property. Can someone help?
Code: <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; encoding=UTF-8;" />
<title>Comments on 2005-02-10: February 10, 2005</title>\n
<link rel="stylesheet" type="text/css" href="comments.css" />
</head>
<body>
<h2>Posting on 2005-02-10: February 10, 2005 in <a href="refresh.php" id="title">XMLBlog</a></h2>
<div id="entry" xml:lang="en-US" lang="en-US">
<img src="../resources/images/Neil_Euphonium_3_[F][S{600,h}][32k].png" alt="New Euphonium!" title="New Euphonium!" style="width:30%;" class="left" />
<p class="dream">I can only remember two things... That there were a whole bunch of people from my school playing baritones, which was kind of creepy in this case <em class="entry">and</em> that my section from school in real life and I played this freaky, nonexistent Zelda games. One was for a calculator I had only owned in the dream, and it was spectacular!
</p>
<p class="normal">I brought my "newphonium" to school today.</p>
<p class="normal">We had a pretty normal session in Jazz. <em class="entry">Someone actually got a trombone solo.</em></p>
<p class="normal">Our teacher was back. The entire first half of the period going over our homework. <em class="entry">We learned that dropping a penny off of the <strong class="entry">Space Needle</strong> is very dangerous, since even a baseball would get going at 120 MPH.</em> Later, we began how to calculate things dealing with gravity with a position other than 0 and a velocity over 0.</p>
<p class="happy">We didn't do much in Japanese. All we really did was read Katakana and finish our puzzle. <em class="entry">A few of us found new words.</em> I also told our sensei that my real Japanese same from my ancestors is <ruby><rb>たけした</rb><rt>take****a</rt></ruby>. During resource, I looked over this book with a couple of friends of mine and their friend. <em class="entry">It was so funny, too!</em></p>
<p class="normal">In Health, we continued our lecture on alcohol. <em class="entry">There were some inspiring articles and poems on the subject.</em></p>
<p class="happy"><span class="normal">Class started off with a lock-down. <em class="entry">I used this time to complete a gravity-based program for physics.</em></span> to Due to my premature completion of the paragraph that was due at the end of the period, I just listened to music and read for the majority of English. <em class="entry">A big guy in the <info popup="State of Fear">book I'm reading</info> died.</em></p>
<p class="sad">Before actually eating, I wandered a bit. <em class="entry">It made it so I didn't have to carry my backpack around wherever I went.</em></p>
<p class="normal">We continued on proofs. <em class="entry">It took a bit of effort to do.</em> <span class="happy">Still, we finished the investigation.</span></p>
<p class="normal"><span class="happy">I got my new euphonium for class.<em class="entry">It sounded very nice.</em></span> Though, for a majority of the time I didn't do anything with my section, due to his preoccupation with a couple of other kids.</p>
<p class="happy">I got a ride home</p>
<p class="normal">I had a practice session with my mom, which wasn't the most successful.</p>
<p class="happy">Once done with my homework, I took a two-hour nap.</p>
<p class="dream">The entire thing revolved around this country area that had tiny roads and a <info popup="The salmon eggs would get bigger, then would grow spikes and split apart before returning to their grating to mature more">freaky salmon farm</info>. Also, I remember psychically communicating with my section from Band. <span class="hider">I actually cried over the idea of losing him, but I didn't have tears when I awoke.</span> Also, my old friend, who is a freshman now, was mentioned.</p>
<p class="happy">The dream gave me the idea to call him up. <em class="entry">Apparently, the call woke him up.</em> We talked about how our lives were going, along with school. <em class="entry">Apparently, the school banned people from using their calculators. How could they!? He also told me that some kids were goofing around during Breakout library time.</em> We scheduled a time to meet and talk about some more things. <em class="entry">I could show him Linux.</em></p>
<p class="happy"><strong class="entry">I fixed the comments system!!</strong> <em class="entry">Have fun posting.</em></p>
</div><p>No comments</p><hr /><form action="postcomments.php?ie=&title=February 10, 2005&date=2005-02-10" method="post" name="comment" id="main">
<div class="right">
<img src="comments_files/right_main_bar.png" alt="right_side" />
</div>
<div class="left">
<img src="comments_files/left_main_bar.png" alt="left_side" />
</div>
<div class="center">
Date: <input type="textarea" class="upper" name="date" value="2005-02-10" readonly="readonly" />
Title: <input type="textarea" class="upper" name="title" value="February 10, 2005" readonly="readonly" />
<br />
Name: <input type="textarea" name="name" class="lower" />
E-mail: <input type="textarea" name="e-mail" class="lower" />
</div>
<div class="comment">
<input type="textarea" name="comment" class="text" />
<input type="submit" value="Post!" class="click" />
</div>
</form>
</body>
</html>
CSS: Code: h2 {
text-align:center;
font:bold italic 3em/1.5 'Pepita MT', 'Lucida Handwriting', 'Sans-Serif';
color:rgb(0,150,150);
}
h3 {
text-align:center;
font: italic normal 2em/1.5 'Lucida Calligraphy', 'Sans-Serif';
color:rgb(0,0,150);
}
form#main {
display:block;
}
form#main div.left {
float:left;
background-color:rgb(255,255,255);
}
form#main div.right {
float:right;
background-color:rgb(255,255,255);
}
form#main div.left img, form#main div.right img {
height:60px;
}
form#main div.center {
background-color:rgb(0,0,0);
background:url(comments_files/center_main_bar.png);
font:bold normal 1em/1 'Times New Roman', 'Courier New', 'Sans-Serif';
color:rgb(255,255,255);
padding:2px 18% 2px 28%;
}
form#main div.center input.upper {
height:20px;
filter: alpha(opacity=50);
-moz-opacity: .5;
display:inline;
width:20%;
margin:2px 10% 2px 0;
}
form#main div.center input.lower {
height:20px;
filter: alpha(opacity=50);
-moz-opacity: .5;
display:inline;
width:20%;
margin:2px 8% 2px 0;
}
form#main div.comment {
width:95%;
border:1px solid rgb(0,150,150);
}
form#main div.comment input.text{
width:90%;
margin:5px 5% 5px 5%;
height:100px;
}
form#main div.comment input.click {
width:25%;
margin:5px 37.5% 5px 37.5%;
}
body p {
text-align:justify;
font: italic normal 1.2em/1 'MS Mincho', 'SimSun', 'Sans-Serif';
color:rgb(150,0,0);
}
a {
color:rgb(0,100,0);
text-align:left;
}
a:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
a#title {
color:rgb(0,100,0);
text-decoration:none;
margin-left 25%;
text-align:left;
}
a#title:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
div.comment a.mail {
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
color:rgb(0,100,0);
text-decoration:none;
text-align:left;
}
div.comment a.mail:hover {
font-weight:bold;
color:rgb(0,255,0);
border:1px solid rgb(0,255,0);
}
div.comment span.mail {
margin-left 25%;
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
color:rgb(0,0,150);
text-align:left;
}
div.comment {
border-bottom:2px dotted rgb(0,0,255);
margin:1.5em;
}
div.comment p {
font:normal normal 1.2em/1.1 'MS Mincho', 'SimSun', 'Courier New', 'Sans-serif';
display:block;
}
/* ENTRY */
div#entry {
border:4px double rgb(0,0,0);
padding:0.25em;
margin:0.5em;
min-height:79em;
}
div#entry p {
font:normal normal 1em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
text-indent:2em;
text-align:justify;
}
div#entry p.dream {
font:normal normal 1em/1.2 'Lucida Handwriting', 'URW Chancery L', 'Serif';
color:rgb(150,150,0);
text-indent:2em;
text-align:justify;
}
em.entry {
font-style:italic;
}
strong.entry {
font-weight:bold;
}
span.uentry {
text-decoration:underline;
}
span.hider {
color:rgb(255,255,255);
}
div.story {
border-left:2px solid rgb(0,0,0);
border-top:2px solid rgb(0,0,00;
}
div.story div.title {
border-bottom:1px solid rgb(128,128,128);
border-right:1px solid rgb(128,128,128);
font:italic normal 1.5em/1.2 'Tempus Sans ITC', 'Nimbus Roman', 'Times New Roman', 'Serif';
width:50%;
text-align:center;
}
div.story div.storybody {
padding:0.25em;
}
span.happy, p.happy {
color:rgb(0,100,0);
}
span.sad, p.sad {
color:rgb(0,0,100);
}
span.normal, p.normal {
color:rgb(100,0,0);
}
img.center {
margin:0.25em auto;
}
img.right {
float:right;
margin:0.25em;
}
img.left {
float:left;
margin:0.25em;
}
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 Hey guys...I'm having a problem with the clear property in firefox adding a large space between a float element and the element that is being cleared. The code is below: HTML Code: Code: <body>
<div id="header">
<div id="topAd">
Top ad - Premium Placement
</div>
<div id="logobox">
<div id="sitestats">
Stat 1: stat<br />
Stat 2: stat<br />
stat 3: stat
</div>
<img src="images/logo.gif" alt="Logo Image"/>
<div id="topnav">
this is the top navigation
</div>
</div>
</div>
</body>
and the CSS Code: Code: body,form,ul,li {
margin: 0px;
padding: 0px;
font-size: 9pt;
font-family: helvitica,arial;
color: #333;
}
#header {
display: block;
border: 1px solid orange;
}
#topAd {
display: block;
background-color: #333;
color: #FFF;
text-align: center;
}
#logobox {
display: block;
vertical-align: bottom;
border: 1px solid green;
height: auto;
}
#sitestats {
float: right;
font-size: 8.5pt;
border: 1px solid yellow;
height: auto;
}
#topnav {
clear: both;
background-color: #333;
color: #FFF;
text-align: right;
padding-right: 0.2em;
}
Now this code works fine in IE, but in Firefox, the cleared element seems to get a very large space between the float and the cleared element. Any help would be appreciated. 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 having some problems with IE :-D my site renders fine in Firefox but in IE7 the float containing the content displaces the header, here's a screen shot: First the correct rendering. And the broken render. CSS Code: Original - CSS Code @charset "utf-8"; /* CSS Document */ html, body { padding: 0; margin: 0; background: #373737 url(images/pageBackground.gif) repeat-x; font-family: Arial, Helvetica, sans-serif; } #page { width: 817px; margin: 0 auto; background: url(images/contentBackground.gif) repeat-y; } #header { background: url(images/headerBackground.gif) no-repeat; height: 157px; width: 100%; } #navigation { width: 217px; margin: 0 20px 0 16px; padding: 0 7px 7px 7px; } #navigation ul { list-style: none; padding: 0; margin: 0; text-align: center; } #content { width: 520px; float: right; margin: 0 18px 0 0; } #contentFooter { height: 16px; background: url(images/contentFooter.gif) no-repeat; } @charset "utf-8"; HTML Code: Original - HTML Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Untitled Document</title> </head> <body> <div id="page"> <div id="content">Hello</div> <div id="header"></div> <div id="navigation"> <ul> <li>Home</li> <li>Ingot Casting Machines</li> <li>Ancillary Equipment</li> <li>Contact Us</li> </ul> </div> <div id="contentFooter"></div> </div> </body> </html> <!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="style.css" /> <title>Untitled Document</title> </head> <body> <div id="page"> <div id="content">Hello</div> <div id="header"></div> <div id="navigation"> <ul> <li>Home</li> <li>Ingot Casting Machines</li> <li>Ancillary Equipment</li> <li>Contact Us</li> </ul> </div> <div id="contentFooter"></div> </div> </body> </html> The site is at http://tmasters.it-mechanic.co.uk/ Any help is great fully received. Thanks 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. 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> 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 Hi all, I am in a rush, and stumped, check out this page (in Internet Explorer 7): http://72.167.22.172/new/programs.php?t=8 See the footer? Any insight? (works fine in firefox etc.) Hi, Have this web page with a lot of divs in it. I have specified that all divs should be float:left in my css-file so that they will be rendered next to each other. I have noticed that when my browser is smaller than the actual web page some of the divs are rendered below and not to the right. How can I force the browser to still render them to the right. I would like to scroll to the right rather than down. Can anyone help me with this problem? /H 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: .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 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 ? Hi, I am stuck on this css code and need some different eyes to look at it I have a image on the left hand side and then text next to it here is the css code Code:
.topone
{
height:85px;
}
.left
{
float:left;
}
.right
{
float:left;
}
.rightone
{
font-style: italic;
padding:10px;
text-align:left;
font-family: arial;
font-size:10pt;
}
.rightbottom
{
font-style: bold;
font-family: arial;
font-size:10pt;
text-align:right;
}
<div class="topone">
<div class="left">
<a href="/" title="Home"><img src="/newimages/new.jpg"/></a></div>
<div class="right">
<p class="rightone">This Website is used to move contruction materials from one place to another so handle with care and dont play around handle with care handle with care</p>
<p class="rightbottom">Home | Menu | Shopping | Store </p>
</div>
</div>
whats happening is the text next to the image in IE is next to it but in firefox the text is below the image any idea todd Hey, Im using floats to position a few forms/form-elements horizontally. But the last form (the signout button), gets shifted on the next line. Can someone explain me why this happens? This is the code i use: php Code: Original - php Code echo '<div style="float: left;... blabla">'; echo '<form action="'.getRoot().'search_contact.php" name="search" id="search" method="post">'; echo '<div style="float: left; width: 35%; margin: 0%; padding: 0%;">'; echo '<input type="text" style="width: 50%" name="contact_name" value="'.$search_string.'" id="contact_name"> '; echo '<input type="submit" name="search_now" value="Search" id="search_now">'; echo '</div>'; echo '</form>'; echo '<form name="new_contact" id="new_contact" method="post" action="'.getRoot().'new_contact.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="add_contact_now" value="New Contact" id="add_contact_now"> '; echo '</div>'; echo '</form>'; echo '<form name="contact_list" id="contact_list" method="post" action="'.getRoot().'contact_list.php">'; echo '<div style="float: left; width: 22%; margin: 0%; padding: 0%;">'; echo ' <input type="submit" name="view_contact_list" value="Contact List" id="view_contact_list">'; echo '</div>'; echo '</div>'; echo '</form>'; echo '<form name="logout" id="logout" method="post" action="'.getRoot().'logout.php">'; echo '<div style="float: left; width: 21%; margin: 0%; padding: 0%; text-align: right;">'; echo '<input type="submit" name="logout_now" id="logout_now" value="Sign out"> '; echo '</div>'; echo '</form>'; echo '</div>'; echo '<div style="float: left;... blabla">'; |
|||||||