CSS - Clearing Floats Inside Of Floats

I know this is probably something very simple I'm overlooking, but I can't seem to get this page to display corrrectly in IE. The portion I'm talking about is the footer div: although the CSS clears both, in Firefox I see the footer correctly but in IE there is some encroachment of the footer background color on the right side of the screen.

URL is: http://www.readaloudproject.org/about/

Please disregard all of the other aspects of the page... this is very much still under construction and a lot more styling needs to be done. But this footer is driving me crazy because I copied working code from other sites that is now no longer working.

Help! Thanks!

Hello,

I'm new to this, hopefully someone can help me out. I recently created a few pages on wordpress for my business. Once I finished (using firefox) I checked to see if my site was compatible with other browser and unfortunately there were several issues. Text, pictures and videos are not aligned properly in Safari, Chrome and IE. Does anyone know what could possibly cause this and how to fix it??

I am also looking for someone to help me in the future for website design, recommendations appreciated.

signature sound .com under "training" and "workshops"

If there is anymore information needed to help me I will provide.

extra info:
I cleared floats within HTML and not within CSS.

Here is some CSS for the training page:

#song-logo {
margin:35px 0px 0px 44px;
}

#discover-songlist1 {
margin:0px 40px 0 50px;
float:left;
}

#discover-info {
float:left;
width:500px;
margin:-36px 0px 0px 130px;
}

#song-pictures {
margin:-65px 48px 0px 0px;
}

#more-info {
margin: -30px 0px 0px 45px
}

#record-logo {
margin:55px 0px 0px 44px;
}

#discover-recordlist2 {
margin:0 143px 0 50px;
float:left;
}

#discover-every {
width:500px;
float:left;
margin:-36px 0px 0px 62px;
}

#record-pictures {
margin:-65px 55px 0px 0px;
}

#more-info2 {
margin: -30px 0px 0px 45px
}

#discover-list3 {
width:460px;
float:left;
margin:50px 0 0 50px;
}

So...

I've got a page I'm working on where I can't seem to get to floats to clear without compromising the layout of the divs that are floating.

http://www1.romenews-tribune.com/multimedia2/
http://www1.romenews-tribune.com/multimedia2/style.css

If I try the clear:after class fix, it doesn't work. If I try the overflow: hidden fix, it looks fine until the page is resized - and the overflowing content is hidden.

What I want is for the right and left div is to stretch to the bottom of the page regardless of the page height, and clear to the div they are floating in.

Any suggestions? Let me know if I need to provide better examples or more info, as I'm stumped on this one and feel like I've been doing this for far too long.

Here is the page: http://www.sdtars.com/development/o...tion/atwork.php
(Note: Some pages don't work due to development)

I have a class named sized and within the class there is always a img a p tag. I am trying to get the img tag to float to the left, and then have the p tag follow that up to it's right (still left aligned), with a left-margin of 10px. Every time I attempt to do that, it just forces the p tag down to the next line.

Any ideas how I can get them to be inline?

I tried to use height:auto, and put it into the main container, then I put it in the div that is floated. Nothing works in firefox for me. Ive tried searching on google but I cant find anything that works.

Basically, its not just an issue with floats, in general, what is the correct way to set divs, to auto expand to cover what is inside and that works in IE, Firefox and safari, is there a way to ?


Thanks in advanced.

Hi All,

I am almost tearing he little hair I have left out!

I can't get the div in the middle to clear the floats. Works just lovely in FF, but that IE thing won't work!!! Grrree

http://www.tuxdiscs.com/sscp7b/

Any advice would be appreciated!

Thanks

This may be a stupid question, but I recently noticed something with floats and side by side elements that confuses me. I thought you always had to specify a width when it came to floating elements along side each other, as block level elements inherit 100% width usually. But on the last 2 sites I coded, I was able to float divs without specifying a fixed width. The div boxes only took up the width of there content. Worked in FF, Chrome, Safari, IE7/8. This is great, as it saves time, but makes no sense.

Am I confused?

Hello everyone,
Newbie here
Can anyone show me how to CSS objects or text inline horizontally in the banner/header such as at the top of this forum?
My banner/header uses large text for a logo on the left, and I would like to put a search form or something on the right side of the header.
Do I have to declare the width of each?
See how much newbie I am?

Thanks for any help.

Ken

Hey,

yet again I am having issues with some floated elements in IE (6 + 7).

Have a look here.

The product details start under the bottom of the photo of the product, and I've tried a bunch of different things to get it lined up with no joy.

Here's the CSS:
Code:

#features {
position:relative;
float:right;
margin:0 20px 20px 20px;
width:350px;
border:1px solid #E1DCC6;
border-top:0;
}

