ansaurus

Question

Structure of web page. Huge gap. HTML or CSS issue?

Answer 1

+1 A:

You could try the following in order to attempt to identify where the problem lies:

Install the Web Developer add-on in Firefox, load up your page then use the 'Outline Block Level Elements' option to get a visual display of all the elements that make up your page.

Rogue Wolf 2010-09-02 20:48:53

Also, the [Firebug](http://www.getfirebug.com) add-on is helpful if you don't have it installed already.

jake33 2010-09-02 22:01:08

I am mostly working with Safari. Do you have any safari add-on similar to this one? It looks really nice as I tested it on Firefox.

2010-09-06 09:36:57

Safari has its own web inspector tools which are very similar to firebug (although not as good imo). You have to enable them in the preferences though. Here's more: http://www.apple.com/safari/features.html#developer

lnrbob 2010-09-06 09:53:12

Wow I had no idea Safari had such a cool extension!!! Thank you very much!!! Really helpful tip!

2010-09-07 08:37:58

Answer 2

+1 A:

Right, there are a couple of issues with the code you have here, most notably the number of divs you are using (I assume that's just for the rounded corners?). However I believe your issue is caused by the positioning of the #leftlist and #rightlist. I can't see a reason for these to be position:relative (also when used you should only set the top value or the bottom value, not both (e.g. 'top:0px' OR 'bottom:0px').)

What is happening is you are moving the #rightlist from it's default position under the #leftlist. Because you are using position:relative and not position:absolute the original position is retained. The extra whitespace you are seeing is where the #rightlist should, by default, appear.

I would not use position in this instance. A better alternative is to use 'float:left' on both lists. If you do this your css will end up being the same for each list - try this:

#leftlist
#rightlist {
    width:430px;
    float:left;
    }

This may collapse the #container div which can be fixed in a number of ways, the simplest being adding 'overflow:hidden;height:100%' to #container. A quick google search should provide many more options if required.

Another alternative would be to use 'display:inline-block' instead of 'float:left' although this can cause issues in older browsers - it really depends on what browsers you need to support.

Hope this helps put you on the right track. Please leave a comment if I'm not being clear and I'll edit my response!

lnrbob 2010-09-02 21:54:48

Thank you very much!!! The 'display:inline-block' worked for me. Latest version of Safari, Chrome and Firefox are desired support pages so it is fine.

2010-09-06 07:36:44

Awesome, glad it helped!

lnrbob 2010-09-06 09:49:49

ansaurus

tags:

views:

answers:

Structure of web page. Huge gap. HTML or CSS issue?

related questions