CSS - Floating Div Messup In Ie ...

hi,

i am a total newbie with css and trying to create a floating divider. an example can be seen at www.payjunction.com.
does anyone know a tutorial on how to create one?
thanks for the help in advance

Hi,

Can someone help me with why the following header bar doesn't work in Firefox? It just shows the very top of the bar with the two other divs inside of it.

Code:

<div class="cmsHeader">
	<div style="float: left;">Page Name</div>
	<div style="float: right;"><a href="" title='Add Page'><img src='images/icons/file_(add)_16x16.gif' border='0' alt='Add Page'></a></div>
</div>


.cmsHeader{
	background: #809096;
	padding: 5px;
	width: 98%;
	color: #FFFFFF;
}

.cmsHeader a{
	color: #FFFFFF;
	text-decoration: none;
}
.cmsHeader a:hover{
	text-decoration: underline;
}

Hallo,

I have in several cases serious problems with floating boxes. Not with the standard layout's like here described http://css.maxdesign.com.au/floatutorial/
but with more complicated layouts. I know to place the float attribute but have problems with setting the clear attribute.

Does some know a good source where I find more information or documented examples ?

Finally I can fix my problems, but it take so much time of testing...

Thnaks

I am at my wits end as I have tried and searched just about everywhere for some guidance.

I'm currently changing my site to an entirely tableless markup. On the following page, I have an image floated right of my <ul> which is wrapped by a div with a dotted border on the top, right and bottom. When I float my image right, the bottom edge of my image runs below the bottom border of the div. This only happens in FF and NOT IE.

Check out the following link:

My problem

Here is my xhtml markup:

Code:

<!-- Start Linear Template -->

    <div class="contain">

      <img src="/images/linearthumb.png" class="templatethumb" alt="Linear Template" />

	<p>
	
	    Linear Template

	</p>

	    <ul class="template">

		<li><span class="rarr">&rarr;</span> Professional and sophisticated.</li>
		<li><span class="rarr">&rarr;</span> Drop-down navigation menu.</li>
		<li><span class="rarr">&rarr;</span> Information &ldquo;boxed&rdquo; for easy reading.</li>
		<li><span class="rarr">&rarr;</span> Background can be &ldquo;watermarked&rdquo; with <br />
		    your logo or any color you wish.</li>

	    </ul>

    </div>

<!-- End Linear Template -->

And here is my css for the div and image (forgive the roughness of it):
Code:

div.contain {
    padding-right: 5px;
    margin-bottom: 10px;
    border-top: 2px white dotted;
    border-right: 2px white dotted;
    border-bottom: 2px white dotted;
}

img.templatethumb {
    float: right;
    width: 168px;
    height: 160px;
    border: 2px outset #808080;
    margin-top: 5px;
    margin-right: 100px;
}

i'm currently rewriting my site for xhtml 1.1, and i've decided to give the xhtml some definition (e.g. don't use divs for everything...if it's a paragraph, make it a p, if it's a header, make it h1 and so on).

i've got a page that basically follows this order:
-header (h1)
-4 main menu blocks (div-ul-li-a)
-firefox plug (h3)
-main content container (div)
----... (small bit of irrelevant content)
----google adsense block (p)
----entry container (div)
-------entries (div-h4-ul-li)
----end entry container (/div)
-end main content container (/div)
-4 less-relevant menu blocks (div-ul-li-a)
-footer (hr-p)

if that's confusing to you, check out the source code he URL

anywho, i css'd the 4 top menu blocks and the firefox plug to clear:right and float:right. they look great.

problem #1: when i tried to get the adsense block to float:right within the main content container, it hangs down even with the firefox plug - even though it's in a separate container. i've tried clear:none on the adsense block - but to no avail. i've even tried to make the main content container to float:left - still no go. i thought it might be the fact that i'm using ah h3 tag for the firefox plug, but i changed the tag to a div, and that didn't work, either. then i thought it might be the image replacement trick courtesy douglas bowman: URL -- but even after removing the firefox plug from the xhtml altogether, the adsense aligns with the bottom-most block of the top menu blocks.

problem #2: i was hoping that i could get the bottom 4 menu blocks to float:right, and have them meet up with with the top 4 menu blocks, since all 8 are in the same container (the body tag). however the bottom menu blocks are hanging down below the main content container - even when i have them set to clear:none. I even tried to set the main content to a ridiculously small width, but they still hang at the bottom on the right.

basically, i want my xhtml 1.1 'working page' (URL) to look and act like my current page: URL

==stipulations==
-i'd like to stick to css only. html hacks - e.g. (div class="spacer") (/div) - are messy and they defeat the purpose of separating content from display -- which is the full purpose of xhtml+css. besides, pure css suits my semi-obsessive-compulsiveness. ;-)
-i'd also like to avoid using absolute positioning. i tried that with the adsense block, and my text didn't wrap around it, the adsense block actually covered the text. that won't do (unless you can find a way to get my text to wrap around an absolutely-positioned element).

==source code==
working xhtml (veiw source) - URL
working css - URL
current xhtml (veiw source) - URL
current css - URL
if you need to see any of my other referenced stylesheets, you should know where to look for them. ;-)


