CSS - Why Does Floating A Div Causes The Div To Leave Parent.

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

I have 3 tables in a div. I have two of the tables one on top of the other. I wanted to place the third table to the left of the bottom table. So I placed the second table relative and left -50px. I placed the third with position absolute, top -70px and float right to achieve this layout. Is there a better way of doing this out of curiousity?

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

Learning CSS and trying to emulate the following table:
Code:

|--------------------------------------|
| Text 1           |----------------|  |
| Text 2           |  Inner box text|  |
| Text 3           |----------------|  |
|--------------------------------------|

I can get a nested div to work vertically but not horizontally. I'm trying:

Code:

        div#container { float: left }
        div#title { float: right }
	<div id="container">
	        hello<br>hello
		<div id="title">
			Text 1<br />
                        Text 2
		</div>
	</div>

Which is producing:
Code:

|--------------------------------------|
| Hello                                |
| Hello                                |
|                  |----------------|  |
|                  |  Text 1        |  |
|                  |  Text 2        |  |
|                  |----------------|  |
|--------------------------------------|

Perhaps a positioning thing which I don't understand yet? It's not homework so you don't have to do it for me, but rather you could just point to knowledge sources.... Tx!

Hi Everyone,

I've been doing modest CSS for a while now and feel like I have a good grasp of it, and generally find a way of doing what I want. But, this has always bugged me and I need to understand what is going on...

I think it's a question of Floating.

This is in reference to http://www.arabellamusic.co.uk

I want the blog posts to be on the left, and some other content on the right. How is the best way to go about doing this? You can check my source, but this was my thinking:

Code:

HTML

<div class='inner'>
     <div class='left'>
     BLOG PHP HERE
     </div>

     <div class='right'>
     SOME OTHER STUFF HERE
     </div>
</div>

And the CSS:

.inner { width:788px; }
.left { float:left; width:50%; }
.right { float:left; width:50%; }

If you grab my stylesheet and my source, you will see that I have a couple more things in there, but I don't think they could be affecting the rest (text-align etc...)

So, am I doing this wrong? I have floated columns in other websites this way and it sometimes works, sometimes doesn't. Incidentally, once it would only work when I set 49% to each, I was assuming this was something to do with the box model I read about, but wasn't too sure.
I will try not to play around with the site too much until I get a reply or two, but a few things may jump around as I try stuff!

Thanks in advance...
James

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?

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?

Hi..

I have a problem with ie rendering floaring dd's. What happens is the dd stay next to each other even if i had cleared it. It works fine in FF. Can anyone share some light?

... here is the code...

Code:

<dl>
                                <dt>Email:</dt>
                                <dd><input type="text" /></dd>
                                
                                <dt>State:</dt>
                                <dd>
                                    <select>
                                        <option>option1</option>
                                        <option>option2</option>
                                        <option>option3</option>
                                    </select>
                                </dd>
                                
                                <dt>Year of Birth:</dt>
                                <dd>
                                    <select>
                                        <option>option1</option>
                                        <option>option2</option>
                                        <option>option3</option>
                                    </select>
                                </dd>
                            </dl>

and the css:

Code:

dl{
}

dl dt{
	clear:both;
	width:80px;
	text-align:right;
	margin:10px 0;
}
dl dd{
	margin:8px 0 0 5px;
}

dl dt,dl dd{
	float:left;
}

thank you in advance

I have a page with content on the left and a menu with "latest" news sitting directly under it. When the pages get longer, when you scroll down there is whitespace there. So I want the "latest news" section to follow the page, however, when I set the position to fixed the news overlaps the menu.. only to be made worse by the fact that I use jquery's accordion plug-in.

I'm a new member so I can't directly post a link..but
freezerburned dot org /tikigaq.com/old.php

I'm out of ideas.

Thanks for the help.

Please look at this page in FF

http://www.roadhousecamper.com/camper.asp?rv=17

Notice div with the red background and the thumbnails? It should float to the right of the large image but is does not. It does though in IE7? Thanks for any help. T

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

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

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>