* html #features {
margin:0 10px 0 10px;
}

#features p, #features p strong {
font-size:10px;
margin:4px;
padding:2px;
}

#picbox {
width:350px;
height:350px;
margin:0 20px 0 20px;
float:right;
border:1px solid #E1DCC6;
border-bottom:1px dashed #E1DCC6;
}

* html #picbox {
margin:0 10px 0 10px;
}

#detail-list {
margin:10px 60px;
}

#detail-list li {
list-style:square inside;
margin:2px;
}

#buynow {
margin:5px 10px 5px 30px;
}

#priceTable {
margin:10px 40px;
border:1px solid #E1DCC6;
}

#priceTable td {
padding:4px;
}

#priceTable td.priceRight {
background-color:#E1DCC6;
font-size:14px;
font-weight:bold;
color:red;
}
#priceTable td.priceLeft {
text-align:right;
color:white;
font-weight:bold;
background-color:#B8A488;
}

.liner {
text-decoration:line-through;
}

Any insight, as per usual, is greatly appreciated.

Hello,
I'm currently working on a website layout that uses CSS for everything. I have a header, and two columns below that. The header works perfectly. I used float:left on both of my two columns, and they both appear side-by-side as intended. However, I want the right column to fill up the entire right side of the screen. When I try to use CSS's width: 100%; the entire right column jumps down below the left column, which is not what I want. I made a little screenshot:
http://img282.echo.cx/img282/6555/tms1od.png

I believe it can be done, but I'm stumped.

Help is appreciated

After fighting with JS to get scrolling content to work, I now have a problem with IE8/9, where a wide div bleeds outside of containing div. Works fine in FF and Chrome

code and css are in
http://rentz.phi.co.uk/testanimate.html

Any ideas?

Hey,

k, as per usual, all's well in FF with this site. The list to the right is forcing the paragraphs below in IE tho...I've tried a bunch of different 'clears' and what not, but can't seem to figure it out.

Here's the html;
Code:

      <div id="homelistbox"><b>Upcoming Tradeshows:</b> 
        <ul class="homelist">
          <li><a href="http://www.torontoinwaterboatshow.com">Toronto In-Water 
            Boat Show,</a> Sept 14-17 2006</li>
          <li><a href="http://www.torontoboatshow.com">Toronto International Boat 
            Show,</a> Jan. 12-21 2007</li>
          <li><a href="http://www.sportsmensshows.com/Ottawa/">Ottawa Boat, Sportsman 
            and Cottage Show,</a> Feb. 22-25 2007</li>
          <li>See the various models of Custom Weld Boats at all these shows. 
            <a href="contact.php">Contact us</a> for more information about locations 
            at the shows.</li>
        </ul>
      </div>
      <p> Freedom Boat Sales is committed to bringing Canadian recreational enthusiasts 
        exciting new and pre-owned products for the water, trail, and road.</p>
      <p>Flexibility, great pricing, and innovative products will keep you coming 
        back for all your recreational needs!</p>
      <p>Please be advised that we are currently working to improve your online 
        experience, so your patience is greatly appreciated!</p>
      <div class="clear"></div>

and the CSS;
Code:

.clear {
clear:both;
margin-top:-1px;
height:1px;
overflow:hidden;
}

p {
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
line-height:11pt;
color:#555;
text-decoration:none;
width:650px;
margin-top:5px;
padding:10px;
}