a HUGE thank-you to anybody willing to help me!!

Please view the attached image. I want it as;
left arrow - gallery - right content

all on same line.






css
Code:

#content #gallery { float:left; width:100%; }
#content #gallery .list { float:left; border: 1px solid black; background-color: #dfdfdf; }
#content #gallery .list li img, #content #gallery .list li p { width: 200px; height: 150px; margin: 10px; }      
#content #gallery  a.galleryprev, #content #gallery a.gallerynext { display: block; float: left; width: 28px; height: 150px; text-decoration: none; background: url("http://www.gmarwaha.com/image/imageNavLeft.gif") left 60px no-repeat; }
#content #gallery a.gallerynext { background: url("http://www.gmarwaha.com/image/imageNavRight.gif") right 60px no-repeat; }
#content #gallery a.gallerynext:hover { background-image: url("http://www.gmarwaha.com/image/imageNavRightHover.gif"); }
#content #gallery a.galleryprev:hover { background-image: url("http://www.gmarwaha.com/image/imageNavLeftHover.gif"); }
#content #gallery a:hover, #content #gallery  a:active { border: none; outline: none; }      

html
Code:

    		<div id="gallery">
                <a href="#" class="galleryprev">&nbsp;</a>
                <div class="list">
                    <ul>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/1.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/2.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/3.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/4.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/5.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/6.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/7.jpg" alt="" width="200" height="150" /></li>
                        <li><img src="http://www.gmarwaha.com/jquery/jcarousellite/image/8.jpg" alt="" width="200" height="150" /></li>
                    </ul>
                </div>
                <a href="#" class="gallerynext">&nbsp;</a>
          </div> 

I am having problem layout out a series of spans in a row...

The code I am using should output:

ITEM1 ITEM2 ITEM3 ITEM4 ITEM5 ITEM6 ITEM7

but it is outputting

ITEM1 ITEM2 ITEM3 ITEM4
............................................. ITEM5 ITEM6 ITEM7

It steps down a line when the drop down navigation makes an appearance. The code I have is:

CSS:


PHP Code:
.textbox {
    position: relative;
    clear: right;
    float: left;
    padding-right: 17px;
    padding-left: 17px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #DAEEAC;

}
a {
color: #FF6600;
}
ul {
  padding: 0;
  top: 0px;
  list-style: none;
  }
  
li {
  float: left;
  position: relative;
  width: 100px;
  }
li ul {
  display: none;
  position: absolute;
  top: 2em;
  left: 0;
  background-color: #e7e7e7;
  }
li > ul {
    top: 15px;
    left: 5px;
    }
li:hover ul, li.over ul{ display: block; } 





HTML:

PHP Code:
<div id="navbackground">
  <div class="navholder">
<table width="600px" height="15" border="0" cellspacing="0" cellpadding="0">
  <tr>
        <td align="center">
            <span class="textbox"><a href="index.php" class="navtext">Homepage</a></span>
            
            <span class="textbox"><a href="packages.php" class="navtext">Packages</a></span>
            
            <span class="textbox"><a href="booking.php" class="navtext">Booking</a></span>
            
            <ul id="nav">
                <li><span class="textbox" style= "height:45px; width: 100px;"><a href="booking.php" class="navtext">Gallery</a></span>
                  <ul>
                    <li><a href="#">Ground Shots</a></li>
                    <li><a href="#">Recent Events</a></li>
                    <li><a href="#">Hen Parties</a></li>
                    <li><a href="#">Lorem Ipmus</a></li>
                  </ul>
                </li>
            </ul>
            
            <span class="textbox"><a href="contactus.php" class="navtext">Contact Us</a></span>
            
            <span class="textbox"><a href="links.php" class="navtext">Links</a></span>
        </td>
  </tr>
</table>

</div></div> 

Hi All

I seem to have an issue with floating an element in IE6&7. All other browsers (including IE8) are fine.

When using a right float element, IE7 seems to push the elements to the left of it below the right-floated element, instead of to the left where they are suppose to be.

Is there a work-a-round and/or hack for this?

Cheers!

Russ

i am trying to make a menu so it goes all the way to the right of the screen in my header. I have an image to the left. I want the menu always to be at the right no matter what the user does to the screen. I have gotten the effect that i want but i had to use tables. I want to avoid using tables.


Here is the link to the webpage of the desired effect using tables: http://skonline.org/courses//support-courses/glenn/jana2-diffmenu.htm

I have attached the css and copy and pasted the parts of importance
div#header { margin-bottom: 0px; padding: 2px;
background-color: white;
background-image: url(airplane.gif);
position: relative; }

#header div#rightnav {
position: absolute;
right: 0;
top: 0;
width: 232px;
}

.header-title { background: transparent; padding-left: 7px; color: rgb(68, 34, 0);
vertical-align: middle; font-weight: bold; font-size: 180%; }

