CSS - Ie Are Adding Space From The Top On A Floating Div

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

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

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

I currently have the following layout

Code:

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

how do i go about making the same layout but using CSS. Each <td> is 50% wide

Hi again

could someone help me figure out why my left and right box's on thid design are not inline with the content (middle) box

thanks

see attached pic to see what i mean.


Code:

CSS CODE

body {
background:#ffffff;
color:#000000;
font:76% Verdana,Tahoma,Arial,sans-serif;
margin:0;
padding:0;
text-align:center;
}

/*** Main container ***/

#container {
background:#EAEAEA url() repeat-x;
color:#000000;
width:90%;
margin:5px;
min-width:770px;
padding:0;
}


/*** Content ***/

#content {
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
height:500px;
margin:5px;
}

/*** Main Banner ***/

#Banner {
background-color:#EEEEEE;
height:55px;
border:1px solid #DEDEDE;
padding:15px 20px 5px;
margin:5px;
}

/*** Left Side Navigation ***/

#SideNav {
width:15%;
float:left;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
min-width:200px;
padding:15px 20px 5px;
margin:3px;
}

/*** Right Side content ***/

#RightCon {
float:right;
width:15%;
background-color:#EEEEEE;
border:1px solid #DEDEDE;
color:#000000;
padding:15px 20px 5px;
min-width:200px;
margin:3px;
}

Thanks

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

I have a DIV element in a menu system that pops up when you hover over the parent menu. Everything in the menu works fine, however I need to embeed the navigation including the menu into a frame where the menu sits flush with the bottom of the frame it's in and when you mouse over the parent element the DIV that pops up is hidden by the frame below it. Like so:

--- frame 1 ------
<content>
<menu>
--- frame 2 ------
<main content>
...
...
------------------

Is there anyway with CSS to tell the DIV to float above the bottom frame?

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?

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.

I saw this appealing menu from a css contest page and i've studied the code over and over again but i can't seem to get the same effect as this person has done. He has created a menu that just floats while the screen is able to scroll up and down.
the site is :
http://contest.prestontalk.com/index/FluidFixed/0/4/1/

if anyone knows how this effect is done, let me know.
thanks!

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>

Hey,

I've got a little issue with my new wordpress template. I can't set my right column to height: 100%.

This is how the template looks like

Code:

<div id='maincontainer'>
<div id='sidebar'>
<div id='mainpage'>

With following position css:

Code:

#maincontainer {
  position: relative; 
}

#sidebar {
  float: right;
}

Now I need that sidebar column to go all the way down, i thought of setting height: 100% and setting it to maincontainer also as sidebar is relative to maincontainer.

What works is setting a height in pixels but this is not what I want as it makes small pages very long.

Has anybody experienced a similar problem or is able to shed some light on the issue. I've been looking at it for some while and it's beginning to annoy me



greets,

Hey All:

This is my first post to this forum. Any and all assistance is greatly appreciated!

I am having an issue with some floating div's. I'm sure it's as easy as moving the div to a different parent but, I'm having trouble figuring this one out.

My site is pretty simple. Most of the div's are floating left. I have one div that is floating right. I want the right div to stretch or contract to the full height of the content. Most of my content fits into a 740px height. There are a few that are more (up to 1500px). So, I want to put 1500px worth of images in the right column but only show as much as needed to fit the content area (most of the time only 740px). Right now, the full height of the right div is showing.

I would post a link but, I'm new to the forum and it isn't allowed. If there is a way around this, I am happy to provide a link.

Thanks in advance for any responses!

Jeff

Hello.

I spoke with some css developers yesterday on IRC but they failed to fix the problem. They suggested me to ask here for help so I will.

I am currently making a new homepage and this is my page; mg-s.org/newly/

I had to edit most of the .css because the page was "floating". Like, some people couldn't see everything and if we zoomed in or out then the page got messed up..

So here is the current progress: mg-s.org/newly/ which is messed up.

It's supposed to look like this:
pokit.org/get/?00e5090c7ab5a0972f325bb16608f6fb.jpg

But as you can see it's not.

Here is the style.css : pastebin.com/BPrfZuBd
Here is the index.php : pastebin.com/BDQKcxCE

I am not that familiar with css so I need help. I've already editing on the size in the .css like on "top" to fix the #panel so it goes futher up but it's not working. Same with the #rightmenu