Learning CSS floats

I'm learning CSS layout. As an exercise, I've been creating
divs and changing the rules. Before I hit Apply, I try to predict
what will happen. If It doesn't happen the way I think it will, I
want to know what it is that I'm not understanding.
The problem is that Display View will not always accurately
reflect the changes I make. In the following example (I've posted
the code, but I'm not sure what it will look like), I've got two
15% wide static boxes. If I float both of them left, they line up
side by side: blue box on left, green box on right. If I change
green box to float: none, the green box moves over under the blue
box.
It was making me crazy! I read the float rule over and over
trying to figure out what it was that I didn't understand. The
green box is NOT supposed to change position. I finally checked it
in IE and, lo and behold, the boxes were acting like they should.
I tried refresh, I tried exiting and reloading the file.
Still looks wrong in Design View.
If your Design View looks ok, change the green box to float:
left and then back to float: none.
Is there any way to get DW 8 to have Design View accurately
reflect the code?
Thanks,
DennyA

Hi Denny,
Dreamweaver rendering is not perfect, but in this case IE
gets the
rendering wrong and DW is correct. Open your page in Firefox
and you
will see that it also renders like DW.
According to the CSS2 spec: "Since a float is not in the
flow,
non-positioned block boxes created before and after the float
box flow
vertically".
http://www.w3.org/TR/REC-CSS2/visuren.html#floats
Hope this helps,
Randy
> The problem is that Display View will not always
accurately reflect the
> changes I make. In the following example (I've posted
the code, but I'm not
> sure what it will look like), I've got two 15% wide
static boxes. If I float
> both of them left, they line up side by side: blue box
on left, green box on
> right. If I change green box to float: none, the green
box moves over under the
> blue box.
>
> It was making me crazy! I read the float rule over and
over trying to figure
> out what it was that I didn't understand. The green box
is NOT supposed to
> change position. I finally checked it in IE and, lo and
behold, the boxes were
> acting like they should.

Similar Messages

Rating Widget: CSS Float question

I've successfully modified the Rating widget with our own rating graphics (smaller star's) but one issue I cannot figure out is how to get rid of what looks like a margin or padding around the ratingButtons... actually, everything within the ratingContainer itself. Everything works fine, just trying to tweak it's apperance on screen in relationship to other elements above and below the widget.
In SpryRating.css, the ratingContainer is floated left as well as the ratingButton(s) by default. I didn't change that. I did however change the width and height of the .ratingButton classes to match the new width and heigh of the graphic elements.
I think this is really more of a CSS/Float issue, but I haven't been smart enough to figure it out over the past few days while trying to research.
The end result should make the ratingContainer the same height as the ratingButton(s). I've already tried specific values for the height of the ratingContainer as well as 'auto'.
Any help would be welcome and appreciated! Thanks!
-JL

jasonLampitt wrote:
Really?
So, I'm either completely misconstruing your reply (which I admit is possible) but I'm more inclined to take it at face value.
I am sorry, I fail to see what was ambigious in my reply. I am merely stating the facts and I am sorry that you managed to see otherwise.
As a contributor to this forum and having no connection to Adobe other than to use their products, I use my spare time to help others with THEIR problems.
In doing so, we ask that person to assist us so that we can experience the problem first hand which in turn will be indusive to an objective answer.
In your case we have not been able to reconstruct the problem, thus we have not been able to help. This is of no concern to us, but it does not help you.
Have a good day!

CSS Float Problem

Hi All, 10 years since I've been on here (in the days of tables) I have, I'm sure a very basic css float problem in the footer and hopefully someone could take the time to review it for me. I have checked everything but can't find the problem. Thanks in advance;
example of problem here http://davidbrown.ipower.com/template/template.htm
<!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>Our Jewelry Retail Secrets - Thank You</title>
<link href="../stylesheet/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="wrapper">
<div id="wrapperfix">
    <div id="toporange_bg">login</div>
</div>
   <div id="wrapperfix_top_grey">
    <div id="top_grey_content_wrapper">
      <div id="big_logo"></div>
      <div id="welcome_user">Welcome "username here"</div>
    </div>