.header-rt-nav { width: 130px; margin: 0px; padding: 0px; border-left: 1px solid rgb(68, 34, 0);
border-right: 1px solid rgb(68, 34, 0);
vertical-align: middle; font-weight: bold; color: rgb(68, 34, 0); }
.header-rt-nav ul { margin: 0px; padding: 0px; font-size: medium; font-weight: bold;
color: rgb(68, 34, 0); line-height: 19px; white-space: nowrap; }
.header-rt-nav li { list-style-type: none; display: block; }
.header-rt-nav li a { padding: 1px 5px; text-decoration: none; color: rgb(68, 34, 0); }
.header-rt-nav li a:link { color: rgb(68, 34, 0); }
.header-rt-nav li a:visited { color: rgb(68, 34, 0); }
.header-rt-nav li a:hover { color: white; background-color: rgb(68, 34, 0); }

THanks!

I need to center a div which contains two columns. Its important that the div encapsulates the content within. This is what I've done so far:

CSS:
Code:

* {
  margin: 0;
  padding: 0;
}

#container {
  float: left;
  width: 960px;
  border: 1px solid #000000;
}

.left {
  float: left;
  width: 650px;
}

.right {
  float: left;
  width: 250px;
}

HTML:
Code:

<div id="container">
  <div class="left">
  left content goes here
  </div>
  <div class="right">
  right content goes here
  </div>
</div>

Question: Is it possible to center #container to the middle of the page? Using margin: 0 auto; doesnt work with floating divs. Its very important that #container has a border around .left and .right. Any help will be appreciated

Hello,

I created a site with floating frames and it looks good in IE6 and FF/Mozilla.

But I have one problem:
I use in my dynamic layout an ID more then once
(thats not OK according w3 validation)

I tried to do something with pseudo classes but this works not really goed. My "uni" thumb box is used on two diff. pages
The skyscraper: http://www.all4yourwebsite.com/
and the result/search page: http://www.all4yourwebsite.com/search.php

I know there is a solution, but because the tumbbox have to be much flexible the solution must be simple as the current (wrong) solution. Anyone an idea?

In IE, this will produce the look that I'm looking for. The image and a couple of details are provided inside of a blue box.
In FF, they overlap eachother. Not the text, just the image. How can I adjust my CSS?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  
<head>
<title>Test</title>
<style type="text/css">
<!--
.fieldset {
	border: #26a solid 1px;
	width: 85%;
	margin-bottom: 5px;
	padding: 10px;
}
-->
</style>
</head>
  <body> 	        
		
<div class="fieldset"> 1: dfas <br />
  <hr />
  <img src="../../imageApp/images/smallrear.JPG" 
		width="160" 
		height="120" 
		border="0" 
		align=left hspace="12"/> etwrThis is an edit </div>
<div class="fieldset"> 2: <br />
  <hr />
  <img src="../../imageApp/images/small100_1737 (Small).JPG" 
		width="89" 
		height="120" 
		border="0" 
		align=right hspace="12"/> </div>
  </body>
</html>

Gah.

Internet Explorer is doing mighty funky things with my webpage.

http://www.maths.tcd.ie/~icecube

The floating images in the main posts work fine from firefox, but in the IE that I checked them out on, there are just blank spaces where the images/comments/bored should be - but even then you can still right click on the space where the image should be to save it and stuff.

Anyone have any help/suggestions?

Ok.

So after some one i don't know on a website i was reading told me i should replace my tables with CSS i decided to listen to them. Now the website's top bar should look like this:

http://www.leeksoftware.co.uk

And i decided to do each box as a DIV. BUT! I can't get them all in a line. I can get the yellow one to the right of the long one but then i cant get the rest in the line. So far the CSS is:

Code:

    div.logo
    {
	height: 70px;
	width: 618px;
	background-color: #476cD9;
	float: left;
    }

    div.home
    {
	height: 70px;
	width: 100px;
	background-color: #E29942;
	margin-left: 619px;
	float: left;
    }

    div.soft
    {
	height: 70px;
	width: 100px;
	background-color: #CC3333;
	margin-left: 719px;
    }

    div.tuto
    {
	height: 70px;
	width: 100px;
	background-color: #006666;
	margin-left: 819px;
    }

    div.cont
    {
	height: 70px;
	width: 100px;
	background-color: #254D78;
	margin-left: 919px;
    }

I tired adding float left to all of them but that made them go diagonal. Can any one help?

Thanks
Matt

Hi

I use DIV to display image thumbnails in a row from php loop.

for each div containing image I have set the attribute float: left; so that multiple images can be displayed in parallel. Now the problem is that if I have a single image then there is no need to show it on the extreme left of the page but in the center, but the thumbnail is displayed on the extreme left,

here is my code till now,

PHP Code:
echo "<div style='
    text-align: center;
    border: solid 1px #993333;
    padding: 1px;
    margin: 2px;
    float: left;
    margin-left: 6%;
    '>";
    
echo "<div style='
     text-align: center;
     padding: 0px 0px 0px 0px;
     margin: 0px 0px 0px 0px;'>
     <a href='/$path' rel=\"lightbox\"><img src='/print_resize_image.php?image=$path&type=$extension' width=200 height=150 border=0 ></a>
     </div></div>";