difficulty with a float left and right layout

konnor5092 · #1 Aug 9th, 2007, 21:00

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

Quote:

#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 · #2 Aug 9th, 2007, 21:05

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 · #3 Aug 9th, 2007, 21:17

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

I don't see the padding problem.

pa007 · #4 Aug 9th, 2007, 21:33

Not auto then.

Woops.

Pete.

konnor5092 · #5 Aug 9th, 2007, 21:38

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 · #6 Aug 9th, 2007, 22:16

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 · #7 Aug 9th, 2007, 22:30

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 · #8 Aug 10th, 2007, 00:51

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 · #9 Aug 10th, 2007, 02:02

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 · #10 Aug 10th, 2007, 07:01

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
[SOLVED] Difficulty with HTML E-mail...	TheLion	Web Page Design	3	Jan 24th, 2008 20:50
Float: Left with firefox	magnetica	Web Page Design	2	Aug 24th, 2007 16:55
help useing float building page right to left	rocket468	Web Page Design	5	Jan 23rd, 2007 23:56
Problems with float:left float:right	nvidiajoe	Web Page Design	8	Nov 17th, 2006 20:24

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
difficulty with a float left and right layout