</div>
</div>
    <div id="main_content">
      <p>
        
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p> Nam vel felis velit. Proin a nisl diam, id hendrerit lectus. Nunc eget tortor arcu. Mauris fringilla felis eget mi facilisis vel auctor est lacinia. Sed sit amet dui nibh, in varius metus. Duis malesuada euismod tortor eget lacinia. Donec pretium rutrum nunc, sagittis condimentum elit aliquam in. In eu mauris dui. </p>
</div>
    <div id="footer_container">
      <div id="footer">
        <div id="footer_left">Footer Left</div>
        <div id="footer_centre">Footer Centre</div>
      <div id="footer_right">Footer Right</div></div>
    </div>
</body>
</html>
#footer_container {
background-color: #333333;
width: 100%;
top: 0px;
margin: 0px;
padding: 0px;
#footer {
background-color: #666666;
min-width: 1000px;
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 1000px;
height: 150px;
overflow: hidden;
clear: both;
margin-top: 0px;
margin-bottom: 0px;
position: relative;
#footer_left {
float: left;
width: 33%;
margin: 0px;
padding: 0px;
height: 150px;
#footer_centre {
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;
float: left;
#footer_right {
float: left;
width: 33%;
height: 150px;
margin: 0px;
padding: 0px;

I still don't see the #footer_left rule in the CSS in the online example at
http://davidbrown.ipower.com/template/template.htm

What's the best way to learn CSS

I have been using tables for years and using CSS for text and
backgrounds. I still use tables to position but am ready to
move away from that?
What's the best source for learning CSS?
Thanks,
Michael

http://www.projectseven.com/tutorials/css/qdmacfly/index.htm
http://www.macromedia.com/devnet/mx/dreamweaver/css.html
http://www.macromedia.com/devnet/dreamweaver/articles/tableless_layout_dw8.html
http://www.macromedia.com/devnet/dreamweaver/articles/css_concepts.html
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"Michael Richard" <[email protected]> wrote in message
news:ene679$ps1$[email protected]..
>I have been using tables for years and using CSS for text
and backgrounds.
>I still use tables to position but am ready to
> move away from that?
>
> What's the best source for learning CSS?
>
> Thanks,
>
> Michael

~ Must Have Books for Learning CSS?!

What book(s) are MUST HAVEs for learning CSS positioning and
formatting? I am using now the Hands on Training Dreamweaver 8 one
by Garo Greene but would like an excellent supplemental book.
Thanks,
Angie

Cascading stylesheets by Eric Meyer - (actually anything css
related by
him)
http://tinyurl.com/nglvr
The CSS Anthology by Rachel Andrew:
http://tinyurl.com/p5ccx
HTML Utopida - Designing without Tables: Rachel Andrew
http://tinyurl.com/oonxf
Nadia
Adobe� Community Expert : Dreamweaver
http://www.csstemplates.com.au
- CSS Templates | Free Templates
http://www.DreamweaverResources.com
- Dropdown Menu Templates|Tutorials
http://www.perrelink.com.au
- Web Dev
http://www.adobe.com/devnet/dreamweaver/css.html
- CSS Tutorials
"computerkitten" <[email protected]> wrote
in message
news:e4vt98$c1g$[email protected]..
> What book(s) are MUST HAVEs for learning CSS positioning
and formatting?
> I am
> using now the Hands on Training Dreamweaver 8 one by
Garo Greene but would
> like
> an excellent supplemental book.
>
> Thanks,
> Angie
>

Learn CSS or try alternative to Dreamweaver

I'm on CS2. I went to CS5 but could not do any of the multitude of basic things becuase I have never learned CSS.
The last version non CSS that works on Mountain Lion is CS3 but it sells for over $300 used.
So I either need to get a cheap copy (anyone have one?), or learn CSS, or use an alternative.
How many hours of time is needed to learn CSS to make CS5/ 6 fluid and easy?
Any other softwares that are cheap and would be very similar to DW, without the need for CSS. thanks!

