difficulty with a float left and right layout

[konnor5092]

Bonjourno,

I have this layout in which elements are floated left and right on the page, and im encountering some difficulties.

The first is a problem ive experienced before but can't remember a way round it. Firefox isn't displaying the background colour, despite the div containing the elements having a background colour specified...

Code: Select all

<div id="maincontent">
    <h2 class="aboutpic">About the web devise team</h2>
    <h2 class="aboutmatt">Matt O'Connor</h2>
    <h2 class="aboutjames">James Bailey</h2>
    <div id="profilecontainer"> 
        <div id="mattprofile">
            <p>Age: 22</p>
            <p>Occupation: Software Consultant</p>
            <p>Qualifications: BSc Computer Science with Imaging and multimedia, UEA</p>
        </div>
        <div id="jamesprofile">
            <p>Age: 22</p>
            <p>Occupation: Software Consultant</p>
            <p>Qualifications: BSc Computer Science with Imaging and multimedia, UEA</p>
        </div>
     </div>
</div>

Code: Select all

#maincontent {
    width: 701px;
    background-color: #413d3e;
}

The site can be viewed at http://www.themissingpeace.co.uk/about.php

The next issue is that when I add padding inside the floated left and right content boxes using <p>, the whole page shifts left, despite all the elements being inline. This can be demonstrated by switching between 'home' and 'about' in the nav bar.

Code: Select all

p {padding-left: 5px; padding-right: 5px;}

#profilecontainer {
clear: both;
width: 701px;
}

#mattprofile, #jamesprofile {
width: 336px;
padding-top: 80px;
}

#mattprofile {
background: #000000 url(images/mattgraphic.jpg) top left no-repeat;
float: left;
}

#jamesprofile {
background: #000000 url(images/jamesgraphic.jpg) top left no-repeat;
float: right;
}

Thanks in advance,

Matt

[pa007]

It's because the float property removes those elements it is applied to from the flow of the document. I think its overflow:auto; that solves it though that could be wrong. Add it to the container div and it should (might) work.

Pete.

[Lchad]

yes, add overflow: hidden;
to the maincontent div.

I don't see the padding problem.

[pa007]

Not auto then.

Woops.

Pete.

[konnor5092]

In firefox the whole 'about' page shifts to the left when compared with the 'home' page.

that overflow seems to have done the trick, ta.

*EDIT problem seems to have sorted itself out. Funny how that happens....

code and div wise, does this look like a 'clean' way of acheiving the look I'm after? Possible to remove the 'profilecontainer' per chance?

many thanks

[Lchad]

I do think you can delete the profilecontainer div. That one did seem extra.

Otherwise, it was logical ...That's how I would do it too.

[konnor5092]

IE doesn't seem to like it removed unfortunately.

Still got this shifting problem in FF. Don't spose anyone else has noticed it?

[Lchad]

But IE if fine with the div? Then if that's the case, put it back. I'd need to look again but it's late. I'll give it a go tomorrow.

[Lchad]

Maybe I can't see the problem but I've refreshed and refreshed and I don't see any problems in shifting in any browser and I don't see anything wrong with the two div's that are floating.

Maybe someone else can test this?

[konnor5092]

very strange. If I change the resolution on my monitor, it no longer happens! I'll leave it be. Can't be a code problem.

Thanks for taking the time to have gander.

*EDIT - Oh I am a silly sausage! It was because when the content becomes more than a page in height, it adds the scroll bar down the right hand side of the browser, so everything is shifted left and recentred to accomodate.