#homelistbox {
width:180px;
padding:5px;
margin:2px 10px;
border-top:1px dotted #CCC;
border-left:1px dotted #CCC;
min-height:120px;
float:right;
font-family: verdana, arial, helvetica, sans-serif;
font-size:8pt;
color:#255CB8;
}

.homelist li {
margin-top:5px;
padding-left:10px;
list-style:none;
}

.homelist a {
color:#FF0000;
text-decoration:underline;
}

.homelist a:hover {
color:#255CBE;
text-decoration:none;
}

i'm also having similar issues with simple image floats, as seen here.

It forces the paragraph underneath in IE...boourns.

Anyways, any guidance'd be greatly appreciated.

Cheers.

Can you guys tell me why code below does not show properly in firefox 2 when it shows up right in IE7?

If I add clear:both to footer then it displays right, but should not it show it alongside the div #2 anyways?

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" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:dcterms="http://purl.org/dc/terms/" xmlns:cc="http://creativecommons.org/ns#">
<head>
 <title>Test</title>
 <style>
 body {
 	margin:0px;
 }
 .container {
 	margin: 0 auto;
	height:500px;
	width:500px;
 	border-width:thin;
 	border-style:dotted;
 }
 
 .leftcontent {
	float:left;
 	width:100px;
	height:100px;
	border-width:thin;
 	border-style:dotted;
 }
 
 .rightcontent {
	float:left;
 	width:100px;
	height:100px;
	border-width:thin;
 	border-style:dotted;
 }
 
 .footer {
 	border-style:dotted;
	border-width:thin;
	height:100px;
	width:100px;
 }
 </style>
</head>
<body>

<div class="container">
	<div class="leftcontent">
	1
	</div>
	<div class="rightcontent">
	2
	</div>
	<div class="footer">
	3
	</div>
</div>


</body>
</html>

Hi,

I have started developing a new website. I am using all the knowledge I gained from this forum, however I want to improve on my previous design.

Basically I have the following Html with CSS. 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;
    padding: 0;
    color: #00c;
   }

   div#wrap{

    width: 600px;
    margin: 0 auto;
    background-color: #ccc;
   }

   div#top{

    width: 550px;
    margin: 0 auto;
    background-color: #0cc;
    border: 1px solid red;
   }

   div#top div#logo{

    width: 150px;
    float: left;
   }

   div#top div#links{

    width: 400px;
    float: right;
    text-align:right;
   }

   div#top div#links ul{

    margin: 0;
    padding: 0;
    list-style: none;
   }

   div#top div#links ul li{

    float: left;
    padding-left:10px;
    padding-right:10px;

   }

   div#top div#links ul li:hover{

    color: #c00;
   }

   div#middle{

    width: 520px;
    margin: 0 auto;
    background-color: #ff0;
   }

  </style>
 </head>
 <body>

  <div id="wrap">
   <div id="top">
    <div id="logo">
     Logo
    </div>
    <div id="links">
     <ul>
      <li>one</li>
      <li>two</li>
      <li>three</li>
     </ul>
    </div>
   </div>
   <div id="middle">
    Content
   </div>
  </div>

 </body>
</html> 

Now as you can see I have the logo div and links div inside the top div. The logo div is set to float left, while the links div is set to float right. I have also given the top div a border of 1px red.

Now in IE7 this is displayed correctly while in FireFox and Opera it is not. I once came with this issue here, and Kravvitz suggested me to use the following hack from this website: http://www.csscreator.com/attributes/containedfloat.php. My question is; Is there another way how to do this without having to introduce that hack?

Also I have another question. In reality I am not going to have a border and background in the top section. I have set the width of the logo div to 150px and the width of the links div to 500px. 150px + 400px make up 550px which is the total width of the top div. This means that the content div is placed under the top div and not onto it. I have seen it work on both IE7 and FireFox, but do not know about IE6.0 and Opera!! However is this considered as correct?

My third (and final) problem is that I want my list to be aligned right! However it keeps coming to the left! How should I accomplish this with the current CSS I have?

Any comments are more then welcome.

Thanks and Regards
Sim085