Div float and padding-left problem in mozilla

ssjogus · September 26, 2008, 7:15am

Hi,

I have two divs in my layout. I am trying to put them side by side, by giving the first div (div1) float:left .

This step works out well , but when i give the left padding to my second div (div2), mozilla is not showing it correctly. In IE its looking well, but mozilla is doing a mess. The left padding of ‘15px’, it is taking from the far left corner of the screen, and not recoginizing the space that div1 has used. Is there any solution for it?

Here is the code:

div{ height:150px}
#div1{ background: #CC99CC; width:60px; float:left;}
#div2{ background: #FFFFCC; margin:0px; padding:0px; padding-left:15px;}
</style>
</head>

<body>
<div id=“div1”>fsd</div><!–div1 ends here –>
<div id=“div2”>Some text Some textSome textSome textSome textSome textSome text </div>
<!–div2 ends here –>
</body>

PaulOB · September 26, 2008, 8:08am

Hi,

Floats are removed from the flow and therefore elements alongside floats will almost act as if teh float isn’t there and margins, padding, borders and background colours will slide under the float as though the float wasn’t there at all.

The foreground content is moved out of the way by the float but margins and padding on the static content will still refer to the containing block and not the floated element.

IE is adding the padding because you have given the element a “layout” using height. This makes the element take note of the float and applies padding from the floated element instead. You can get the same effect in other browsers by applying overflow other than visible to to #div2 (#div2{overflow:hidden}).

Probably the easiest solution is simply to apply the margin from the floated element as that will push foreground content away.


#div1{ 
background: #CC99CC; 
width:60px; 
float:left;
[B]margin-right:15px[/B]}

Hop that helps

ssjogus · September 26, 2008, 9:02am

Hi,

yes it works, if i give overflow:hidden to div2. thanks for your solution.

but at the same time i am so confused, that the floats getting removed from the flow. that is so weird and illogical. is there any reason, why the floats are getting removed, even after we specify for it.

and second thing, what is the connection between 'overflow:hidden ’ and ‘float’. why are the floats getting displayed with this particular tag?

These things are so confusing. every time i decide to design a div based layout, and such problmes occur. and then i switch again to table based layouts.

Erik_J · September 26, 2008, 9:03am

The default height you have set on the div element triggers hasLayout in IE, to make good browsers behave like IE they need an overflow setting other than the default visible, e.g.:

div{ height:150px; overflow:hidden}

This makes a fluid static box clear its edges from float edges on its inside and outside, and its margin/padding will not slide under the adjecent float.

[EDIT]
Oops…
Apparently I had this tab unrefreshed for a long time. :)[/EDIT]

PaulOB · September 26, 2008, 9:33am

but at the same time i am so confused, that the floats getting removed from the flow. that is so weird and illogical.

No, it’s totally logical because floats do exactly what their name says and they “float”.

They are not contained by anything and just “float” around. That’s why the “clear” property is available so that floats can be cleared and normal service can be resumed under the float.

Floats weren’t really meant for columnar layout which is why you have to jump through a few hoops to get them to work as columns but they are very flexible and will work well if coded correctly.

and second thing, what is the connection between 'overflow:hidden ’ and ‘float’.

The connection has nothing to do with floats but the fact that overflow (other than visible) causes a container to take care of its boundaries and this creates a rectangular block that will also take note of floats and stop collapsing margins also. (It’s the same effect that “haslayout” has on elements in IE.)

ssjogus · September 26, 2008, 9:57am

hey,

thanks so much … i am getting enlightend in this new area of divs…

i tried now with

#div1{ background: #CC99CC; width:160px; height:270px; float:left; }
#div2{ background: #FFFFCC; margin-left:160px; padding:0px; padding-left:15px; }

and it also worked. would you recommend any div, css websites for ‘dummies’?

PaulOB · September 26, 2008, 11:37am

would you recommend any div, css websites for ‘dummies’

Read through the Faq sticky thread and the Tips thread and you will get a lot of information there.

Then read this.

http://reference.sitepoint.com/css

mmestrov · November 6, 2008, 10:55pm

I’m having a similar issue with two DIVs. In IE they both show up, but in Mozilla the second one does not. I tried a few of the suggestions but have not had any luck. Here is my code.

Thanks.

   [B] &lt;asp:Panel runat="server" ID="PageHeader" CssClass="MapViewer_TitleBannerStyle" Width="100%"
        Height="86px" Style="position: relative;"&gt;
        &lt;div class="MapViewer_TitleBannerStyleLeft" style="position: relative; top: 0px;
            float: left; width: 504px; height: 85px;"&gt;
            &lt;asp:HyperLink ID="CloseHyperLink" runat="server" Style="color: White; font-family: Verdana;
                font-size: 8pt;" NavigateUrl="JavaScript: CloseOut()" Visible="False" ToolTip="Close Application"&gt;Close&lt;/asp:HyperLink&gt;&nbsp;&nbsp;
        &lt;/div&gt;
        &lt;div class="MapViewer_TitleBannerStyleRight" style="position: relative; bottom: 0px;
            float: right; width: 450px; height: 85px;"&gt;
            &lt;asp:HyperLink ID="HyperLink2" runat="server" Style="color: White; font-family: Verdana;
                font-size: 8pt;" NavigateUrl="JavaScript: CloseOut()" Visible="False" ToolTip="Close Application"&gt;Close&lt;/asp:HyperLink&gt;&nbsp;&nbsp;
        &lt;/div&gt;
    &lt;/asp:Panel&gt;[/B]

PaulOB · November 6, 2008, 11:14pm

Hi,