It matters little if you use a $25 or $500 editor, you must know CSS basics to work on modern web sites. The burgeoning mobile & tablet market demands it.
CSS doesn't take nearly as long to learn as you may think. A few hours at first. Not months or years like Spanish or French. And the more you use it, the more you learn about it.
My advice is to open one of the pre-built CSS Layouts in DW and look at the code comments.
File > New > Blank page > HTML > Layout...
If you have an older version of DW, you can get New layouts below:
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
CSS Tutorials:
http://www.html.net/tutorials/css/
CSS Box Model:
http://css-tricks.com/the-css-box-model/
How to Develop with CSS? (a must read)
http://phrogz.net/css/HowToDevelopWithCSS.html
Nancy O.

Learning CSS

I have this site up and running, but it isn't quite right. I haven't been able to resolve the issue of the base not sitting properly in the center of the browser. It seems to want to sit in the center. I've tried all kinds of variants in the css code trying to get the base to adjust automatically, but to no avail. Obviously, there is a procedure I'm missing, or I'm changing the code in the wrong area. I'm going to place a picture of the site in Dreamweaver rather than send a link to the site - what I'm working on is an experiment off-line. Once I figure out the issue, then I can change it out. I realize my slice isn't quite right, but I'm trying to simplify the issues first than improve the complex elements later.
Nancy helped get the video parts right - which aren't included with this page.
I will include the css code first.
body {
    background-color: #ffffff;
    margin:0px;
    padding:0px;
    margin-top: 0px;
    margin-left: 0px;
.p {
    margin:0px;
    padding:0px;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    text-align: inherit;
    color: inherit;
    line-height: inherit;
    vertical-align: top;
p {
    padding-top:0px;
    margin-top:0px;
img {
    border:0px;
div {
    margin:0px;
    padding:0px;
    font-family:verdana; font-size:12px;
.AbsWrap {
    width: 100%;
    position: relative;
.rowWrap {
    width: 100%;
.clearfloat {
    clear:both;
    height:0px;
a:link, a:visited{
    COLOR:inherit;
    text-decoration:inherit;
#background {
    background-color: #660000;
    width:1500px;
    padding-top:0px;
    height:1071px;
    position: absolute;
    left:0px;
    top:1px;
    margin-bottom:0px;
#Div {
    width:332px;
    padding-top:0px;
    height:203px;
    position: absolute;
    left:814px;
    top:181px;
    margin-bottom:0px;
#body_bg {
    position: absolute;
    left:0px;
    top:1px;
    width:50px;
    height:49px;
    margin-bottom:0px;
    background-image: url(body_bg.gif);
    overflow:hidden;
#wrapper_bg {
    position: absolute;
    left:410px;
    top:0px;
    width:661px;
    height:691px;
    margin-bottom:0px;
body {
    background-image: url(body_bg.gif);
    background-position: 0px 0px;
    margin: 0px;
    padding: 0px;
Thanks in advance,
Ron

Ron,
Have a look at this basic DEMO on CSS positioning:
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
FYI: if you use Firefox browser, get the Web Developer Toolbar Add-on. It's invaluable for trouble-shooting code and layout problems.
Web Developer Toolbar for Firefox
https://addons.mozilla.org/en-US/firefox/addon/60
If all else fails, post a link to your test page. You can remove it when your problem is solved.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

CSS Float Problems

I'm just becoming comfortable with using CSS. At least, I
thought I was. I put together a test page and it worked on IE 7.
Then, I downloaded Firefox and Safari to check compatability on
other browsers.
I have a centered page with a top navigation bar, content
area, and a footer (bottomNavBar). Inside the content area I have
two sections, a left section and a right section. In the left there
should be text, some sort of welcome text. In the right some sort
of Flash intro video the user can play when they choose.
The problem: I got the float to work in IE 7 (Sometimes it
wouldn't. It seems tempermental.). However, the floats won't work
on the other 2 browsers. In the other 2 it puts the first div
listed above the second instead of side by side like in IE 7.
Here is the code:

To make your contentIndexFlashIntro & contentIndexWelcome
divs sit
side-by-side you have to assign each a width. The combined
total of those
widths must be <=800px.
Walt
"JasonTheAdobeFan" <[email protected]> wrote
in message
news:[email protected]...
> I'm just becoming comfortable with using CSS. At least,
I thought I was. I
> put
> together a test page and it worked on IE 7. Then, I
downloaded Firefox and
> Safari to check compatability on other browsers.
>
> I have a centered page with a top navigation bar,
content area, and a
> footer
> (bottomNavBar). Inside the content area I have two
sections, a left
> section and
> a right section. In the left there should be text, some
sort of welcome
> text.
> In the right some sort of Flash intro video the user can
play when they
> choose.
>
> The problem: I got the float to work in IE 7 (Sometimes
it wouldn't. It
> seems
> tempermental.). However, the floats won't work on the
other 2 browsers. In
> the
> other 2 it puts the first div listed above the second
instead of side by
> side
> like in IE 7.
>
> Here is the code:
>
>
> ***First is the HTML***
>
> <body>
> <div class="header">
> <img src="Logo001.png" />
> </div>
> <div class="container">
> <div class="topNavBar">
> <ul class="topNavBarUL">
> <li class="topNavBarLI"><a
class="topNavBarLinksCurrent"
> href="index.htm">Home</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page2.htm">Link2</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page3.htm">Link3</a></li>
> <li class="topNavBarLI"><a
class="topNavBarLinks"
> href="page4.htm">Link4</a></li>
> </ul>
> </div>
> <div class="content">
> <div class="contentIndexFlashIntro">
> <script type="text/javascript">
> AC_FL_RunContent(
> 'codebase','
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#
>
version=9,0,28,0','width','350','height','350','title','IntroVideo','src','Intro
> Video002','quality','high','pluginspage','
http://www.adobe.com/shockwave/downloa
>
d/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','IntroVideo002'
> //end
> AC code
> </script><noscript><object
> classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
> codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve
> rsion=9,0,28,0" width="350" height="350"
title="IntroVideo">
> <param name="movie" value="IntroVideo002.swf" />
> <param name="quality" value="high" />
> <embed src="IntroVideo002.swf" quality="high"
> pluginspage="
http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Versio
> n=ShockwaveFlash" type="application/x-shockwave-flash"
width="350"
> height="350"></embed>
> </object></noscript>
> </div>
> <div class="contentIndexWelcome">
>

> <p class="smallText">Paragraph 1</p>
> <p class="smallText">Paragraph 2</p>
> <hr/>
> <ul><u class="smallText">Unordered
List</u>
> <li><span class="smallText">Item
1</span></li>
> <li><span class="smallText">Item
2</span></li>
> <li><span class="smallText">Item
3</span></li>
> <li><span class="smallText">Item
4</span></li>
> <li><span class="smallText">Item
5</span></li>
> <li><span class="smallText">Item
6</span></li>
> </ul>
> <hr/>
> <p class="smallText">Concluding
Paragraph</p><br />
> </div>
> </div>
> <div class="bottomNavBar">
> <p>© Copyright 2008</p>
> </div>
> </div>
> </body>
>
> *********************************
> ***Next is the external CSS.***
>
> body {
> font-family: Arial, Helvetica, sans-serif;
> background-color: #999999;
> margin: 0px;
> }
>
> .header {
> background-color: #FFFFFF;
> width: 100%;
> margin: 0px;
> padding: 0px 0px 0px 0px;
> top: 0px;
> }
>
> .container {
> background-color: #FFFFFF;
> width: 800px;
> margin-left: auto;
> margin-right: auto;
> margin-bottom: 0px;
> margin-top: 0px;
> }
>
> /* top navigation bar class
> ** I prefer to have a nav bar to the top rather than the
left
> */
> .topNavBar {
> width: 800px;
> height: 22px;
> background-color: #0080EE;
> border: 0px solid #FFFFFF; /* I turned off the pixel
width because I
> didn't
> ** want a border right now. But I left the rest in case
> ** I wanted to change it back to 1px.
> */
> }
>
> /* topNavBar link properties
> ** The idea is to have each link highlight when cursor
comes over any part
> ** of the section, not just the words. Then goes back to
normal when
> cursor
> ** leaves. The current page should have its own link
highlighted always.
> */
> ul.topNavBarUL {
> height: 17px;
> float: left;
> width: 100%;
> padding: 0;
> margin: 0;
> list-style-type: none;
> }
>
> li.topNavBarLI {
> display: inline;
> }
>
> a.topNavBarLinks:link, a.topNavBarLinks:active,
a.topNavBarLinks:visited {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #0080EE;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> a.topNavBarLinks:hover {
> color: #FFFFFF;
> background-color: #FF9900;
> text-decoration: none;
> }
>
> a.topNavBarLinksCurrent, a.topNavBarLinksCurrent:active,
> a.topNavBarLinksCurrent:visited,
a.topNavBarLinksCurrent:hover {
> float: left;
> text-decoration: none;
> color: #FFFFFF;
> background-color: #00FF33;
> padding: 0.15em 0.6em;
> border-right: 1px solid #FFFFFF;
> }
>
> /* content class
> ** This is the part of the page that the content will go
in.
> ** It should have the full width of the container class
and
> ** stretch in height based on the content with a minimum
> ** height of 500px.
> */
> .content {
> width: 800px;
> min-height: 400px;
> background-color: #FFFFFF;
> font-family: Arial, Helvetica, sans-serif;
> color: #000000;
> }
>
> /* content links
> ** The links in the content area will just be the
regular links.
> ** Navigation links will all be given special classes to
define them.
> */
> a:link, a:active, a:visited {
> color: #0080EE;
> text-decoration: none;
> }
>
> a:hover {
> color: #FF9900;
> text-decoration: underline;
> }
>
> /* content headings, hr
> */
> h1, h2, h3, h4, h5, h6 {
> font-family: Arial, Helvetica, sans-serif;
> color: #00FF33;
> margin-bottom: 2px;
> }
>
> hr {
> color: #0080EE;
> }
>
> p {
> text-indent: 20px;
> margin-top: 4px;
> }
>
> ul {
> margin-top: 4px;
> }
>
> li {
> list-style: square;
> color: #00FF33;
> }
>
> .contentIndexFlashIntro {
> padding-top: 2px;
> padding-right: 2px;
> float: right;
> }
>
> .contentIndexWelcome {
> float: left;
> text-align: justify;
> padding-top: 4px;
> padding-right: 10px;
> padding-bottom: 4px;
> padding-left: 4px;
> }
>

Css floats

I would like to create a "floating table" (for lack of a
better description)
Where as There would be a block element say <p
id="thisblock">This block would have some text, images, all
formatted and wrapped in a border - thanks to #thisblock {...} in
css</p>
now in that box, i would like to put a list that would split
down 2 columns, left one will be aligned right, right aligned left
ie:
This block would have some text, images, all formatted and
wrapped in a border
________XXXXXXXXXXXXXXXX_____XXXXXXXXXXXXXXXXXXXXX
__ XXXXXXXXXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXXX
_________ XXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXX
then some more text down here
well you get the idea. I tried using floats, but of course
the "then some more text" ends up buried under the list. I tried
clear: both, but that didn't help. im new to css and any help would
be appreciated!
Thanks

Why not use a table within the floating element?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"m0piqsutjjqv4du" <[email protected]> wrote
in message
news:ejakns$338$[email protected]..
>I would like to create a "floating table" (for lack of a
better
>description)
>
> Where as There would be a block element say <p
id="thisblock">This block
> would
> have some text, images, all formatted and wrapped in a
border - thanks to
> #thisblock {...} in css</p>
>
> now in that box, i would like to put a list that would
split down 2
> columns,
> left one will be aligned right, right aligned left ie:
>
> This block would have some text, images, all formatted
and wrapped in a
> border
> ________XXXXXXXXXXXXXXXX_____XXXXXXXXXXXXXXXXXXXXX
> __ XXXXXXXXXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXXX
> _________ XXXXXXXXXXXXXXX____XXXXXXXXXXXXXXXXXXXXXXX
> then some more text down here
>
> well you get the idea. I tried using floats, but of
course the "then some
> more
> text" ends up buried under the list. I tried clear:
both, but that didn't
> help.
> im new to css and any help would be appreciated!
>
> Thanks
>

Help with css float layout

Hi I am having problems with a page http://beermattonline.co.uk/manuscript_doctor/fees_submissions1.html half way down after the fees sub heading I can't get the next line to appear underneath it instead of to the right. Any suggestions? Here is my CSS.
Thanks in advance, Matt.
.banner {
.line {
   margin-top: 5px;
   margin-bottom: 5px;
   .small_line {
   margin-top: 5px;
   margin-bottom: 5px;
    .long_line {
   margin-top: 50px;
   margin-bottom: 5px;
   margin-left:55px;
   marging-right:55px;
   .footer {
   font-size: small;
   text-align: center;
.content {
width: 710px ;
margin-left: auto ;
margin-right: auto ;
background-color:#fff8e8;
border-style:solid;
border-width:0px;
height: 1000px;
.sub_heading {
float:right;
border-style:solid;
border-width:2px;
margin-top:20px;
border-color:#473d33;
width:530px;
padding:5px;
border-color:#ffedc7;
background-color:#fff2d6;
.sub_sub_heading {
float:left;
border-style:solid;
border-width:2px;
margin-top:20px;
border-color:#473d33;
width:250px;
padding:5px;
border-color:#ffedc7;
background-color:#fff2d6;
.text_centre {
float:right;
border-style:solid;
border-width:0px;
margin-top:5px;
border-color:#473d33;
position: relative;
width:543px;
background-color:#fff8e8;
.links {
border-style:solid;
border-width:0px;
margin-top:4px;
margin-bottom:4px;
border-color:#473d33;
background-color:#fff8e8;
font-size: small;
text-align:center;
A:link {text-decoration: none; color: #26221e; }
A:visited {text-decoration: none; color: #26221e; }
A:active {text-decoration: none; color: #ffffff; }
A:hover {text-decoration: underline; color: #ff7d3e; }
.float_left {
float:left;
width: 140px;
border-style:solid;
border-width:2px;
margin-top:20px;
margin-right:10px;
margin-bottom:20px;
padding: 5px;
border-color:#ffedc7;
background-color:#fff2d6;
body {
font-family: Georgia, "Lucida Sans Unicode", lucida, Verdana, sans-serif;
bont-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: normal;
background-color:#fff8e8;
letter-spacing: 1px;
color: #4c443c;
h1 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h2 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h3 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h4 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px;}
h6 { color: #26221e; margin-bottom:0px; margin-top: 5px;}

If you change the next to last style definition in your CSS file "manuscriptdoctor.css" from
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; }
to:
h5 { color: #26221e; margin-bottom:0px; margin-top: 5px; clear: both; }
everything should be fine.

CSS Float Drop in IE8 but not Compatibility Mode

I'm testing code for my home page across different browsers, and encountered the common IE float drop problem. This does not occur in Firefox, Chrome, Opera, or IE8 in Compatibility Mode; but does occur in IE8 standard mode. It's a bit confusing, since I usually encounter this problem in Compatibility Mode.
I have tried using clear:none; as I thought the content was clearing the float:left of a large flash image on the left side of the window, but it didn't solve the problem. I have 3 image buttons whose combined heights equate that of the flash image (all 622px), and these are all in a column div floating to the right. All of these are flush margin:0 and padding:0, border:none. The flash image has it's own class stating margin:0, padding:0, border:none as well. These divs are fixed pixel widths and heights. I tried placing them in a larger container div with fixed width and height, which didn't solve the problem. Again, this only occurs in IE8 Compatibility Mode.
This is the code below:
div id="container">
embed src="index.swf" allowscriptaccess="always" allowfullscreen="true" height="622" width="509" align="left" class="flashhome"> /embed>
div id="homecontright">
a href="services.html?panel=5">
img src="button1.gif" align="top" border="0" alt="b1" class="imageright"/> /a>
a href="smt.html">
   img src="button2.gif" align="top" border="0" alt="b2" class="imageright"/> /a>
   a href="jobs.html">
   img src="button3" align="top" border="0" alt="b3" class="imageright"/> /a>
/div>
div class="floatfix"> /div>
   div id="foot" align="center">
   contact info footer
   /div>
   /div>
Here is the style information from my separate stylesheet
#homecontright { margin:0; padding:0; border:none; width:493px; height:622px; overflow:visible; float:right; display:block; }
.imageright {margin-left: auto; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; display: block; float: right }
.flashhome { width:509px; height:622px; margin:0; padding:0; float:left; border:none; }
div#container { margin-left:auto; margin-right:auto; margin-bottom:0; width:1002px; background-color:#A8CBE9; }
div#foot {      background-color:#003366;      border-color:#a8cbe9;      border-width:thin;      border-style:solid;      font-size:10px;      width:996px;      padding:0.2em;      margin-left:auto;     margin-right:auto;      text-align:center;      font-family:Arial, Helvetica, sans-serif;      font-weight:bold;      color:#FFFFFF;      height:10px; }
.floatfix { clear:both; }
I've tried removing all the floats, even, especially the ones in the nested divs/class elements; but this didn't do a thing. This leads me to wonder if this really is a float drop problem or am I missing something?
EDIT: I fail at posting code so I've removed the front bracket from all tags. Also, added a diagram to show what it's supposed to look like and what is happening in IE 8 Compatibility. The margins do not exist, they are there so you can see individual elements

I tried adjusting the images on the right -10px and had the same result. Those images were actually created with margins within the image, so everything should be flush.
I noticed, however, that even in browsers where everything aligns correctly, there seems to be a 2-3px jog between the flash image and the buttons on the right. That strange link to the bottom right of the flash image is still appearing as well, somehow having to do with the top banner image when right clicked. I tried changing the URL of that banner and the link changed as well, confirming my suspicion that they're linked. I attempted to contain that image in a fixed width div with no results. This link does not appear in other browsers, nor does it appear on any other pages that I used that code on.
Code for my banner:
<...a href="index.html"><img src="index/accuweb_c3homebannerR1a.jpg" alt="banner" border="0" class="banner"/><.../a>

CSS Float in IE

I'm having trouble with my 2 column layout... The text in my
side panel is wrapping badly in IE, but perfectly OK in
Firefox/Safari. Image widths are unaffected.
I've got a layout that needs to fit to a repeating background
(Y tiling) structure. My layout is a wrapper, banner, container for
the main & side panels & a footer. I'm sure this is
something simple, but I'm not seeing what the trouble is so would
appreciate an expert eye please!
Here's the
link to my page & my css (I've left out some of the
absolute elements inside the banner):

Can anyone help please?

Help with css float

I have a layout that I need help with please. The bright green panel is going to have a Flash file inserted but I need it to sit inside the detailsWrapper div, which needs to stretch to allow this to happen. The content is being generated through php modules and the details will vary in length, so I'm having difficulty styling this. I'm sure it's something obvious but I need help please!
Here's the link: http://www.designermagic.co.uk/hobarts/reapitDetails.php?clearcache=true&pagevars=1-bedroo m-property-for-sale-in-London-N22-hobrps-ALE090002

Your CSS code could use some tidying up. It's kind of a mess. See details below.
http://jigsaw.w3.org/css-validator/validator?profile=css21&warning=0&uri=http%3A%2F%2Fwww. designermagic.co.uk%2Fhobarts%2FreapitDetails.php%3Fclearcache%3Dtrue%26pagevars%3D1-bedro om-property-for-sale-in-London-N22-hobrps-ALE090002
These statements are redundant.
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
margin: 0;
padding: 0;
body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
Try changing the above code to just this. * = the universal selector.
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
outline-style:none; /**outline is not on by default so unsure why you need this**/
More on CSS Shorthand
http://www.dustindiaz.com/css-shorthand/
And you have HTML code errors but the symbols in your document are blocking the validator from giving results.
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.designermagic.co.uk%2Fhobarts %2FreapitDetails.php%3Fclearcache%3Dtrue%26pagevars%3D1-bedroom-property-for-sale-in-Londo n-N22-hobrps-ALE090002
After you fix the code errors, post back with a URL to the new page.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

CSS Float Confusion

This may seem like an incredibly stupid question but I think I
may just be overthinking things and confusing myself.
In my head, I've always had a rule about floats - if you float something, every element below it in the same parent container will jump the gap if there's room. That room would be determined by the width you give the top element.
If I want to have two columns fixed (#first & #second), I've always thought that if I give widths to both and then float the first one left, everything below it (the second div) would jump the gap if there was space. But in order to get the second div to jump up, I either have to delete its width (defeating the purpose of fixed width) or also tell it to float left.
Maybe I'm dreaming, but I thought I'd used this succussfully in the past to get two columns:
#first {width:300px; float:left}
#second {width:300px}
But now I have to delete the second's width or add float left to the second div to get it to work. Can anyone tell me what I'm missing in not understanding why the code wouldn't work? How would I rephrase my above "rule in my head" to explain it to someone else?

To make your code work properly, you'd need to do this -
#first {width:300px; float:left}
#second {width:300px; margin-left:300px;}
Without adding that margin, the second div will act as if the first div were removed from the flow, and in fact that's exactly what floating does. This causes the div#second to slide beneath div#first since it's not really there. By adding the margin, you force div#second to fall to the right of div#first, yet still be on the same horizontal line because of the float.
Alternatively, if you did this -
#first {width:300px; float:left}
#second {width:300px:float:left;}
you will accomplish the same purpose but for different reasons. In this case, because both elements are floated, they will line up horizontally like little soldiers without having to worry about wrapping.
Either way works, but circumstances may require you use one or the other. For example, to float something you should also give it a width. It may be that you don't want to do that, or can't do that for other reasons.

Basic CSS question. New learner

I am just learning CSS and HTML and I have a basic question. How can I make my float left div's expand down for content? I have a wrapper and within my wrapper I have 3 columns all floated left with margins added to them, I ommited height so that my columns can expand as I add stuff to it. I have content on my columns, but instead of wrapping the content down as I add...the div's are expanding and dropping below each other because there is no space for them. I tried clearing, but I am not sure I understand the clear property well so I stuck "none" in there for now. Here is my HTML and CSS:
<body>
     <div id="wrapper">
     <div id="head"></div>
     <div id="slideshow"></div>
     <div id="menu"></div>

          <div id="firstcolumn">stuffstuffstuff
          stuffstuffstuffstuffstuff
          stuffstuffstuffstuffstuff
          stuffstuff</div>
          <div id="secondcolumn">stuffstuffstuff
          stuffstuffstuffstuffstuffstuffstuff
          stuffstuffstuffstuffstuff</div>
          <div id="thirdcolumn">stuffstuffstuff
          stuffstuffstuffstuffstuffstuff
          stuffstuffstuffstuffstuffstuff</div>
     </div>

     <div id="footer">This is my footer</div>

</body>
</html>
-------CSS---------
body {
     margin: 0;
     font-family: Verdana, Geneva, sans-serif;
     font-size: 10px;
     background: url(images/bg.png) #666 repeat;
#wrapper {
     margin: 0 auto;
     width: 975px;
     background-color: #CCC;
     height: 1000px;
#head {
     width: 975px;
     height: 100px;
     background-color:#666;
     position: relative;
#slideshow {
     height: 110px;
     width: 975px;
     position: relative;
     background-color: #066;
#menu {
     width: 975px;
     height: 30px;
     background-color:#999;
     position: relative;
#firstcolumn {
     width: 315px;
     float: left;
     position: relative;
     background-color:#666;
     clear: none;
     margin: 10px 10px 0px 10px;
#secondcolumn {
     width: 305px;
     float: left;
     position: relative;
     background-color: #CCC;
     clear: none;
     margin: 10px 10px 0px 0px;
#thirdcolumn {
     width: 315px;
     float: left;
     position: relative;
     background-color:#666;
     clear: none;
     margin: 10px 10px 0px 0px;
#footer {
     margin: 0 auto;
     width: 975px;
     height: 200px;
     position: relative;
     background-color:#666;
This is what I am seeing on my display in Dreamweaver. As you can see, these rectangular elements are my div's. They are supposed to line up side by side, but my "content" isn't filling my div's properly, but rather expanding them causing my div's to drop down below each other.
Thanks for any input.

It would be much easier to advise you if you could post a URL for a site or page.
Height and CSS is a bit of mystery to me but the most simple principle is that content is the way to give an element height. There are ways around it and you might like to Google "Faux Columns CSS" or something like it. The principle is that you construct an image that is a slim band of color that align with your intended columns. You apply that image as a background in you CSS and set it to repeat down the page. Then as your content grows or differs the graphic takes care of that.
There are other ways such as using positioning and javascript but they are more complicated.
Martin

Learning CSS floats

Similar Messages

Maybe you are looking for