CODEWITHSUNDEEP
htmlcssfirefox
neskk
neskk

Reputation: 13

CSS in Firefox: Div doesn't appear in right position

I'm designing a web page at: http://trackstudent.pt/index.php

I ran into a bug that I can't fix, if you notice after inspecting the link, the <p></p> is getting pushed to the right, by a measure and I can't figure out why. All the divs have margin:0, padding:0 and there's enough space so that that element should fit that space.

Amazingly in the 2nd row of content that thing doesn't happen.

I have css from 1kbgrid (960px grid with 12 columns):

// Grid Cell (column)
.column {
    margin: 5px 10px;
    overflow: hidden;
    float: left;
    display: inline;
}

// Grid row
.row {
    width:960px;
    margin: 0px auto;
    overflow: hidden;
}

// Nested rows
.row .row {
    margin: 0px -10px;
    width: auto;
    display: inline-block;
}

In HTML I have:

<body> -> width: 100%
<div id="container"> -> width: 100%
<div id="mainWrapper"> -> width: 960px
<section class="row"> -> width: 960px

EDIT: With clear:both; in #wrapperMain it works! But I still don't get why this is happening, because the header has height:40px and the logo too, so there shouldn't be any area from the logo expanding pass the header. Anyone can offer insight?

Thank you in advance.

Upvotes: 1

Views: 463

Answers (1)

0b10011
0b10011

Reputation: 18785

It's from the floating logo. Simply add the following CSS:

#wrapperHeader {
 overflow:hidden; /* Forces header to contain elements */
}

Or:

#wrapperMain {
 clear:both; /* Pushes wrapper down until it's past bottom of header elements */
}

Upvotes: 3

Related Questions