Can you post css and html rather than asp. Please post the code that you get from view source when the file is run and we’ll take a look and see what’s going on.

BTW welcome to Sitepoint

mmestrov · November 6, 2008, 11:27pm

Paul, Thanks so much.

Here is my View Source

    &lt;div id="PageHeader" class="MapViewer_TitleBannerStyle" style="height:86px;width:100%;position: relative;"&gt;

        &lt;div class="MapViewer_TitleBannerStyleLeft" style="position: relative; top: 0px;
            float: left; width: 504px; height: 85px;"&gt;
            &nbsp;&nbsp;
        &lt;/div&gt;
        &lt;div class="MapViewer_TitleBannerStyleRight" style="position: relative; bottom: 0px;
            float: right; width: 450px; height: 85px;"&gt;
            &nbsp;&nbsp;
        &lt;/div&gt;

Here is my CSS
.MapViewer_TitleBannerStyle
{
display: block;
background-color: #acc4da;
background-image: url(images/SoCoBasic_BlueLogo1.gif);
background-repeat: no-repeat;
font-weight: bold;
font-size: small;
font-family: Verdana, Sans-Serif, Arial;
color: #073F78;
}

.MapViewer_TitleBannerStyleRight
{
display: block;
background-color: #acc4da;
background-image: url(images/SoCoBasic_BlueSvc1.gif);
background-repeat: no-repeat;
background-attachment:fixed;
background-position:right;
font-weight: bold;
font-size: small;
font-family: Verdana, Sans-Serif, Arial;
color: #073F78;
}

.MapViewer_TitleBannerStyleLeft
{
display: block;
background-color: #acc4da;
background-image: url(images/SoCoBasic_BlueLogo1.gif);
background-repeat: no-repeat;
font-weight: bold;
font-size: small;
font-family: Verdana, Sans-Serif, Arial;
color: #073F78;
}

PaulOB · November 7, 2008, 12:21am

Hi,

That code seems to be working as you get left and right elements in Firefox and iE.

What seems to be the problem you are having?

You have missed a closing div out at the end though.


<div id="PageHeader" class="MapViewer_TitleBannerStyle" style="height:86px;width:100&#37;;position: relative;">
    <div class="MapViewer_TitleBannerStyleLeft" style="position: relative;float: left; width: 504px; height: 85px;"> Left&nbsp;&nbsp; </div>
    <div class="MapViewer_TitleBannerStyleRight" style="position: relative;float: right; width: 450px; height: 85px;">right &nbsp;&nbsp; </div>
[B]</div>[/B]

Otherwise the code seems to be doing what you told it.

Run this code in your browse and tell me where its going wrong for you.


<!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>Untitled Document</title>
<style type="text/css">
.MapViewer_TitleBannerStyle {
    display: block;
    background-color: #acc4da;
    background-image: url(images/SoCoBasic_BlueLogo1.gif);
    background-repeat: no-repeat;
    font-weight: bold;
    font-size: small;
    font-family: Verdana, Sans-Serif, Arial;
    color: #073F78;
}
.MapViewer_TitleBannerStyleRight {
    display: block;
    background-color: #acc4da;
    background-image: url(images/SoCoBasic_BlueSvc1.gif);
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position:right;
    font-weight: bold;
    font-size: small;
    font-family: Verdana, Sans-Serif, Arial;
    color: #073F78;
}
.MapViewer_TitleBannerStyleLeft {
    display: block;
    background-color: #acc4da;
    background-image: url(images/SoCoBasic_BlueLogo1.gif);
    background-repeat: no-repeat;
    font-weight: bold;
    font-size: small;
    font-family: Verdana, Sans-Serif, Arial;
    color: #073F78;
}
</style>
</head>
<body>
<div id="PageHeader" class="MapViewer_TitleBannerStyle" style="height:86px;width:100%;position: relative;">
    <div class="MapViewer_TitleBannerStyleLeft" style="position: relative;float: left; width: 504px; height: 85px;"> Left&nbsp;&nbsp; </div>
    <div class="MapViewer_TitleBannerStyleRight" style="position: relative;float: right; width: 450px; height: 85px;">right &nbsp;&nbsp; </div>
</div>
</body>
</html>

mmestrov · November 7, 2008, 3:34pm

Hey, Paul. Yeah, I forgot to paste that last div in , but it is there.

What’s happening is that in I.E. I see both the left TitleBanner as well as the right Title Banner are both showing. In MO only the left one is.

PaulOB · November 7, 2008, 4:18pm

Which version of mozilla are you using? The code I’m looking at seems to display in Firefox ok.

I might need more information - do you have a link that I can see it live?

mmestrov · November 7, 2008, 5:43pm

Paul, figured it out. I took out the following line in the CSS for the right graphic and it now shows up. I now have another issue because of that, but at least I got this solved.

Thanks for you help.

REMOVED — background-attachment:fixed;

PaulOB · November 7, 2008, 6:41pm

Hi,

Yes IE6 doesn’t implement background-attachment:fixed properly but other browsers do. A fixed position is always relative to the viewport (at all time) and not the element or parent that contains it.

I should have noticed you had that property in there but as I didn’t have images to look at and so I overlooked it

Topic		Replies	Views
Float text left and right on same line HTML & CSS	2	34574	June 1, 2006
Css between IE and Chrome/Firefox HTML & CSS	4	648	January 13, 2011
Div seems to clear the float? HTML & CSS	13	875	June 25, 2011
Floating divs, simple Im sure but goofy outcome HTML & CSS	25	1556	March 11, 2010
Google chrome not flushing out margin with float HTML & CSS	12	5011	March 7, 2010

Div float and padding-left problem in mozilla

Related topics