CSS - Floating Div?

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 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;
}

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?

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?

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 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!

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 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> 

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!!

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

http://tonglebeak.com

View it in FF, and the floating boxes correctly appear on top of the white div underneath of it. View it in IE, and the floating boxes push the white div below them.

How can I get IE to render this the same as FF?

I have a web page in which I have a table and within that table I have a sub table with two columns. I am using css and allow visitors to move the first column from right to left (they both are different sizes).

I now have a need the text in column one be wrapped under column two (as you can do with pictures in say MS word). I can't write the text ahead of time at the bottom of column two as that column floats from left to right -- meaning that the text that should go underneath would be different each time.

I assume it is not possible with tables to do such a thing, but thought to ask the experts to see if it is possible or there is another logical way of accomplishing it. I could simply call two different files based on the right-float and left-float and right text accordingly in both files, but to me that does not sound such a great idea.

I'm having a weird situation. I've got a nested divs in a big box. Anyway, I've got one div floating an image on the left and another div with text on the right. Anyway, there's not much text, but under the img div there's a gap in IE7 but not in FF and I was wondering why. For some reason the margin-bottom: 5px; in the <h3> tag causes there to be the gap under the floating div holding the img. I'm wondering why this is happening in IE7 but not in Firefox.

I created an example code to show what I mean and placed comments around the h3 tag that seems to be the cause.
I put all the css in the html using style tags. I have a screenshot but it doesn't look like I can attach it.

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" />
        <title>test</title>  
    </head>
    <body>
        <!-- A big box to hold everything -->
        <div style="border-style: solid;
             border-color: #777777;
             margin-top: 10px;
             margin-bottom: 10px;
             width: 400px;
             padding: 0;">
            
            <!-- the Image Div that holds the 100x100 pixel image and floats on the left in the big box -->
            <div style="float: left;
                        width: 106px;
                        height: 106px;">                
                <img src="test.jpg" alt="Picture of Test Image"
                     style="display: block;
                     width: 100px;
                     height: 100px;                   
                     border-style: solid;
                     border-color: black;
                     border-width: 3px;
                     margin: 0;" />
            </div>
            
            <!-- This is the text Div that holds an H3 heading 
                 Keep a 106px margin to prevent any later text from wrapping.
                 Neither Removing the margin nor the padding HERE solves the problem
                 only the margin-bottom in the h3 tag style seems to matter -->
            <div style="margin-left: 106px;
                 padding-left: 10px;
                 margin-right: 0;
                 margin-bottom: 0;
                 margin-top:0;">
                     
                <h3 style="margin-top:5px;
                    margin-bottom: 5px;
                    border-style: solid;
                    margin-left: 0;
                    margin-right: 0;">Test</h3>
                    <!-- HERE'S THE QUESTION! why does the "margin-bottom: 5px;" 
                    leave a gap 5px gap underneath the image in IE7 but not firefox.
                    Who's wrong? IE7 for putting the gap in or firefox for not floating things correctly?
                    
                    The H3 should be WELL away from the bottom of the div with most font
                    sizes...Also oddly enough, enclosing the parent div of the h3 in a border
                    removes the gap under the image BUT a border around the h3 itself does NOT
                    Why the gap? -->                    
            </div>
            
            <!-- This div stops the floating -->
            <div style="clear:both;
                 margin: 0;
                 margin-right: 0;
                 padding: 0;
                 width: 0;
                 height: 0;">
            </div>     
        </div>
    </body>
</html>