Home/ Questions/Q 8279411
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T09:19:50+00:00

I’m designing a web page at: http://trackstudent.pt/index.php I ran into a bug that I

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 */
}
    • 0